HTML标签

一、常用标签

1. 标题标签

<h1>-<h6> 字号变大变粗 独占一行 字体从1开始往下变小

如<h1>内容</h1>

1. 段落标签、换行标签

(1) <p>内容</p> 段落与段落之间有较大空隙

(2) 内容<br>(break缩写) 单标签 简单的开始新一行 (段落标签在段落间有垂直间距)

1. 文本格式化标签

(1)加粗：<strong></strong>

(2)倾斜：<em></em>

(3)删除线：<del></del>

(4)下划线：<ins></ins>

1. <div> <span>标签

没有语义，是个盒子，用来装内容，即用来布局

(1)division:分割、分区 <div>一行只能放一个<div>.大盒子

(2)span:跨度、跨距 <span>一行可以多个<span>.小盒子

1. 图像标签

i. 属性

(1)<img src="图片文件名"/>

(2)<img src="不存在的图片文件名" alt="文字"/> 替换文本 图像显示不出来的时候用文字替换

(3)<img src="图片文件名" title="文字"/> 提示文本 鼠标放到图像上，提示的文字

(4)<img src="图片文件名" title="文字" width="宽度大小" height="高度大小"/>一般只更改一个大小 等比例更改

(5)<img src="图片文件名" border="大小"/> 给图像设定边框

注：属性写在标签名img后面。属性与标签名、属性间用空格分开。格式：key="value"。

ii.文件夹

(1)目录文件夹web：存放做页面所需的相关素材，如html文件、图片等

(2)根目录：打开目录文件夹的第一层

(3)VSCode打开目录文件夹 可新建文件夹 新建的即放在该目录文件夹中了 也可以缩小界面 直接将文件拉至VSCode

iii.路径

(1)相对路径：图片相对于html页面的位置

同一级路径：<img src="图片文件名"/>

下一级路径：<img src="文件夹名/图片文件名"/>

上一级路径：<img src="../图片文件名"/>

(2)绝对路径(不常用)

如图片在电脑或者网上的位置复制图片地址

1. 超链接标签

(1)链接的语法格式

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

(2)链接分类：

i.外部链接，例如：

ii.内部链接：网站页面之间的相互链接，直接链接内部页面名称即可，例如：

iii.空链接：<a href="#">文本或图像</a>

iiii.下载链接：如果href里面地址是一个文件或压缩包，会下载这个文件

iiiii.网页元素链接：在网页中的各种元素，如文本、图像、表格、音频、视频等都可以添加超链接

iiiiii.锚点链接：点击链接，可以快速定位到页面中的某个位置

在链接文本中的href属性中，设置属性值为#名字的形式，如<a href="#two">第二集</a>

找到目标位置标签，里面添加一个id属性=刚才的名字，如<h3 id="two">第二集介绍</h3>

1. 注释标签

语法：<!--注释的内容--> 快捷键：ctel+/（问号？对应的键）

1. 特殊字符

重点记住 空格、大小于号这三个，其余的很少使用

二、常用标签

1. 表格标签

（1）表格作用：用来展示数据，不是用来布局的

（2）表格语法：

<table>
 <tr><td>单元格内的文字</td>...</tr>
</table>

<table>用来定义表格

<tr>用来定义表格中的行，嵌套在<table>中

<td>用来定义表格中的单元格，嵌套在<tr>中

（3）表头单元格标签

<th>单元格中的文字</th> 用于表格第一行，文字加粗并且居中展示

（4）表格属性 要写到table标签中去

后面学习CSS时简便使用

（5）表格结构标签（常用）均放在<table>标签中

i. <thead></thead>：用于定义表格的头部，内部必须拥有<tr>标签，一般用于第一行

ii.<tbody></tbody>：用于定义表格的主题，主要用于放数据本体

（6）合并单元格

i. 跨行合并：rowspan="个数"（最上侧单元格） 竖型

ii.跨列合并：colspan="个数"（最左侧单元格） 横型

iii.合并方式=合并的单元格数量，如：<td colspan="2"></td> 再删除多余的单元格

1. 列表标签

（1）列表作用：用来布局，整齐、有序，自由方便的布局

（2）无序列表

i.语法格式

<ul>
 <li>列表项1</li>
 <li>列表项2</li>
 <li>列表项3</li>
 ...
</ul>

ii.列表项之间没有级别之分，为并列的

<ul></ul>只能嵌套<li></li>

<li></li>可以容纳所有元素

无序列表会带有自己的样式属性，实际使用时，用CSS设置

（3）有序列表 有一定的顺序

<ol></ol> 基本与无序一致

（4）自定义列表

i. 常用于对术语或名词进行解释和描述，定义列表的列表项没有任何项目符号

ii.语法格式

<dl>
 <dt>名词1</dt>
 <dd>名词1解释1</dd>
 <dd>名词1解释2</dd>
 ...
</dl>

1. 表单标签

（1）表单作用：收集用户信息 与用户进行交互

（2）表单组成：表单域、表单控件（表单元素）、提示信息

i. 表单域 包含表单元素的区域

<form>会把它范围内的表单元素信息提交给服务器

语法格式

<form action="url地址" method="提交方式" name="表单域名称" 各表单元素控件
</form>

常见属性

ii. 表单控件

*<input>表单元素 单标签 用于收集用户信息

<input type="属性值"/>

type属性设置不同的属性值用来指定不同的控件类型

其他属性

例子如下：

额外：<label>标签 input元素定义标注（标签）

语法格式（例如）：

<label for="sex">女</label>
<input type="radio" name="sex" id="sex"/>

核心：<label>标签的for属性应当与相关的元素的id属性相同

**<select>表单元素 定义下拉列表

语法格式：

<select>
 <option>选项1</option>
 <option>选项2</option>
 <option>选项3</option>
 ...
</select>

注意：在选定项<option>后定义属性 selected="selected" 时，当前项即为默认选中项

**<textarea>表单元素 定义多行文本输入

语法格式（例如）：

<textarea>
 文本内容
</textarea>