1 HTML5概述
1.1 何为HTML
HTML（HyperText Markup Language）即超文本标记语言，是用来描述网页的一种语言，它不是一种编程语言，而是一种标记语言。
1.2 何为HTML5
HTML5是构建Web内容的一种语言描述方式，HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式，被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。
HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息，HTML5在从前HTML4.01的基础上进行了一定的改进。
2 HTML5使用
2.1 基本结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
2.2 语法规范
- HTML中不区分大小写，但是我们一般都使用小写
- HTML中的注释不能嵌套
- HTML标签必须结构完整，要么成对出现，要么自结束标签
- HTML标签可以嵌套，但是不能交叉嵌套
- HTML标签中的属性必须有值，且值必须加引号(双引号单引号都可以)
2.3 标签规范
单标签：
<标签名 [属性名=属性值,…]>
双标签：
<标签名 [属性名=属性值,…]>内容</标签名>
3 HTML5各种标签
3.1 六种标题标签
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
3.2 图像标签
<img src="图像地址" alt="说明">
3.3 音频标签
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 Audio 标签。
</audio>
3.4 视频标签
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持 Video 标签。
</video>
3.5 段落标签
<p>这是一个段落</p>
3.6 链接标签
<a href="https://www.baidu.com">百度一下！</a>
3.7 列表标签
无序列表：
<ul>
<li>无序列表项</li>
<li>无序列表项</li>
<li>无序列表项</li>
<li>无序列表项</li>
</ul>
有序列表：
<ol>
<li>有序列表项</li>
<li>有序列表项</li>
<li>有序列表项</li>
<li>有序列表项</li>
</ol>
自定义列表：
<dl>
<dt>+</dt><dd>列表项</dd>
<dt>+</dt><dd>列表项</dd>
<dt>+</dt><dd>列表项</dd>
</dl>
3.8 表格标签
<table border="1px" cellpadding="0px" cellspacing="0px">
<tr>
<th>表头一</th>
<th>表头二</th>
<th>表头三</th>
<th>表头四</th>
</tr>
<tr>
<td>单元格一</td>
<td>单元格二</td>
<td>单元格三</td>
<td>单元格四</td>
</tr>
</table>
3.9 分组标签
<div>具体内容</div>
<span>具体内容</span>
3.10 输入标签
<input type="text" />
<input type="number" />
<input type="radio" />男
<input type="checkbox" /> 杨幂
<input type="button" value="点我" />
<input type="submit" />
<!-- input输入标签 -->
3.11 语义标签
常用标签：
<header> 规定文档或节的页眉。
<footer> 定义文档或节的页脚。
<main> 规定文档的主内容。
<section> 定义文档的节。
<article> 定义文档的文章。
<aside> 定义页面内容以外的内容。
<nav> 定义导航链接。
<mark> 定义重要的或强调的文本。
<figure> 规定自包含内容，比如图示、图表、照片、代码清单等。
<figcaption> 定义 <figure> 元素的标题。
<details> 定义用户能够查看或隐藏的额外细节。
<summary> 定义 <details> 元素的可见标题。
<time> 定义日期/时间。
基本布局：
3.13 其它标签
水平线：<hr>
换行：<br>
<b>粗体文本</b>
<code>计算机代码</code>
<em>强调文本</em>
<i>斜体文本</i>
<kbd>键盘输入</kbd>
<pre>预格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong>
<abbr>缩写词或者首字母缩略词</abbr>
<address>联系信息</address>
<bdo>文字方向</bdo>
<blockquote>从另一个源引用的部分</blockquote>
<cite>工作的名称</cite>
<del>删除的文本</del>
<ins>插入的文本</ins>
<sub>下标文本</sub>
<sup>上标文本</sup>
4 学习内容
4.1 起步阶段1
title是网页标题，bgcolor是设置背景颜色。
区分ul标签与ol标签：
ul是无序标签，即开头是一个点**·**，ol是有序标签，即开头是数字。
align表示内容显示位置
img标签
<!DOCTYPE html>
<html lang="aaa">
<head>
<meta charset="utf-8">
<title>曾帅锅写的HTML</title>
</head>
<body bgcolor="aqua">
<a name="top">北京市富婆通讯录</a>
<!-- ul是无序标签(unorder list),align表明内容显示位置 -->
<ul>
<li><h1 align="center">我是1号标题</h1></li>
<li><h2 align="center">我是2号标题</h2></li>
<li><h3 align="center">我是3号标题</h3></li>
</ul>
<!-- ol是有序标签（order list） -->
<ol>
<li><h4 align="center">我是4号标题</h4></li>
<li><h5 align="center">我是5号标题</h5></li>
<li><h6 align="center">我是6号标题</h6></li>
</ol>
<img src="handsome.jpg" height="300px" width="250px" /><br />
<!-- src表明图片路径，height和width表明图片大小，<br/>表示换行 -->
<img src="handsome.jpg" height="300px" width="250px"/><br />
<img src="handsome.jpg" height="300px" width="250px"/><br />
<img src="handsome.jpg" height="300px" width="250px"/><br />
<a href="http://www.baidu.com" target="_blank">点我</a><br />
<!-- a标签-超链接标签，href指定跳转链接,target表明打开链接方式（是否是从新窗口打开链接） -->
<a href="#top">点我回到顶部</a>
<!-- 开头定义了一个top,这里设置了一个锚定，使回到top位置 -->
<input type="text" />
<input type="number" />
<input type="radio" />男
<input type="checkbox" /> 杨幂
<input type="button" value="点我" />
<input type="submit" />
<!-- input输入标签，submit不需设置，默认提交 -->
<br /><br />
</body>
</html>
5 CSS
盒子模型
指的是将HTML中所有元素都看成一个盒子，盒子与盒子之间的距离，包括盒子的边框以及盒子边框和盒子内容的距离都可以设置。
3070
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
