HTML学习

原创已于 2022-09-29 19:18:31 修改 · 258 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #学习

于 2022-02-25 21:10:41 首次发布

HTML&CSS学习专栏收录该内容

5 篇文章

订阅专栏

这篇博客详细介绍了HTML和CSS的基础知识，包括绝对路径与相对路径的区别，常用标签如div、span、img、a的用法，表格的创建与样式设置，列表标签的类型及应用，以及表单元素如input、select和textarea的使用。还提及了行内块元素的概念以及水平线hr的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

b站HTML&CSS学习视频

一、绝对路径和相对路径

在这里插入图片描述
绝对路径用\，相对路径用/。绝对路径也可以用网上的图片。

二.标签学习

1.div （块元素，用于布局）

独占一行。设置宽度高度变大仍然独占一行。p标签内不能有div。

2.span（用于布局）

一行可有多个span，span中间有间隔。

3.img（图像）

<img src="D:\vscode\前端基础\day1" alt="图片无法显示"/> src是必须的属性，属性不分先后，为图片的路径。img另一个属性alt，当图片不能显示时显示alt的内容。
title，鼠标经过图像就会显示的文字。还有其他属性，width，height，这两个值修改一个，另一个会等比例修改，不会失真，两个一起改则按照修改的大小。border，边框粗细，默认为0。

4.a（超链接标签）：

外部链接前面要有http://。_self为当前窗口打开链接。内部链接为html文件，即打开自己编写的网页。#表示空链接。
在这里插入图片描述

锚点链接

在这里插入图片描述

5.注释标签：

快捷键Ctrl+/。

6.特殊字符

在这里插入图片描述
在HTML文件代码中无论在两个字间打多少空格都只显示一个空格，因此需要特殊字符。

7.表格标签（显示、展示数据）：

table是表格标签，tr是行标签，td是单元格标签。不同行的单元格默认左对齐。
在这里插入图片描述
使用这些属性时可以写到table标签中，也可以写到td、th中

<table>
    <tr><td>姓名</td><td>性别</td><td>爱好</td></tr>
    <tr><td>杰哥</td><td>男</td><td>敲代码</td></tr>
</table>

在这里插入图片描述
表头标签（th）：

<table border="1"  cellspacing="0">
    <tr><th align="center">姓名</th><th>性别</th><th>爱好</th></tr>
    <tr><td>杰哥</td><td>男</td><td>敲代码</td></tr>
</table>

在这里插入图片描述
表格标签的属性不常用，表格的属性后面会用css设置。
表格结构标签：thead表头，tbody表体，使用这两个标签可以使表格的结构更清晰，同时可以收起表格

合并单元格（其实是扩大）：td单元格标签的属性。rowspan=“n”，将本单元格和本列的下n-1单元格合并；colspan=“n”，将本单元格和同一行的下n-1单元格合并。

<tr>
    <td colspan="2">杰哥</td>
    <td align="center">男</td>
    <td>敲代码</td>
</tr>

在这里插入图片描述

8.列表标签：

无序列表：ul

ul中只能嵌套li，不能有其他标签，但li中可以有其他标签。

<ul>
    <li>杰哥</li>
    <li>喜欢</li>
    <li>敲代码</li>
</ul>

在这里插入图片描述
去除小圆点list-style:none;

有序列表：

<ol>
    <li>杰哥 21</li>
    <li>杰哥 22</li>
    <li>杰哥 20</li>
</ol>

在这里插入图片描述

自定义列表

<dl>
    <dt>项目名字</dt>
    <dd>项目1</dd>
    <dd>项目2</dd>
    <dd>项目3</dd>
</dl>

dl中只能放dt、dd，dt、dd里面可以包含任何标签。
在这里插入图片描述

9.表单

先写表单域(form标签)：

input单标签，输入标签，

其中input的属性type是输入的方式，例如下面的文本形式。

<form>
    杰哥:<input type="text" value="请输入用户名">
</form>

在这里插入图片描述

在这里插入图片描述
radio单选（圆）需要将name设置成相同才能实现多选一，也就是说必须设置name。CheckBox多选（方），也需要相同的name值。
checked属性设置为checked时，为默认选择。
maxlength规定输入字符串的最大长度。
label标签：点字也可完成选择，增加用户体验。

性别：<input type="radio" id="nan" name="sex"><label for="nan">男</label> 
<input type="radio" id="nv" name="sex"><label for="nv">女</label><br>

select下拉标签

在这里插入图片描述
在option标签中设置selected=“selected”，默认选择该选项。

文本域标签

textarea，该标签有两个属性cols和rows显示的列数和行数，一般不用而用css

10.hr：水平线

在这里插入图片描述

11.行内块元素

img、input、td同时具有行内元素和块元素的特点

12.块级元素、行内元素、行内块元素

添加链接描述