提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
一、html是什么？
html 超文本标记语言，是一种用于创建网页的标准标记语言。
用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
HTML文档（web 页面）包含了HTML 标签及文本内容。
二、页面架构
注：对于中文网页需要使用<meta charset="utf-8">声明编码，否则会出现乱码。
有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则需要设置为 <meta charset="gbk">。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网页标题</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
解析：
<!DOCTYPE html>声明为 HTML5 文档<html>元素是 HTML 页面的根元素<head>元素包含了文档的元（meta）数据，如<meta charset="utf-8">定义网页编码格式为 utf-8<title>元素描述了文档的标题<body>元素包含了可见的页面内容<h1>元素定义一个大标题<p>元素定义一个段落
注：在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签。
三、html 标签
1、双标签
格式：<标签名 属性1=“值1” 属性2=“值2” … >内容</标签名>
2、单标签
格式：<标签名 属性1=“值1” 属性2=“值2” … />
3、meta标签
<meta>元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
<!--设置网站关键字-->
<meta name="keywords" content="网络安全，WEB渗透，数据安全，渗透测试，安全培训" />
4、注释
<!--这是一段注释，对代码的解释说明，注释不会在浏览器中显示。-->
ctrl+/
5、排版标签
1、标题标签<h1>
//由大到小
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
2、段落标签<p>
<p>这是一个段落</p>
3、换行标签<br>
换行<br>标签
4、换行线标签<hr>
<hr>这是换行线标签
6、文本格式化标签
<strong>加粗</strong>
<b>加粗</b>
<em>斜体</em>
<i>斜体</i>
<ins>下划线</ins>
<u>下划线</u>
<sup>上标</sup>
<sub>下标</sub>
<del>删除线</del>
<s>删除线</s>
规定字体属性<font></font>
- size 字体大小
- color 字体颜色
注：HTML5 不支持标签。请用 CSS 代替，使用 CSS 来定义文本的字体、尺寸、颜色。
<font size="20px" color="blue" >更改字体大小和颜色</font>
7、<link> 标签定义文档与外部资源的关系
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>
- href：通常都是引入一个url值，用来定义被链接文档的位置
- hreflang：定义被链接文档中文本的语言。
- media：规定被链接文档将显示在什么设备上。
- type：规定被链接文档的 MIME 类型。
- rel：必需。定义当前文档与被链接文档之间的关系。rel 是 relationship的英文缩写。它的值通常有以下几种``
alternate 文档的替代版本（比如打印页、翻译或镜像）。
stylesheet 文档的外部样式表。
start 集合中的第一个文档。
next 集合中的下一个文档。
prev 集合中的上一个文档。
contents 文档的目录。
index 文档的索引。
icon 导入表示文档的图标。
glossary 在文档中使用的词汇的术语表（解释）。
copyright 包含版权信息的文档。
chapter 文档的章。
section 文档的节。
subsection 文档的小节。
appendix 文档的附录。
help 帮助文档。
bookmark 相关文档。
8、<script> 标签
script 标签用于定义客户端脚本，比如 JavaScript。
script 标签既可包含脚本语句，也可以通过 “src” 属性指向外部脚本文件。
<script>
document.write("Hello World!")
</script>
<script src="script.js"></script>
四、表单标签
用于收集用户的输入信息。
表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。
包含各种输入字段、复选框、单选按钮、下拉列表等元素。
1、<form>创建表单
- action：必需的 action 属性规定当提交表单时，向何处发送表单数据。
- method：规定如何发送表单数据（表单数据发送到 action 属性所规定的页面）。get post
- enctype ：规定在发送表单数据之前如何对其进行编码。
<form action="demo_form.php" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="提交">
</form>
2、<input>输入标签
-
type ：显示元素的类型
-
placeholder：占位符，提示用户输入内容的文本 （type=text/type=password）
-
name：分组，有相同name属性值的单选框为一组，一组中同时只能有一个被选中 （type=radio）
-
checked：默认选中 （type=redio/type=checkbox）
-
value： 指定
<input>元素value的值 -
size：输入框的长度大小
-
maxlength：输入框中允许输入字符的最大数
-
value：输入框中的默认值
-
readonly：表示该框中只能显示，不能添加修改
type的属性值：
text 文本框
password 密码输入框
radio 单选框
checkbox 多选框
file 文件上传
hidden 隐藏域
button 按钮 （默认无功能，搭配js添加功能）
submit 提交按钮
reset 重置按钮
<form>
账号：<input type="text" value="admin" size="12" name="123"><br>
密码：<input type="password" size="12" maxlength="8"><br>
文件：<input type="file"><br>
按钮：<input type="button" value="点击"><br>
爱好：打篮球<input type="checkbox"> 打台球<input type="checkbox"><br>
性别：男<input type="radio" name="性别">女<input type="radio" name="性别"><br>
<input type="submit" value="提交"><br>
<input type="reset" value="重置">
</form>
3、<label>标签
为 input 元素定义标注（标记）
- for id 规定 label 绑定到哪个表单元素
- form formid 规定 label 字段所属的一个或多个表单
<label for="email">邮箱:</label>
<input type="text" name="email" id="email"/> <br>
给input加上id标签,给label的for标签传入id值。
点击字符邮箱,光标就会自动切换到输入框中。
五、链接<a>
-
href：跳转地址 （不知跳转地址时，值写为# (空连接)）
-
target：目标网页的打开形式。值：_self（默认值，在当前窗口中跳转，覆盖原网页）；_blank（在新窗口中跳转，保留原网页）
<a href="http://www.baidu.com">百度</a>
六、锚文本
<a id="top">底部链接可以直接跳到这儿</a>
<a herf="#top">回到顶部</a>
七、媒体标签
1、图片标签 <img>
-
src：在页面上显示图像。src 指 “source”，源属性的值是图像的 URL 地址。
-
alt ：用来为图像定义一串预备的可替换的文本。（图片加载失败时显示）
-
title：提示文本，当鼠标悬停时显示
-
width、height：宽度、高度。如果只设置width或height中的一个，另一个没设置的会自动等比例缩放(此时图片不会变形)；如果同时设置了width和height两个，若设置不当此时图片可能会变形。
<img src="url" alt="替换文本" title="提示文本" width="宽度" height="高度">
2、音频标签 <audio>
-
src：音频路径
-
controls：显示播放的插件
-
autoplay：自动播放(部分浏览器不支持)
-
loop：循环播放
<audio src="./music.mp3" controls></audio>
3、视频标签 <video>
-
src：音频路径
-
controls：显示播放的插件
-
autoplay：自动播放(谷歌浏览器中需配合muted实现静音播放)
-
loop：循环播放
<video src="./video.mp4" controls></video>
八、列表标签
1、无序列表
<ul>
<li></li>
</ul>
//标签组成：
//ul ：表示无须列表的整体，用于包裹li标签 （只允许包含li标签）
//li ：表示无序列表的每一项，用于包含每一行的内容 （可以包含任意内容）
2、有序列表
<ol>
<li></li>
</ol>
//标签组成：
//ol 表示有须列表的整体，用于包裹li标签 （只允许包含li标签）
//li 表示有序列表的每一项，用于包含每一行的内容 （可以包含任意内容）
3、自定义列表
<dl>
<dt>主题</dt>
<dd>内容</dd>
</dl>
//标签组成：
//dl 表示自定义列表的整体，用于包裹dt/dd标签 （只允许包含dt/dd标签）
//dt 表示自定义列表的主题
//dd 表示自定义列表的针对主题的每一项内容 （会默认显示缩进效果）
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
