HTML技术梳理
HTML 简介
什么是HTML？
HTML 是用来描述页面的语言
- HTML 指的是超文本标记语言——(是一套标记标签)
- HTML 不是一种编程语言而是一种标记语言
- HTML 使用标记标签来描述页面
HTML 标签
HTML 标记标签被称为 HTML 标签
- HTML 标签是由尖括号包围的关键词，比如
- HTML 标签通常是成对出现的，比如 和
- 标签对中的第一个标签是开始标签，第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
认识一下简单的HTML 文档
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>Document</title>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
HTML 基础标签
HTML 元素
HTML 文档是由 HTML 元素定义的。
HTML 元素指的是从 开始标签 到 结束标签 的所有代码。
| 开始标签 | 元素内容 | 结束标签 |
|---|---|---|
| < p > | 这是一个段落 | < /p > |
| < a href="#" > | 这是一个超链接 | < /a > |
| < br / > |
HTML 属性
属性为 HTML 元素提供附加信息。
属性示例 1 ：
HTML 链接由< a >标签定义，链接的地址在 href 属性中指定：
// href="www.baidu.com"为属性
<a href="www.baidu.com">百度</a>
属性示例 2 ：
HTML 标题由< h1 >标签定义，使得标题在页面居中
<h1 align="center">居中排列标题</h1>
属性示例 3 ：
HTML 标题由< body >标签定义，页面的背景颜色
<body bgcolor="blue">页面的颜色为蓝色</body>
适合于绝大多数的HTML元素的属性：
| 属性 | 值 | 描述 |
|---|---|---|
| class | classname | 规定元素的类名 |
| id | 定义一个id | 规定元素的唯一 id |
| style | css代码 | 规定元素的行内样式 |
| title | 值 | 规定元素的额外信息 |
常用标签大全
1. HTML 标题
标题是通过 < h1 > - < h6 > 等标签进行定义的。
< h1 > 定义最大的标题
< h6 > 定义最小的标题。
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
2. HTML 段落
段落是通过 < p > 标签定义的。
// 段落 独占一行 是块级元素
<p>这是一个段落，可以写好多内容</p>
3. HTML 格式化
定义很多供格式化输出的元素，比如粗体和斜体字。
// 缩写 和 首字母缩写 鼠标移至缩略词语上时展示完整语句
<abbr title="Chinese">chi.</abbr>
<dfn title="World Wide Web">WWW</dfn>
| 双标签 | 描述 | 字体效果描述 |
|---|---|---|
| < b > | 定义粗体文本 | |
| < strong > | 定义加重语气 | 效果和加粗差不多 |
| < big > | 定义大号字 | 比一般的大一些 |
| < small > | 定义小号字 | 比一般的小一些 |
| < i > | 定义斜体字 | |
| < em > | 定义着重文字 | 倾斜一点 没有 i 的斜度 |
| < sub > | 定义下标字 | 字体大小一半 位置在下方 |
| < sup > | 定义上标字 | 字体大小一半 位置在上方 |
| < ins > | 定义插入字 | 字体有下划线 |
| < del > | 定义删除字 | 字体中间有删除线 |
| < pre > | 定义预格式文本 | 标签内写的代码，只会显示纯文本 |
| < abbr > | 定义缩写 | 代码块有解释 |
| < dfn >或< acronym > | 定义首字母缩写 | 代码块有解释 |
| < address > | 定义地址 | 标签内部专门写地址内容 |
| < bdo > | 定义文字方向 | 标签内容，编译后会倒着显示 |
| < q > | 定义短的引用 | 引用其他网址的内容 |
| < blockquote > | 定义长的引用 | 有一属性值 cite=‘网址’ |
| < cite > | 定义著作的标题 | 以斜体显示元素内容 |
4. HTML CSS
如何使用样式
在HTML文档中会使用CSS代码
- 外部样式表
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
- 内部样式表
<head>
<style>
p {margin-left: 20px}
</style>
</head>
- 行内样式
<p style="color: red; margin-left: 20px">
这是一个段落
</p>
- HTML 链接
点击链接可以从一张页面跳转到另一张页面
链接语法 ：
// href 属性描述了链接的目标
<a href="url">链接名称</a>
target属性 ：
// target 属性设置为 "_blank", 链接将在新窗口打开
<a href="https://www.baidu.com/" target="_blank">访问百度!</a>
命名锚的语法 ：
// 点击链接可以跳转显示div id=3的内容
<a href="#3"></a>
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
- HTML 图片
插入图片和 src属性：
// url 指存储图像的位置
<img src="url">
Alt属性 ：
// alt浏览器无法载入图像时，Alt属性显示字体
<img src="01.gif" alt="夜景">
7. 表格
如何在HTML创建表格
| 标签 | 描述 |
|---|---|
| < table > | 定义表格 |
| < thead > < tbody > < tfoot > | 划分表格区域 |
| < th > | 定义表格的表头 |
| < tr > | 定义表格的行 |
| < td > | 定义表格单元 |
| < caption > | 定义表格标题 |
| < colgroup > | 定义表格列的组 |
| < col > | 定义用于表格列的属性 |
| colspan=“2” | 单元格跨两列合并 |
| rowspan=“2” | 单元格跨两行合并 |
| cellspacing=”1“ | 单元格和单元格之间的距离 |
| cellpadding=”2“ | 单元格内容和单元格边框之间的距离 |
| border-collapse: collapse | 单元格边框重叠的部分去除 |
// 上述示例
var foo = 'bar';
8. HTML 列表
HTML 支持有序、无序和定义列表
- 无序列表
// 每列前面有小黑圈
<ul>
<li>苹果</li>
<li>香蕉</li>
</ul>
- 有序列表
// 每列前面为数字 1 2 3
<ol>
<li>苹果</li>
<li>香蕉</li>
</ol>
- 定义列表
<dl>
<dt>苹果</dt>
<dd>它是红色的</dd>
<dt>香蕉</dt>
<dd>它是黄色的</dd>
</dl>
9. HTML 块
块级元素在浏览器显示时，通常会以新行来开始（和结束）
例子：< h1 >, < p >, < ul >, < table >
内联元素在显示时通常不会以新行开始
实例: < b >, < td >, < a >, < img >
HTML < div > 块级元素
HTML < span > 内联元素
10. HTML 表单
HTML 表单用于搜集不同类型的用户输入
| 双标签/ type值 | 描述 | 属性 |
|---|---|---|
| < from > | 表单域 | |
| < input > | 创建表单 | type=” “ |
| submit | 提交 | |
| reset | 重置 | |
| radio | 单选框 | |
| checkbox | 多选框 | |
| button | ||
| text | 文本框 | |
| < select > | 定义下拉表单 | |
| < option > | 下拉表单中的选项 | |
| < textarea > | 文本域 |
11. Iframe 内联框架
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面
iframe语法：
// frameborder 属性用于定义iframe表示是否显示边框
<iframe
src="demo_iframe.htm"
width="200"
height="200"
frameborder="0"></iframe>
11. HTML 字符实体
在 HTML 中不能使用小于号（<）和大于号（>）等，这是因为浏览器会误认为它们是标签。
用实体字符来代替各种符号
| 显示结果 | 描述 | 实体名称 |
|---|---|---|
| 空格 |   ; | |
| < | 小于号 | < ; |
| > | 大于号 | > ; |
| & | 和号 | & ; |
| " | 引号 | " ; |
| ’ | 单引号 | &apos ; (IE不支持) |
| ￥ | 人民币 | ¥ ; |
| © | 版权 | © ; |
| ® | 注册商标 | ® ; |
| ™ | 商标 | &trade ; |
| × | 乘号 | × ; |
| ÷ | 除号 | ÷ ; |
HTML 换行
< br />使标签后的元素另起一行显示
// 显示在页面上会是三行内容
<p>我是一行显示<br />我是二行显示<br />我是三行显示</p>
HTML 水平线
< hr />元素可用于分隔内容
// 页面显示水平的一条横线 是个单标签
<hr />
HTML 注释
用来解释某块代码的作用 注释内容不被显示
<!-- 注释内容 -->
条件注释
// 条件注释定义只有 IE中 执行的 HTML 标签
<!--[if IE 8]>
.... some HTML here ....
<![endif]-->
// 如果 ie 8 注释不起作用 不然注释起作用
认识 XHTML
什么是 XHTML？
- XHTML 指的是可扩展超文本标记语言
- XHTML 是更严格更纯净的 HTML 版本
- XHTML 是以 XML 应用的方式定义的 HTML
- XHTML 得到所有主流浏览器的支持
1. XHTML - 元素
语法规则
- XHTML 元素必须正确嵌套
- XHTML 元素必须始终关闭
- XHTML 元素必须小写
- XHTML 文档必须有一个根元素
元素必须正确嵌套
// 正确嵌套方式
<b><i>标签与标签相互嵌套</i></b>
元素必须始终关闭
// 双标签必须成对出现
<h1>这是一个一级标题</h1>
<p>这是一个段落</p>
单标签也必须关闭
// 单标签后面的斜杠别忘了
换行标签 <br />
水平分割线<hr />
插入一张图片<img src="happy.gif" alt="Happy face" />
元素必须小写
// 错误的
<BODY>
<p>这是一个段落</p>
</BODY>
// 这是正确的的
<body>
<p>这是一个段落</p>
</body>
2. XHTML - 属性
属性 - 语法规则
- 属性必须使用小写
- 属性值必须用引号包围
- 属性最小化也是禁止的
XHTML 属性必须使用小写
//这是错误的：
<table WIDTH="100%">
// 这是正确的：
<table width="100%">
XHTML 属性值必须用引号包围
// 这是错误的：
<table width=100%>
// 这是正确的：
<table width="100%">
禁止属性简写
// 这是错误的：
<input checked>
<input readonly>
<input disabled>
<option selected>
// 这是正确的：
<input checked="checked" />
<input readonly="readonly" />
<input disabled="disabled" />
<option selected="selected" />
HTML5 新玩法
IE 问题
Internet Explorer 8 以及更早的版本，不兼容html5语法
js文件下载地址：https://github.com/aFarkas/html5shiv
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
// IE9 的早期版本会读取它（并理解它）
<!--[if lt IE 9]>
<script src="./html5shiv-master/src/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<header>头部</header>
</body>
</html>
语义化
HTML5 提供的新元素可以构建更好的文档结构
| 标签 | 描述 |
|---|---|
| < header > | 头部标签 |
| < nav > | 导航栏标签 |
| < article > | 内容标签 |
| < section > | 块级标签 |
| < aside > | 侧边栏标签 |
| < footer > | 尾部标签 |
| < bdi > | 定义与其他文本不同的文本方向 |
| < details > | 定义用户可查看或隐藏的额外细节 |
| < dialog > | 定义对话框或窗口 |
| < figure > | 定义自包含内容，比如图示、图表、照片、代码清单等等 |
| < main > | 定义文档的主内容 |
| < mark > | 定义重要或强调的内容 |
| < menuitem > | 定义用户能够从弹出菜单调用的命令/菜单项目 |
| < meter > | 定义已知范围（尺度）内的标量测量 |
| < progress > | 定义任务进度 |
| < section > | 定义文档中的节 |
| < summary > | 定义 < details> 元素的可见标题 |
| < time > | 定义日期/时间 |
| < wbr > | 定义可能的折行（line-break） |
新的表单控件
| type表单值 | 描述 |
|---|---|
| 限制用户输入必须为Email类型 | |
| url | 限制用户必须为URL类型 |
| date | 限制用户输入必须为日期类型 |
| time | 限制用户输入必须为事件类型 |
| month | 限制用户必须为月类型 |
| week | 限制用户输入必须为周类型 |
| number | 限制用户输入必须为数字 |
| tel | 手机号码 |
| search | 搜索框 |
| color | 生成颜色选择表单 |
表单属性
| 属性名称 | 值 | 描述 |
|---|---|---|
| required | required | 表单拥有该属性表示其内容不能为空，必填 |
| placeholder | 提示文本 | 表单的提示信息，存在默认值将不显示 |
| autofocus | autofocus | 自动聚焦属性，页面加载完成自动聚焦到指定表单 |
| autocomplete | off / on | 显示出在字段中填写的选项 默认已经打开，如autocomplete=“on” 关闭autocomplete=“off” 需要放在表单内同时加上name属性 同时成功提交 |
| multiple | multiple | 可以多选文件提交 |
媒体
音频 audio
三种音频格式 : Ogg vorbis / Mp3 / Wav
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果出现该属性则音频在就绪后 马上播放 |
| controls | controls | 如果出现该属性，则像用户显示控件，比如按钮播放 |
| loop | loop | 如果出现该属性，则每当音频结束时重新开始播放 |
| src | url | 要播放的音频的URL |
语法：
// 单个文件语法
<audio src="audio/01.mp3" controls="controls" controls></audio>
// 多个播放设置
<audio controls="controls">
<source src="mp3路径地址" type="audio/mpeg">
<source src="ogg路径地址" type="audio/ogg">
</audio>
视频 video
三种视频格式 : Ogg / MPEG4 / WebM
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 视频就绪自动播放 |
| controls | controls | 向用户显示控件播放 |
| width | pixels（像素） | 设置播放器宽度 |
| height | pixels（像素） | 设置播放器高度 |
| loop | loop | 播放完是否继续播放该视频，循环播放 |
| preload | proload / auto(预先加载视频) ./ none（不应加载视频） | 规定是否预加载视频（如果有了autoplay就忽略该属性） |
| src | url | 视频url地址 |
| poster | imgurl | 加载等待的画面图片 |
| muted | muted | 静音播放 |
语法 ：
// 单个语法
<video src="文件地址" controls="controls"></video>
// 多个播放设置
<video controls="controls">
<source src="audio/video.mp4" type="video/mp4">
<source src="audio/01.ogg" type="video/ogg">
</video>
2184
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
