HTML总结
什么是HTML？
- HTML：Hyper Text Markup Lauguage（超文本标记语言），HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。
HTML元素
- 开始标签（Opening tag）：包含元素的名称（本例为 p），被左、右角括号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
- 结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。
- 内容（Content）：元素的内容，本例中就是所输入的文本本身。
- 元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。
HTML文档
<!DOCTYPE html>: 声明文档类型。出于历史原因需要，现在可有可无。<html></html>: <html>元素。这个元素包裹了整个完整的页面，是一个根元素，其它元素都嵌套到其中。<head></head>: <head>元素。 这个元素是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。<meta charset="utf-8">: 这个元素设置文档使用utf-8字符集编码，utf-8字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容。毫无疑问要使用它，并且它能在以后避免很多其他问题。<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">: 指定页面的图标，出现在浏览器标签上。(试一试：你可随意下载一个.ico图标文件到工作目录中)<title></title>: 设置页面标题，出现在浏览器标签上，当你标记/收藏页面时它可用来描述页面。<body></body>: 元素。 包含你能在页面看到的所有内容，包括文本，图片，音频，游戏等等。
HTML注释
需要将其用特殊的记号
<!--和-->包括起来
<p>我在注释外，可以显示！</p>
<!-- <p>我在注释内！浏览器将忽略我</p> -->
HTML标签元素
- 网页基本信息
<!-- DOCTYPE：告诉浏览器，我们需要用什么规范 -->
<!DOCTYPE html>
<html lang="en">
<!--head头部标签 -->
<head>
<!-- meta标签一般用来描述网站信息 -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- title标签用来表示网页标题 -->
<title>我的第一个网页</title>
</head>
<!--body主体标签 -->
<body>
Hello，world！
</body>
</html>
- 图像标签（img）
<!--
img标签：
属性：
src：图片地址，文件目录
./为当前文件夹，默认当前文件夹
../为上级目录
alt:图片加载不成功显示提示信息
title：鼠标悬停显示文字
-->
<img src="../images/again.png" alt="again" title="重新开始">
- 超链接标签（a)
<!--
a超链接标签
属性：
href：要跳转的页面网站
target: _blank:在新的页面打开
_self：在当前页面打开
mailto：QQ链接
-->
<a href="https://www.baidu.com" name="top" target="_blank">百度一下</a>
<a href="https://www.baidu.com">
<img src="../images/again.png" alt="again" title="重新开始">
</a>
<!--
锚链接
需要一个锚标记，用a标签的name属性标记
跳转需要用#+name属性
-->
<a href="#top">回顶部</a>
<!--
块元素：内容总是独占一行
行内标签：可以多个元素在一行
-->
- 列表（有序，无序，定义）
<!-- 有序列表 -->
<ol>
<li>Java</li>
<li>Python</li>
<li>C++</li>
</ol>
<hr>
<!-- 无序列表 -->
<ul>
<li>Java</li>
<li>Python</li>
<li>C++</li>
</ul>
<!-- 定义列表 -->
<dl>
<dt>语言</dt>
<dd>Java</dd>
<dd>Python</dd>
<dd>C++</dd>
</dl>
- 表格标签（table）
<!--
表格标签
属性：
tr：行
td：列
border:边框
cellspace:属性值为0就是将单元个之间的竖线合并
-->
<table border="1px" cellspacing="0">
<tr>
<!-- colspan 跨列 -->
<td colspan="4">1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<!-- rowspan 跨行 -->
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
</table>
- 媒体元素（audio&&vadio）
<!--
vadio 视屏标签
src：视频地址
controls：控制播放
autoplay：自动播放
loop:循环播放
-->
<vadio src="" controls autoplay loop></vadio>
<audio src=""></audio>
- 页面结构分析
<header><h1>页面头部标签</h1></header>
<footer>页面脚步标签</footer>
<section>页面中的独立区域</section>
<article>独立文章内容</article>
<aside>相关内容及应用</aside>
<nav>导航类辅助内容</nav>
- iframe框架
<!--
iframe框架标签
属性：
src：路径
name：框架标识
frameborder:内联框架的边框
-->
<iframe src="https://www.baidu.com" name="" height="300px" width="300px" frameborder="0"></ifram>
- 表单标签（form）
<!--
表单标签
属性：
action:表单提交的位置，可以是网站，也可以是一个请求处理的位置
method:
post:url中看不到，在控制台中可以看到，比较安全，可以传输大文件
get:我们可以在url中看到我们提交的信息，不安全，高效
-->
<h1>注册</h1>
<form action="1.网页基本信息.html" method="post">
<p>名字：<input type="text" name="username"></p>
<p>密码：<input type="password" name="password"></p>
<p><input type="submit" name="sub" value="提交">
<input type="reset" value="清空">
</p>
</form>
- 文本框和单选框（input，select，textarea）
<!--
input 标签：
属性：
type：指定元素类型，text，文本框
password，密码框
radio，单选框，这个时候name相同的就是单选的
checkbox,多选框，这个时候name相同的就是同一个多选框
submit,提交按钮
reset,清空按钮
file,文件域
hidden,隐藏域，将输入的东西隐藏
image, 图像按钮
button,按钮标签 也是name表示标签名，value设置显示内容
name:指定元素名字
vale：指定元素初值
maxlength:表示输入的最大长度
size：文本框长度
cheched：指定元素是否被选中
disabled：禁止选用
readonly：只能读
placeholder:文本框提示内容
required:非空提示
pattern:正则表达式
-->
<h1>注册</h1>
<form action="1.网页基本信息.html" method="get">
<p>名字：<input type="text" name="username" placeholder="用户名" required></p>
<p>密码：<input type="password" name="password" pattern=""></p>
<br><br>
<p>性别：<input type="radio" value="boy" name="sex">男
<input type="radio" value="girl" name="sex">女
</p>
<br><br>
<p>
爱好：<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="qiao" name="hobby" checked>敲代码
<input type="checkbox" value="play" name="hobby">打游戏
<input type="checkbox" value="gril" name="hobby">女
</p>
<br><br>
<!--
select下拉框
属性：
name,下拉框名字
-->
<!--
option标签，select的子标签
-->
<p>国家：
<select name="list">
<option value="li" selected>中国</option>
<option value="li">美国</option>
<option value="li">英国</option>
</select>
</p>
<br><br>
<!--
文本域
name，cols，rows
-->
<p>反馈：
<textarea name="text" cols="50" rows="10">文本内容....</textarea>
</p>
<br><br>
<!-- 文件域 -->
<p>
选择文件：
<input name="files" type="file">
<input type="button" value="上传" name="upload">
</p>
<br><br>
<!--
验证
通过type指定验证类型
email，url，number
可以指定：max，min，step
-->
<p>
邮箱：
<input type="email" name="email">
<br>
数字：<input type="number">
<br>
滑块：<input type="range">
</p>
<br><br>
<!-- 搜索框 -->
搜索：<input type="search">
<br><br>
<!-- 增强鼠标可用性 -->
<label for="mark">点我：</label>
<input type="txet" id="mark">
<p><input type="submit" name="sub" value="提交">
<input type="reset" value="清空">
</p>
</form>
总结
HTML的学习，主要是学习各个标签的作用以及网页的页面结构设计，各个标签要清楚标签的作用，同样，清楚美哥标签的属性值和属性值代表什么意思，也是很重要的，但是这个我们需要通过练习，慢慢记住，而不是需要死记硬背。
673
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
