HTML学习笔记----自用！！！

标签

1、标题标签

<h1></h1>

英文的 ! 是自动创建的快捷键

ctrl / 是注释快捷键

ctrl S 是快捷保存

Alt B 是快速变成网页运行

ctrl D 是选中相同的字符（快捷修改相同字符）

标题一共有六个 ：

<h1>1级标题</h1>
        <h2>2级标题</h2>
        <h3>3级标题</h3>
        <h4>4级标题</h4>
        <h5>5级标题</h5>
        <h6>6级标题</h6>

标题的特点：

（1）、都是加粗的；

（2）、独占一行（自动折行）；

（3）、由大到小

1. 段落标签

<p></p>

点击查看——自动换行就可以代码自动换行了（或者Alt Z）

两段会默认隔行（行距由css改变）

换行标签（单标签）：<br>，强制换行。

水平分割线标签（单标签）：<hr>，分割不同主题内容的水平线。

1. 文本格式化标签

（1）加粗（b、strong）

<b>加粗</b>

<strong>加粗</strong>

（2）下划线（u、ins）

<u>下划线</u>

<ins>下划线</ins>

（3）倾斜（i、 em）

<i>倾斜</i>

<em>倾斜</em>

（4）删除线（s、del）

<s>删除线</s>

<del>删除线</del>

不重要的时候用一个字母的，重要的时候用后面的英文单词来写代码，单词的语义更强烈

1. 图片标签

单标签 <img src="" alt="">

ex：img src="./一个图片.png"

./ 是当前的意思

src是属性名称，后接引号中写图片路径（在同一文件中可以直接写名称）

属性没有先后顺序

alt 是替换文本 当图片不显示的时候所显示的文字

ex： img src="./一个图.png" alt="这是去红岩革命纪念馆的图片"

title是提示文本：当鼠标悬停的时候显示的文字

width（宽度） 和 height（高度），如果只写了一个属性，另外一个会和它一样，等比例变小，工作中只写一个就行了，这样图片才不会变形。

1. 路径

绝对路径（了解）：指目录下的绝对位置，从盘符开始的路径

相对路径（常用）：从当前文件出发找目标文件

同级目录：在同一目录中

上级目录： 目标文件在上级目录中,用../

下级目录：目标文件在下级目录中,用/

1. 音频标签

用<audio> 双标签

显示音频的播放控件(默认不自动播放)：controls

自动播放，用：autoplay(部分浏览器不支持)

循环播放：loop

ex：<audio src="./白石溪.mp3" controls autoplay loop></audio>

音频标签目前只支持三种格式：MP3,Wav,Ogg

1. 视频标签

<video>双标签

显示音频的播放控件(默认不自动播放)：controls

自动播放，用：autoplay(谷歌浏览器中需要配合muted实现静音播放)

循环播放：loop

ex：<video src="./blackpink.mp4" controls autoplay muted loop></video>

谷歌可以自动播放，但是必须要静音，用muted

视频标签支持三种格式：MP4，WebM,Ogg

1. 链接标签

a标签 超链接 锚链接

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

href:写跳转地址的地方

ex：<a href="https://www.baidu.com/">跳转到baidu</a>

当暂时不知道跳转地址时，用#表示空链接

<a href="#">这是一个空链接</a>

target属性去控制目标网页打开的形式，是在原页面打开还是开一个新页面。

_self(覆盖原页面)  _blank(另开新页面)

1. 列表标签

1. 无序列表

父子级标签

<ul>里面只能出现<li>标签，<li>里面都可以放

ul(表示无序列表的整体，用于包裹li标签)

li（表示无序列表的每一项，用于包含每一行的内容）

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

1. 有序列表

ol   li父子级标签，默认有序号标识

1. 自定义列表

dl：包裹整体

dt：自定义列表的主题

dd：和li的功能一样（默认向后缩进）

1. 表格标签

table:整体，包裹多个tr

tr：表格每行，包裹td

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

border：边框宽度

width：表格宽度

height：表格高度

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

caption：写在table内部，表格大标题

th：表头单元格，表示一行小标题，默认加粗居中

th写在tr里面，用于替换td标签

表格的结构标签：提高计算机效率

thead头部、tbody主体、tfoot底部（包裹tr）

合并单元格（跨行合并，跨列合并均行【保留左上原则】）

跨行：rowspan 跨列：colspan；！不能跨结构合并

Tab键可以向后缩进，shift+Tab键可以向前缩进

1. 表单标签

登录 注册 搜索 用到表单标签

<form action="">

anction:文件传递地址

（1）input系列标签

text：文本框，输入单行文本

placeholder：文本框中的占位符-提示用户输入内容的文本

文本框： <input type="text" placeholder="请输入用户账号">不自动换行

 password：密码框，输入密码

 密码框：<input type="password" placeholder="请输入账号密码">

radio：单选框，用于多选一

name：属性去分组，有相同name属性的单选框为一组，一组只有一个被选中

checked：默认选中

单选框：<input type="radio" name="sex">男

           <input type="radio" name="sex" checked>女

checkbox：多选框，用于多选多

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

multiple：同时上传多个文件

文件上传：<input type="file" multiple>

submit：提交按钮，用于提交

reset：重置按钮，用于重置，恢复表单默认值

form:表单域，reset要配合表单域一起使用

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

value：给按钮添加提示文字

（2）button标签

谷歌浏览器中button默认是提交按钮

button是双标签，更便于包裹其他内容

ex：<button>我是按钮</button>

submit：提交按钮，提交数据给后端服务器

ex：<button type="submit">提交按钮</button>

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

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

（3）select下拉菜单标签

select：表示下拉菜单的整体

option：下拉菜单的每一项

selected：默认选中

（4）textarea文本域

在网页中提供可输入多行文本的表单控件

cols：可见宽度

rows：可见行数

右下角可以拖拽改变大小

（5）label标签

label把文本框起来，在for属性中写相同值

label把所有框起来，把for删掉 

1. 语义化标签

（1）没有语义的标签

div：独占一行

span：一行显示多个

（2）有语义的标签

在HTML5新版本中，做手机端网页时用

header：网页头部

nav：网页导航

footer：网页底部

aside：网页侧边栏

section：网页区块

article：网页文章

1. 字符实体

网页不认识多个空格，只认识 一个

    这是HTML文档，现在要学习字符实体。

    空格  &nbsp

    小于号 &lt

    大于号 &gt

    和号 &amp