本文详细介绍了HTML5的基本概念、优势、W3C标准，以及常用的HTML编辑器。通过实例展示了HTML5的网页基本信息，包括标题、段落、图像、超链接、列表、表格、音频和视频等元素的使用。此外，还涵盖了表单、内联框架（iframe）和页面结构等内容，是初学者全面了解和学习HTML5的实用资料。
HTML学习笔记
什么是HTML
- HTML 英文缩写(Hyper Text Markup Language)，是一种用于创建网页的标准标记语言。又称为超文本标记语言，超文本包括：文字、图片、音频、视频、动画等。
- HTML5是万维网联盟（W3C）和网络超文本应用技术工作组（ WHATWG）合作输出的。
- HTML5是最新的HTML标准，它的主要目标是提供所有内容，而不需要任何Flash、 SilverLight等的额外插件，这些内容来自动画、视频、富GUI等
- 几乎所有的浏览器（如 Safari、 Chrome、 Firefox、 Opera、IE）都支持HTML5
HTML的优势
- 各大浏览器兼容
- 市场需求
- 跨平台
- 结构简单
W3C标准
- W3C(Word Wide Web Consortium)，称为万维网联盟，成立于1994年，是Webj技术领域最权威和最具影响力的国际中立性技术标准机构。
- W3C标准包括
- 结构化标准语言（HTML、XML）
- 表现标准语言（CSS）
- 行为标准（DOM、ECMAScript）
常用的HTML编辑器
-
记事本
-
PHPStorm
-
Dreamweaver
-
IDEA……
网页基本信息
-
浏览器默认HTML5
-
所有的网页内容必须写在html标签
-
HTML5文档类型是<！doctype html>。
-
HTML5使用的字符集< meta charset=“UTF8”>
-
< meta >标签用于描述该网页的一些信息，通常用来做SEO(搜索引擎优化)，例如
<!--keywords网站关键词描述，content内容就是搜索网站时的关键字--> <meta name="keywords" content="兔小阳的网页"> <!--descript网站的信息描述--> <meta name="descript" content="这是用来自学的网页"> -
如下图：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dERHahg9-1625914709808)(C:\Users\huawei\AppData\Roaming\Typora\typora-user-images\image-20210708221913426.png)]
HTML注释
<!-- 注释内容 -->
<!--
注释内容1
注释内容2
-->
网页的基本标签
<!--标题标签-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!--段落标签-->
<p>《锄禾》</p>
<p> 唐·李绅</p>
<p> 锄禾日当午，汗滴禾下土。</p>
<p>谁知盘中餐，粒粒皆辛苦。</p>
<!--粗体/斜体标签-->
<p>这是<strong>加粗的文字</strong></p>
<p>这是<em>倾斜的文字</em></p>
<!--换行标签-->
<br/>
<!--水平线标签-->
<hr/>
<!--特殊符合-->
//空格
©//版权符号
>//大于符合
<//小于符合
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6TL2l4Ch-1625914709812)(C:\Users\huawei\AppData\Roaming\Typora\typora-user-images\image-20210708224724527.png)]
图片标签
<img src="../image/01.png" alt="头像" title="头像显示" width="100px" height="100px">
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hvt9fNAn-1625914709814)(C:\Users\huawei\AppData\Roaming\Typora\typora-user-images\image-20210708230046858.png)]
超链接标签
<!--文字超链接-->
<!--_blank属性表示打开一个新页面，不会在当前页面打开-->
<a href="https://www.baidu.com/" target="_blank">点击跳转到百度页面</a>
<!--图片超链接-->
<!--_self属性表示在当前页面打开一个新网页-->
<a href="#" target="_self"><img src="../image/01.png" alt="头像" title="头像显示" width="100px" height="100px"></a>
<!--锚链接-->
<!--
1.需要一个锚标记，可以是name值,也可以是id值
2.跳到锚标记位置
-->
<a href="#top">回到顶部</a> //跳转到name值为head的标签页面位置
<a href="index.html#bottom">回到底部</a> //跳转到index网页内name值为bottom的标签的位置
列表标签
<!--有序列表,应用范围：试题、问答...-->
<ol>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ol>
<!--无序列表,应用范围：导航、侧边栏...-->
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
<!--自定义列表,应用范围:公司网站底部...-->
<!--
dl:标签
dt:列表标题
dd:列表内容
-->
<dl>
<dt>列表标题</dt>
<dd>列表内容1</dd>
<dd>列表内容2</dd>
</dl>
表格
<!--表格-->
<!--
表格:table
行:tr
列:td
跨列:colspan
跨行:rowspan
-->
<table border="1px">
<tr>
<td colspan="3" align="center">表格标题</td>
</tr>
<tr>
<td rowspan="2">侧边表格</td>
<td>1-1</td>
<td>1-2</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
</tr>
</table>
音频和视频
<!--视频/音频
src:路径
controls:控制条
autoplay:自动播放
-->
<video src="../public/video/视频.mp4" controls autoplay></video>
<audio src="../public/audio/稻香.mp3" controls autoplay></audio>
行内元素和块元素
**行内元素:**单独占一行的元素，例如(p、h1-h6、div…)
**块元素:**可以并排在同一行里的元素，不会单独占一行，例如(a，strong，em…)
页面结构
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ioxhw9am-1625914709817)(C:\Users\huawei\AppData\Roaming\Typora\typora-user-images\image-20210708235535964.png)]
iframe内联框架
<!--内联框架-->
<!--
frameborder:边框
scrolling:滚动条
allowfullscreen:是否允许铺满屏幕
-->
<iframe src="https://www.baidu.com/" frameborder="0" scrolling="true" width="100%" height="500px" allowfullscreen></iframe>
<!--将跳转的页面显示到内联框架里-->
<iframe src="" name="baidu" frameborder="0" scrolling="true" height="200px" width="100%"></iframe>
<a href="https://www.baidu.com/" target="baidu">跳转到内嵌式百度</a>
表单
<!--表单-->
<!--
action:表单提交的位置，可以是网页，也可以是一个请求处理地址，例如控制器...
method:提交方式，有get、post两种提交方式
get:url中可以看见提交信息，提交方式不安全，不高效
post:url中不可以看见提交信息，提交方式比较安全
get请求在URL中传送的参数是有长度限制的，而post没有限制
disabled:禁用
readonly:只读
每个input都要有一个name名称，数据才会以键值对方式提交到请求
-->
<!--表单的初级验证：
required:不能为空
pattern:正则表达式验证
-->
<h1>注册</h1>
<form action="#" method="post">
<!--输入框-->
<!--
value:初始值
maxlength:最大长度
size:文本框宽度
placeholder:提示信息
-->
<p>名称: <input type="text" name="username" maxlength="20" size="30" placeholder="请输入用户名"></p>
<!--密码框-->
<p>密码: <input type="password" name="password" maxlength="12" size="30" placeholder="请输入密码"> </p>
<p>电话: <input type="text" name="phone" maxlength="11" size="30" placeholder="请输入电话"></p>
<p>邮箱: <input type="email" name="email" size="30"></p>
<!--单选按钮-->
<!--
value:按钮值
checked:选中
name:表示同一组,当多个单选按钮的name名相同时只能同时选中一个按钮
-->
<p>性别:
<input type="radio" name="sex" value="boy" checked>男
<input type="radio" name="sex" value="girl">女
</p>
<!--多选框-->
<p>爱好:
<input type="checkbox" value="game" name="hobby">游戏
<input type="checkbox" value="music" name="hobby">音乐
<input type="checkbox" value="movie" name="hobby">电影
</p>
<!--下拉框-->
<p>国家:
<select name="country">
<option value="ch" selected>中国</option>
<option value="An">美国</option>
<option value="hg">韩国</option>
</select>
</p>
<!--文本域(cols:列，rows:行)-->
<p>备注: <textarea name="beizhu" cols="10" rows="5"></textarea></p>
<!--文件域-->
<p>头像: <input type="file" name="file"></p>
<!--网址-->
<p>网址: <input type="url" name="url"></p>
<!--日期-->
<p>出生日期: <input type="date" name="data"></p>
<!--数量-->
<p>数量: <input type="number" max="100" min="0" step="1" value="1" name="number"></p>
<!--滑块-->
<p>滑块: <input type="range" max="10" min="0" name="range"></p>
<!--搜索框-->
<p>搜索: <input type="search" name="search"></p>
<!--增强鼠标可用性-->
<p>
<label for="mark">点击文字进入文本框: </label>
<input type="text" id="mark">
</p>
<!--按钮-->
<!--
button:普通按钮
submit:提交按钮
reset: 重置按钮
image: 图片按钮
-->
<p><input type="submit" value="提交"><input type="reset" value="重置"></p>
</form>
</p>
<!--增强鼠标可用性-->
<p>
<label for="mark">点击文字进入文本框: </label>
<input type="text" id="mark">
</p>
<!--按钮-->
<!--
button:普通按钮
submit:提交按钮
reset: 重置按钮
image: 图片按钮
-->
<p><input type="submit" value="提交"><input type="reset" value="重置"></p>
</form>
扫一扫
9024
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
