HTML5笔记
1.1标题标签
在HTML中标题总共有六级分别是h1-h6。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标题标签</title>
</head>
<body>
<!-- html提供的6个标题标签 -->
<!-- ctrl+alt+上下箭头 -->
<h1>标题标签(h1)</h1>
<h2>标题标签(h2)</h2>
<h3>标题标签(h3)</h3>
<h4>标题标签(h4)</h4>
<h5>标题标签(h5)</h5>
<h6>标题标签(h6)</h6>
</body>
</html>
1.2段落标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>段落标签</title>
</head>
<body>
<!--段落标签p：在p标签中的的内容是一个整体，两个p标签之间有一个间隔 -->
<!--实体字符： (浏览器解析为空格),<(浏览器解析为小于号)，>(浏览器解析为大于号)，©(版权)
水平线标签：<hr/>
换行标签：<br/>
文本加粗标签：<strong></strong>和<b></b>
倾斜标签：<em></em>和<i></i>
-->
<p> <strong><em>李彦宏</em></strong>（Robin Li），男，汉族，无党派人士，
1968年11月出生，山西阳泉人。
<b>百度创始人、董事长兼首席执行官</b></p>
<hr/>
<p> <em>1991年，李彦宏毕业于北京大学信息管理专业，
随后前往美国布法罗纽约州立大学完成计算机科学硕士学位，</em>先后担任道·琼斯公司高级顾问，
《华尔街日报》网络版实时金融信息系统设计者，Infoseek公司资深工程师。<br />2000年1月，李彦宏创建百度。
并持有“超链分析”技术专利。<br/>曾任第十二届、十三届全国政协委员，
第十一届中华全国工商业联合会副主席，第十二届中国民间商会副会长，第八届北京市科协副主席等职务。</p>
<p> <i>2018年1月19日，李彦宏成为了《时代》当期亚洲版的封面人物。
2018年12月18日，党中央、国务院授予李彦宏改革先锋称号，颁授改革先锋奖章。</i></p>
</body>
</html>
1.3图片标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片标签</title>
</head>
<body>
<!--img图片标签: 单标签
单标签不同于双标签，它设置通常是通过属性，属性通常是放在标签里面的（eg：<img src="xx.jpg" />）
属性名=属性值 eg：id="001" src="fruit.jpg" 等等
src：表示图片的引用，地址要正确，可以是网络地址也可以是本地地址。
注意引用是的路径，同级文件夹的文件可以直接引用。不同级的文件夹需要先用“../”
退到上一级文件夹再找同级文件夹
注意：<img src=""(图片的引用路径) alt=""(图片显示不出的文字提示)
title=""(鼠标放在该图片上时有文字浮动)width=""(图像宽度)，height=""(图像高度)>
图片和图片是可以显示在一行的
-->
<!-- 同级文件夹直接引用 -->
<img src="img/01.jpg" alt="图像显示失败" width="200px"height="100px" title="网页">
<!-- 不同级文件夹先“../”退到图片所在文件夹，再引用 -->
<img src="../beiyongwenjian/img/01.jpg" alt="">
</body>
</html>
1.4页面跳转链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>a页面</title>
</head>
<body>
<h1>这是a页面</h1>
<!-- 从a页面跳转到b页面
href属性：表示跳转后的位置
target属性：表示跳转的目标。
-->
<!-- target="_blank"、表示从自身跳转，也就是对本身页面进行修改， -->
<a href="b.html" target="_blank">跳转到b页面</a>
<!-- target="_self"、从新的页面跳转，不修改本身页面 -->
<a href="b.html" target="_self">跳转到b页面</a>
<!-- 若无target属性则表示从自身跳转 -->
<a href="b.html" >跳转到b页面</a>
<!-- target="_blank" rel="noopener norefrrer"跳转到其他文件夹页面 rel表示其链接页面和该链接页面的关系 -->
<a href="../beiyongwenjian/less1.html" target="_blank" rel="noopener norefrrer">跳转到less1页面</a>
<!-- 跳转到其他的网站，则直接复制粘贴其网站地址 -->
<a href="https://www.jd.com/" target="_blank" rel="noopener norefrrer">跳转到京东页面</a>
</body>
</html>
1.5锚点链接
1.5.1本页页面的锚点链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>锚点链接</title>
</head>
<body>
<!-- 找到锚点链接的位置只需在href的引号中放入其所在位置的id属性名 -->
<a href="#p1">地址一</a><br />
<img src="img/01.jpg"><br />
<img src="img/01.jpg"><br />
<img src="img/01.jpg"><br />
<p id="p1">我在这，你找到我了</p>
<img src="img/01.jpg"><br />
</body>
</html>
1.5.2非本页页面的锚点链接
页面一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>锚点链接</title>
</head>
<body>
<!-- 非本页的锚点链接需要在href的引号中写入需要跳转的地方所在的文件名并写#+跳转位置的id属性名 -->
<a href="5锚点链接2.html#zrb" target="_blank">地址2</a><br />
<img src="img/01.jpg"><br />
</body>
</html>
页面二：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>锚点链接2</title>
</head>
<body>
<img id="zrb"src="img/02.jpg"><br />
</body>
</html>
1.5.3将图片做成超链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片超链接</title>
</head>
<body>
<!-- 若要将图片做成超超链接只需将该图片放在<a href=""></a>标签中 -->
<a href="http://www.nimt.edu.cn/"><img src="img/03.jpg" title="njjd" width="300px" height="300px"></a>
</body>
</html>
1.5.4功能性链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- mailto:直接打开我们的邮箱,也可设置为各种设置-->
<a href="mailto:">联系我们</a>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eJJz95qm-1691726477995)(C:\Users\ZRB\AppData\Roaming\Typora\typora-user-images\image-20230719093733546.png)]
1.6列表的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表的演示</title>
</head>
<body>
<!-- 1.无序列表格式
<ul>
<li>需要排序的内容</li>
...
</ul>
ul、li：块元素（独占一行）。
快速写法：ul>li*n+tab键或回车键，>表示后面的元素是前面元素的子元素，n表示需要的个数。
-->
<ul>
<li>大数据开发</li>
<li>Java面对向开发</li>
<li>web前端开发</li>
</ul>
<!-- 2.有序列表格式
<ol>
<li>需要排序的内容</li>
...
</ol>
ol、li：块元素（独占一行）。
快速写法：ol>li*n+tab键或回车键，>表示后面的元素是前面元素的子元素，n表示需要的个数。
-->
<ol>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ol>
<!-- 3.定义列表格式：
<dl>（外层标签）
<dt></dt>（标题标签）
<dd></dd>（列表项标签）
</dl>
注意：定义列表会出现首行缩进两个字符
快速写法：dl>dt+dd*n+tab键或回车键，>表示后面的元素是前面元素的子元素，+表示两元素为兄弟元素，n表示需要的个数。
-->
<dl>
<dt>水果</dt>
<dd>香蕉</dd>
<dd>苹果</dd>
</dl>
</body>
</html>
1.7表格的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格的演示</title>
</head>
<body>
<div class="one">
<!-- 表格结构稳定。
table标签：表格外层标签容器，告诉浏览器我是一个表格。
tr标签：表格的一行，里面可以放多个td标签。
td标签：表格中一行中的一列元素（单元格），一行中可以有多个td标签。
th标签：表格中和td标签类似，仅用于表格中的标题单元格，有加粗效果。
快捷书写：table>tr*n>td*n+tab(构建n行n列的表格)
-->
<table border="1px">
<!-- 当一个单元格需要占据一行中多个单元格位置时，则需要用到跨列属性colspan，
书写方式为：<th colspan="n">跨列内容</th>或<td colspan="n">跨列内容</td>
例如：<td colspan="3">学生信息表</td>，<th colspan="3">学生信息表</th>表示“学生信息单元格”跨三列
-->
<tr>
<th colspan="4">学生信息表</th>
</tr>
<!-- 当一个单元格需要占据一列中多个单元格位置时，则需要用到跨行属性rowspan，
书写方式为：<th rowspan="n">跨行内容</th>或<td rowspan="n">跨行内容</td>
例如：<td rowspan="3">学生信息表</td>，<th rowspan="3">学生信息表</th>表示“学生信息”单元格跨三行
-->
<tr>
<th rowspan="3">学生信息表</th>
</tr>
<tr>
<th>学生姓名</th>
<th>学生姓名</th>
<th>学生姓名</th>
</tr>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
</table>
</div>
</body>
</html>
1.8媒体元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 不同的浏览器对视频的兼容性不同，会出现某些视频在浏览器上不通用 -->
<video src="video/vedio.mp4" controls>北大青鸟宣传片</video>
<video src="video/vedio.avi" controls>北大青鸟宣传片</video>
<video src="video/video.webm" controls>北大青鸟宣传片</video>
<!-- 为解决在各种浏览器打开某一个视频解决办法 -->
<video controls >
<!-- 第一个视频在谷歌浏览器打不开，自动播放下一个视频 -->
<source src="video/vedio.avi" />
<source src="video/vedio.mp4" />
<source src="video/video.webm" />
</video>
<!-- 音频元素和视频元素类似 -->
<audio controls>
<source src="audio/bam.mp3" />
</audio>
</body>
</html>
1.9语义化标签
header标签：头部标签 nav标签：导航栏 section标签：网页中的一块区域 aside标签：侧边栏 footer标签：底部标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>语义化标签</title>
</head>
<body>
<!-- 语义标签的存在的意义就是在写代码时可以更加直观的看到自己的书写内容 -->
<div>我是div</div>
<header>我是header</header>
<footer>我是footer</footer>
<section>我是section</section>
<article>我是文章</article>
<aside>我是侧边栏</aside>
<nav>我是导航栏</nav>
</body>
</html>
1.10iframe内联框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内联框架</title>
</head>
<body>
<!-- 创建一个内联框架，显示指定的网页内容,显示的网页与用网址访问的网页一样 -->
<iframe src="http://www.taobao.com/" frameborder="0" width="1000px" height="1000px"></iframe>
</body>
</html>
<!-- 通过超链接将跳转内容放在内联框架中 -->
<iframe src="" width="500px" height="500px"name="myFrame"></iframe>
<a href="http://www.taobao.com/" target="myFrame">将淘宝的首页跳转到myFrame内联框架中</a>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EzhVB6Wo-1691726477996)(C:\Users\ZRB\AppData\Roaming\Typora\typora-user-images\image-20230719152949227.png)]
1.11表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单</title>
</head>
<body>
<!-- 表单最外层都要有一个标签form
在form里面有一些表单元素标签如下；
input：（可以是单行文本框、单选按钮、复选框、文件域、密码框等）决定于属性type
type = "text" 单行文本框
type = "radio" 单选按钮
注意：如果想单选按钮只能选一个，需要分组、给他们指定相同的name值
单选按钮默认选中 属性：checked
type = "checkbox" 复选框
type = "file" 文件域
type = "password" 密码框
type = "submit" 提交按钮 value = "按钮上面的提示文字"
type = "reset" 重置按钮 清空表单中的内容
-->
<form action="">
<p>用户名：<input type="text"></p>
<p>密码：<input type="text"></p>
</form>
</body>
</html>
表单元素用表格table布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单</title>
</head>
<body>
<form action="">
<!--
cellpadding标签：表示单元格内边距
border标签：表示单元格边框
cellspacing标签：表示单元格之间的间隙
-->
<table cellpadding="5px"cellspacing="0px">
<tr>
<td align="right">用户名：</td>
<td><input type="text"></td>
</tr>
<tr>
<td align="right">密码：</td>
<td><input type="password"></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="登录">
<input type="submit" value="重置">
</td>
</tr>
</table>
</form>
</body>
</html>
1.11.1表单按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- action表示表单跳转的位置或称目标位置
method:表示表单的提交方式分为get请求和post请求
-->
<form action="2.success.html" method="get">
<div>
<p>用户名：<input type="text" name="" id=""></p>
<p>密码：<input type="password" name="" id=""></p>
<!-- 常见的按钮：
提交按钮：type="submit"可以直接提交表单，将表单提交到action指定的位置。
重置按钮：type="reset" 重置表单内容。
一般按钮：type="button"不可以直接提交表单，需要JavaScript脚本提交指定操作。
图片按钮：type="image" 可以直接提交表单。
-->
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="一般">
<input type="image" src="img/renren.gif" alt="">
</div>
</form>
</body>
</html>
1.12多行文本域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多行文本域</title>
</head>
<body>
<!--多行文本域textarea
cols:列的数量，设置高度
rows:行的数量，设置高度
disabled:禁用（通用表单元素的属性）
-->
<p><textarea name="" id="" cols="30" rows="10">文本内容</textarea></p>
</body>
</html>
1.13文件域
<input type="file" name="files" id="">
1.14邮箱和网址
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>邮箱网址</title>
</head>
<body>
<form action="2.success.html" method="get">
<!-- 邮箱网址是html5新出的特殊表单元素，用于对邮箱和url网址的格式进行验证 -->
<p>邮箱：<input type="email" name="myemail" id=""></p>
<p>地址：<input type="url" name="myurl" id=""></p>
<p><input type="submit" value="提交"></p>
</form>
</body>
</html>
1.15数字
<p>数字：<input type="number" name="" id="" max="5" min="-5"></p>
1.16滑块
<!-- 滑块 step:步长，表示每次加几，eg：step="2"表示每次加2，但是3、5、7这些取不到-->
<p>滑块:<input type="range" name="" id="" max="1000" min="0" step="2"></p>
1.17搜索框
<!-- 搜索框：输入文本之后右边会出现×形按钮，点击可以清空搜索框内容 -->
<p>搜索框:<input type="search" name="" id=""></p>
对于单行文本：type=“text”、type=“password”、type=“email”、type="url"都可以使用maxlength属性设置最大啊文本宽度
1.18下拉菜单
<select name="" id="">
<option value="0">日期</option>
<option value="21">21</option>
<option selected value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
</select>
格式为:选择内容下拉菜单默认设置：默认内容
1.19表单的高级应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="2.success.html" method="get">
<!-- 隐藏域 type="hidden" -->
<p><input type="hidden" value="666" name="userid"></p>
<!-- 只读：readonly
input表单元素 里面value属性设置表单的值
-->
<p>id：<input type="text" name="userid" readonly value="666"></p>
<!-- 禁用：disabled
对于属性名和属性值相同的属性，可以简写成属性名就行了
-->
<p><input type="submit" disabled value="666"></p>
<!-- 表单的标注：
增强鼠标的可用性，自动将焦点转移到表单元素上。
1.用lable标签指向光标的聚焦位置
2.给需要的表单添加id值用来作为唯一标识
3.单选按钮和复选框与其类似
-->
<p><label for="username">用户名:</label><input id="username" type="text" name="user"/></p>
<!-- 利用表单标注选中单选按钮/复选框 -->
<p>
<input checked type="radio" name="1" id="qinhuai"><label for="qinhuai">秦淮区</label>
<input type="radio" name="1" id="gulou"><label for="gulou">鼓楼区</label>
<input type="radio" name="1" id="gaochun"><label for="gaochun">高淳区</label>
</p>
<!-- 利用表单标注选中复选框 -->
<p>
<input type="checkbox" name="" id="sanyi"><label for="sanyi">三一</label>
</p>
</form>
</body>
</html>
1.19.1表单占位符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标点占位符</title>
</head>
<body>
<!-- placeholder：占位符、起到提示作用、不会改变文本内容
适用于input单行文本框：text、password、Email、url
-->
<p>用户名:<input type="text" name="user" id="user" placeholder="请输入用户名/手机号"></p>
<p>电子邮箱：<input type="email" name="email" id="email" placeholder="163@.com"></p>
</body>
</html>
1.19.2表单非空验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标点占位符</title>
</head>
<body>
<form action="2.success.html">
<!-- 非空验证：required属性，当文本框没有填写任何值时会被验证、如果验证不通过则不能发送表单 -->
<p>用户名:<input type="text" name="user" id="user" placeholder="请输入用户名/手机号" required></p>
<p><input type="submit" value="提交"></p>
</form>
</body>
</html>
1.19.3按指定方案验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标点占位符</title>
</head>
<body>
<form action="2.success.html" method="get">
<!-- 按照指定方式验证：
pattern：正则表达式
1.例如验证手机号
注意：验证时首先保证非空，pattern验证才会生效
正则表达式规则：
[]表示从里面选取一个
{}表示前面的字符出现的次数
\d表示0~9之间的阿拉伯数字
-->
<p>用户名:<input type="text" name="user" id="user" placeholder="请输入用户名/手机号" required></p>
<p>手机号:<input type="text" name="tel" id="tel" required pattern="^1[35789]\d{9}" ></p>
<p><input type="submit" value="提交"></p>
</form>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fKPUCyUA-1691726477997)(C:\Users\ZRB\AppData\Roaming\Typora\typora-user-images\image-20230720170545353.png)]
iewport" content=“width=device-width, initial-scale=1.0”>
用户名:
手机号:
```[外链图片转存中…(img-fKPUCyUA-1691726477997)]
扫一扫
9045
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
