HTML学习笔记

1、网页基本标签

1.1、标题标签

<!--标题标签-->
<h1>标题一</h1>
<h2>标题二</h2>
<h3>标题三</h3>
<h4>标题四</h4>
<h5>标题五</h5>
<h6>标题六</h6>

1.2、段落标签

<!--段落标签-->
<p>I am Iron Man</p>
<p>I am Bat Man</p>
<p>I am super Man</p>
<p>I am Spider Man</p>

1.3、水平线标签

<!--水平线标签-->
<hr/>

1.4、特殊符号

<!--特殊符号-->
空格:&nbsp;
空&nbsp;&nbsp;&nbsp;&nbsp;格（& n b s p;）
&加字母，可以看其他特殊字符

1.5、粗体、斜体

<!--粗体-->
<strong>Iron Man</strong>
<!--斜体-->
<em>Iron Man</em>

2、图像，超链接

2.1、图像

<img src="../resources/images/black_gold_city.jpg" alt="黑金城市" title="确实帅确实帅" width="2000px" height="1500px">
<!--
src：可以填相对路径（一般情况下），也可以写绝对路径，写绝对路径的话就把链接写死了
../ :返回上一层目录
alt：图像名字，当图像加载不出来时，就显示这个
title:鼠标悬停文字
可以在标签内设置图片的相关信息，高度，宽度等
-->

2.2、超链接

2.2.1、页面间链接

<!--链接标签-->
<a href="MyFirstHTML.html" target="_self">点击跳转到First</a><br/>
<a href="http://www.baidu.com" target="_blank">送你去百度</a><br/>
<a href="https://i.csdn.net/#/user-center/profile?spm=1000.2115.3001.5111">送你去我的博客</a><br/>
<!--点击图片进入链接-->
<a href="https://www.sina.com.cn/"><img src="../resources/images/ice.jpg" width="800px" height="500px">
</a>
<!--
href=""，必须要填，表示要跳转到哪里
target：表示链接在哪里打开_self：表示链接在当前页面打开_blank：表示链接在新的页面中打开
-->

2.2.2、锚链接

在网页的某一处进行标记，然后点击锚链接，即可跳到标记处，还可以跳转到另一个页面的某一处。

<!--锚标记-->
<a name="top">顶部</a>
<!--井号+标记处的name值，即可实现跳跃-->
<a href="#top">回到顶部</a><!--跳转到另一个页面的某一位置-->
MyFirstHTML.html：
<a name="down">底部</a>MySecondHTML。html：
<a href="MyFirstHTML.html#down">跳转到另一个页面的底部</a>

跳转到另一个页面的某一处只需要在另一个页面的某一处标记，然后在跳转链接的时候，加上#锚标记，即可。

2.2.3、功能性链接

<!--邮箱链接：mailto：-->
<a href="mailto:9xxx9xx9x@qq.com">点击联系我</a>
<!--qq链接
qq链接这个就是图片链接，链接跳转到qq网页聊天
1.百度搜索qq推广（https://shang.qq.com）
2.选择推广工具，登录qq
3.复制生成的链接，粘贴到自己的网页上即可
-->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2::53" alt="加我，一刀999999" title="加我，一刀999999"/>
</a>

3、块元素，行内元素

3.1、块元素

块元素会另起一行，无论内容多少，该元素独占一行。

如：p，h1~h6…

3.2、行内元素

左右都是行内被元素的话，可以排在一行，不会因为元素不同而另起一行。

如：a，strong，em…

4、列表

4.1、有序列表

应用范围：试卷，问答，等有顺序的排列。

<!--有序列表ol-->
<ol><li>路飞</li><li>索隆</li><li>乌索普</li><li>娜美</li>
</ol>

4.2、无序列表

应用范围：导航栏，侧边栏，无顺序排列

<!--无序列表ul-->
<ul><li>hello</li><li>shu</li><li>brother</li>
</ul>

4.3、自定义列表

应用范围：链接归类，等，如正常网站底部的内容。

<!--自定义列表dl-->
<dl><!--dt为列表名称--><dt>技术</dt><!--dd为列表选项--><dd>Java</dd><dd>Python</dd><dd>C++</dd><dt>爱好</dt><dd>羽毛球</dd><dd>篮球</dd><dd>摄影</dd>
</dl>

5、表格

table：表格标签

tr：行

td：列

colspan：跨列

rowspan：跨行

<!--表格 行，列，跨行，跨列-->
<table border="5px"><tr><td colspan="2">跨两列</td><td>自己一列</td></tr><tr><td rowspan="2">跨两行</td><td>2222</td><td>2222</td></tr><tr><td>2222</td><td>2222</td></tr>
</table>

6、音频和视频

6.1、音频

audio：音频

controls：显示控件

<audio src="../resources/audio/一个人过冬天.mp3" controls></audio>

6.2、视频

video：视频

controls：显示控件

<video src="../resources/video/Blinding%20Lights.mp4" controls width="1500px"></video>

7、页面结构

用于规范代码

header：网页头部

section：网页主体

footer：网页脚部

article：独立的文章内容

aside：相关内容或者应用（常用于侧边栏）

nav：导航辅助类内容

