HTML笔记

本文主要是介绍HTML笔记，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一、HTML基础标签

1.1、排版标签

1、标题标签

<h1>--<h6>

特点：文字加粗、文字变大，h1-h6逐渐减小、独占一行

2、段落标签

<p></p>

特点：段落之间存在间隙、独占一行

3、换行标签

<br>

特点：单标签、让文字强制换行

4、水平线标签

<hr>

特点：单标签、在页面中显示一条水平线

1.2、文本格式化标签

1、加粗

<b>，</b>；<strong>，</strong>

2、下划线

<u>，</u>；<ins>，</ins>

3、倾斜

<i>，</i>；<em>，</em>

4、删除线

<s>，</s>；<del>，</del>

语义：突出重要性强化语境

重要的语境用右边的代码。

1.3、媒体标签

1、图片标签

<img src=”” alt=””>

特点：标签上 可以存在多个属性，以空格隔开，没有顺序之分。

1）Alt属性，替换文本，图片加载失败，显示alt的文本，反之则不显示。

2）Title属性，提示文本，当鼠标悬停时，才显示文本。

注意:title属性不仅仅可以用于图片标签，还可以用于其他标签。

3）图片标签的width和height

宽度和高度（数字）

注意点：如果只设置width或height中的一个，另一个没设置会自动等比例缩放 （此时图片不会变形），如果同时设置了width和height两个，如设置不当图片可能会变形。

2、路径：

绝对路径：指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径D:\day01\images\1.jpg

相对路径：同级目录 + 下级目录 + 上级目录

同级目录：./目标图片路径 或者目标图片路径

下级目录：images\1.jpg

上级目录：../ images\1.jpg

3、音频标签

Audio

属性 src静态文件路径、controls控制台、autoplay自动播放（有些浏览器不支持）、loop循环播放

4、视频标签

video

属性 src静态文件路径、controls控制台、autoplay自动播放（有些浏览器不支持）、loop循环播放

注意：autoplay后面可以加muted静音自动播放

1.4、超链接标签

<a href="./目标网页.html">超链接</a>

#为空链接
href的作用是跳转地址
target=属性表示调整：
_self默认值，在当前窗口中跳转（覆盖原网页）
_blank在新网页跳转

二 、列表标签

无序列表、有序列表、自定义列表

1、无序列表：

Ul：无序列表整体，用于包裹Li标签

Li：c

特点：列表每一项前默认显示圆点标识

注意点：ul标签只允许包含li标签

Li标签可以包含任何内容

2、有序列表

Ol：有序列表整体，用于包裹Li标签

Li：有序列表的每一项，包含每一行内容

特点：列表每一项前默认显示序号标识

注意点：Ol标签只允许包含li标签

Li标签可以包含任意内容

3、自定义列表

Dl表示自定义列表的整体，用于包裹dt/dd标签

Dt表示自定义列表主题

Dd表示自定义列表针对主题的每一项内容

特点：dd前会默认显示缩进效果

注意点：dl标签中只允许包含dt/dd标签

dt/dd标签可以包含任意内容

三、表格标签

1、表格基本标签

table表格整体，用于包裹多个tr

Tr表格每行，用户包裹多个td

Td表格单元格，用于包裹内容

注意：嵌套关系：table>tr>td

2、表格属性

Border 边框宽度

Width 表格宽度

Height 表格高度

3、表格标题和表头单元格标签

Caption 表格大标题，默认在表格顶部位置居中显示

Th 表头单元格，一列小标题，默认内部文字加粗居中显示

注意点：caption标签写在table标签内部

Th标签写在tr标签内部

4、表格结构标签

Thead 表格头部

Tbody表格主体

Tfoot 表格底部

注意点：表格结构标签内部用户包裹tr标签

表格的结构标签可以省略

5、合并单元格

上下合并，只保留最上的，删除其他

左右合并，只保留最左的，删除其他

2）跨行合并或者跨列合并

Rowspan 跨行合并，将多行的单元格垂直合并

Colspan 跨列合并，将多列的单元格水平合并

注意：只有同一个结构标签中的单元格才能合并，不能跨结构标签合并

四、表单标签

1、input 系列标签，可以根据type属性值不同，展示不同效果

Input text 文本框，用于输入单行文本

Input password 密码框，用于输入密码

Input radio 单选框，用于多选一

Input CheckBox 多选框，用于多选多

Input file 文件选择，用于之后上传文件

Input submit 提交按钮，用于提交

Input resent 重置按钮，用于重置

Input button 普通按钮，默认无功能，之后配合JS添加功能

2、button 按钮标签

根据type属性值不同，展示不同效果

Button submit 提交按钮

Button reset 重置按钮

Button button 普通按钮，默认无功能，之后配合JS添加功能

3、select 下拉菜单标签

Select 下拉菜单整体

Option标签，下拉菜单每一项

Selected 属性，下拉菜单的默认选中

4、textarea 文本域标签

• cols：规定了文本域内可见宽度

• rows：规定了文本域内可见行数

实际开发时针对于样式效果推荐用CSS设置

5、lable标签

常用于绑定内容与表单标签的关系

使用方法①：

1.使用label标签把内容（如：文本）包裹起来

2. 在表单标签上添加id属性

3. 在label标签的for属性中设置对应的id属性值

使用方法②：

1. 直接使用label标签把内容（如：文本）和表单标签一起包裹起来

2. 需要把label标签的for属性删除即可

五、字符实体

空格的字符实体是 &nbsp;  

这篇关于HTML笔记的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！