html标签

<br>换行

<hr>水平线

Ctrl+/注释

文本格式化

加粗：b和strong

下划线：u和ins

倾斜：i和em

删除线：s和del

语义：用英文突出重要性的强调语境

1.图片：<img  src=””  alt=””title=””>

       Src：图片路径

       alt：图片加载失败，显示文本

       title:鼠标悬停提示

       width:宽度

       height：高度

注意：只设置width或height中一个，会等比自动缩放

       相对路径（常用）：从当前文件（html网页）开始出发找目标文件的过程

              同级目录：./文件名，可表示当前。也可直接写文件名

              下级目录：同级文件夹/文件名

              上级目录：../返回一级，../文件名。先返回再找文件

       绝对路径（了解）：目录下的绝对位置，从盘符开始的路径或网络地址

2.音频：<audio src=”” controls autoplay loop></audio>

       Controls:显示播放的控件

       Autoplay:自动播放（部分浏览器不支持）

       Loop:循环播放

注意：目前支持三种格式 MP3、Wav、Ogg

3.视频    <video src=”” controls autoplay loop ></video>

       Controls:显示播放的控件

       Autoplay:自动播放（谷歌中需配合muted实现静音播放）

       Loop:循环播放

注意：视频目前支持三种格式MP4、WebM、Ogg

4.超链接 <a href=”./目标网页.html” target=“”>超链接</a>

       Target:

              _self:默认值，在当前窗口中跳转（覆盖原网页）

              _blank:在新窗口中跳转（保留原网页）

5.列表

       无序列表：无明确排序

<ul>

                     <li></li>

                     <li></li>

                     <li></li>

</ul>

              ul：只能包括li标签

              li：可以包含任意内容

有序列表：有明确排序

       <ol>

                     <li></li>

                     <li></li>

                     <li></li>

</ol>

ol：只能包括li标签

              li：可以包含任意内容

       自定义列表：有标题有内容

              dl:表示自定义列表的整体，用于包裹dt/dd

              dt：表示自定义列表的主题

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

注意：dd会默认缩进显示

       dl：中只能包含dt/do

       dt/do可任意嵌套任意内容

6.表格

       <table border=””>

              <tr>

                     <td></td>

<td></td>

<td></td>

</tr>

</table>

       Table：表格整体，可用于包裹多个tr

       Tr： 表格每行，包裹td

       Td：表格单元格，包裹内容

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

相关属性

              Border:边框宽度

              Width：表格宽度

              Height：表格高度

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

              Caption：表格整体大标题，默认表格上居中位置

              Th：一列小标题，通常用于表格第一行

注意：caption写在table标签内部

              Th卸载tr标签内部（用于替换td标签）

表格结构标签

       Thead：表格头部

       Tbody：表格主体

       Tfoot：表格底部

合并单元格

       1.明确合并的单元格

       2.通过左上原则，确定保留谁删除谁

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

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

       跨行合并（垂直）Rowspan

       跨列合并（水平）Colspan

注意：同一个结构中的单元格才能合并，不能跨结构（thead、tbody、tfoot）

7.表单：一般用于登录、注册、搜索

<Input>

              Type属性值

                     Text：文本框，用于输入单行文本

                     Password：密码框，用与输入密码

                     Radio：单选框，用于多选一

                     Checkbox：多选框，用于多选多

                     File：文件选择，用于之后上传文件

                     Submit：提交按钮，点击之后提交数据给后端服务器

                     Reset：重置按钮，恢复表单默认值

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

提示字：

       Type：text

              Placeholder：占位符，提示用户输入内容

单选框：

       Type：radio 

              Name：分组，有相同name属性值的单选框为一组

              Checked：默认选中

文件：

       Type：file

              Multiple：多文件选择

按钮input：

              Submit：提交按钮，点击之后提交数据给后端服务器

              Reset：重置按钮，恢复表单默认值

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

注意：实现以上按钮功能，要用form标签把表单标签包裹起来

       Action：提交地址

Value：按钮名字

Button按钮

       <button></button>

       Type：

              Submit：提交按钮，点击之后提交数据给后端服务器

              Reset：重置按钮，恢复表单默认值

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

注意：谷歌种button默认是提交按钮，

Select下拉菜单

       Select标签：下拉菜单的整体

       Option标签：下拉菜单的每一项

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

Textarea文本域

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

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

注意：右下角可以拖拽改变大小，实际开发时针对样式效果推荐用css设置

      

Label：常用于绑定内容和表单标签的关系

       使用方法1：

              使用label把内容包裹起来

              在表单标签上添加id属性

              在label标签的for属性中设置对应的ID属性值

       使用方法2：

              直接使用label标签把内容和表单一起包裹起来

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

语义化标签

       无语义的布局标签

              Div标签：一行只显示一个（独占一行）

              Span标签：一行可以显示多个

       有语义的布局标签

              在HTML5新版本中，用于手机网页

              Header：网页头部

              Nav：网页导航

              Footer：网页底部

Aside：网页侧边栏

Section：网页区块

Article：网页文章

注意：以上标签显示特点和div一致，但是比div多了不同的语义

字符实体

能通过字符实体在网页中显示特殊符号

       常见的字符实体，用&连接

              空格：&nbsp;