<header>网页头部内容
</header><section>网页主体内容
</section><footer>网页脚部内容
</footer><article>独立的文章内容
</article><aside>相关内容或者应用（常用于侧边栏）
</aside><nav>导航辅助类内容
</nav>

8、内联框架

iframe：在网页里面再嵌入网页

<iframe src="" name="mainFrame" width="750px" height="750px"></iframe>
<a href="https://blog.csdn.net/Ai_Answer_zr/article/details/119037463" target="mainFrame">点击跳转</a>

这里我在当前网页嵌入了一个空的网页，因为src什么也没写，所以只会出现一个空白，然后当前页面我设置了一个链接，target设置网页打开的目标位置，设置在嵌入的网页上，然后点击当前页面的链接，就会在嵌入的网页上显示链接上的网页。

9、表单

9.1、表单元素

输入的类型type

text：文本框
password：密码框
checkbox：多选框
radio：单选框
submit：提交按钮，提交表单的数据
reset：重置按钮，重置表单的数据
file：文件框，可以上传文件
hidden：把输入框隐藏，提交的时候，对应的数据为空
image：图片按钮，可以提交
button：普通按钮（value可以给按钮赋值）

name：指定表单元素的名称。每个表单元素都应该有一个name，便于后台读取。
value：元素的初始值，type为radio（多选框）时，必须指定一个值。
size：指定表单元素的初始宽度，当type为text或者password时，表单元素大小以字符为单位，对于其他类型，宽度以像素为单位。
maxlength：type为text或者password时，输入的最大字符数。
checkbed：type为radio或者checkbox时，指定按钮是否被选中。

form：表单

method：表单提交的方式。（get和post，最主要的区别是在地址栏能否看到提交的信息，一般用post）

get方式提交：我们可以在url地址栏中看到提交的信息，不安全，但是效率高。
post方式提交：比较安全，可以传输大文件。

action：表单的数据提交的位置。（可以是网站，也可以是请求处理的地址）

<form method="get" action="MySecondHTML.html"><!--设置提交方式为get，数据提交到MySecondHTML.html这个网页-->
</form>

9.2、账号，密码，提交，重置，自定义按钮

<!--文本框-->
<p>用户名：<input type="text" name="username"></p>
<!--密码框-->
<p>密&nbsp;&nbsp;&nbsp;码：<input type="password" name="password"></p>
<!--submit提交，reset重置-->
<p><input type="submit"><input type="reset"><!--button按钮，此时空有一个按钮--><input type="button" name="button" value="不爽点我">
</p>

因为是get方法，所以提交之后，跳转到MySecondHTML.html这个网页上，并且把信息显示在地址栏中。

9.3、单选框，多选框

<!--单选框radio,name表示同一组，单选框name的值必须一样，value为选项的值即表单显示的值，checked默认选中-->
<p>性&nbsp;&nbsp;&nbsp;别：<input type="radio" name="sex" value="boy" checked>男<input type="radio" name="sex" value="girl">女
</p>
<!--多选框，checked默认选中，name和value的意思跟单选框一致，只是现在可以多选了，底层提交的数据是以数组的形式存储-->
<p>爱好：<input type="checkbox" name="interest" value="Java" checked>Java<input type="checkbox" name="interest" value="C++">C++<input type="checkbox" name="interest" value="Python">Python<input type="checkbox" name="interest" value="PHP">PHP
</p>

9.4、下拉框

<!--下拉框select,一个option表示一个选项，selected默认选择-->
<p>国家：<select name="nation"><option value="England">英国</option><option value="China" selected>中国</option><option value="Indian">印度</option></select>
</p>

9.5、文本域，文件域

<!--文本域textarea-->
<p>我有建议<textarea name="textarea" cols="30" rows="5"></textarea>
</p>
<!--文件域，tpye="file"-->
<p><input type="file" name="file">
</p>

9.6、一些元素会有简单的验证

如email，url，数字等等。。

<!--简单的验证，防止格式不正确-->
<p>邮箱：<input type="email" name="email">
</p>
<p>URL：<input type="url" name="url">
</p>
<p>年龄：<!--最大数为110，最小为0，超过这个返回，就验证不通过，step元素会提供一个增加或者减少的按钮，点一次增加减少对应的数--><input type="number" name="number" max="110" min="0" step="1">
</p>

9.7、滑块

<!--滑块,滑块对应的值也可以获取-->
<p>音量<input type="range" name="range">
</p>

9.8、只读，禁用，隐藏

只读：readonly
禁用：disabled
隐藏域：hidden，隐藏了的元素，输入框没有了，但是提交表单数据的时候，数据是有的。可以通过隐藏域设置默认数据，如默认密码。

9.9、表单的初级验证

pleaceholder：提示信息，会在没有输入信息的时候，给出指定提示。

<p>用户名：<input type="text" name="username" placeholder="请输入用户名"></p>

required：非空判断，自动验证输入是否为空，如果为空，提交不了表单。

<p>密码：<input type="password" name="password" required></p>

pattern：传入一个正则表达式，根据正则表达式进行判断。

常用正则表达式：常用的正则表达式

<p>URL：<input type="url" name="url" pattern="[a-zA-z]+://[^\s]*">
</p>