HTML与H5
HTML 简介
W3C标准：一个网页主要由3个部分组成：结构，表现，行为。
超文本标记语言（HyperText Markup Language，HTML）是一种用于创建网页的标准标记语言。
HTML文档的后缀名：.html 或 .htm。
HTML 标签对大小写不敏感，推荐使用小写。
HTML DOM 节点
在 HTML DOM (Document Object Model) 中 ，每一个元素都是节点。
- 文档是一个文档节点
- 所有的HTML元素都是元素节点
- 所有 HTML 属性都是属性节点
- 文本插入到 HTML 元素是文本节点
- 注释是注释节点
HTML 注释
注释不能嵌套
<!-- 单行注释 -->
<!--
多行注释
多行注释
多行注释
-->
HTML 实例
<!-- H5声明 -->
<!DOCTYPE html>
<!-- HTML 页面的根元素 -->
<html>
<!-- 头部 -->
<head>
<meta charset="utf-8">
<title>标题</title>
</head>
<!-- 主体 -->
<body>
</body>
</html>
头部：在<head>与</head>之间的部分
主体：在<body>与</body>之间的部分
HTML 标签
基本语法：
<标签名称 属性名1="属性值" 属性名2="属性值" … >文本内容</标签名称>
单标签后面的 / 可有可无，为了规范需要写 /。
| 标签 | 作用 |
|---|---|
| <br>，<br/> | 换行，<br> 在所有浏览器中都是有效的 |
| <hr/> | 网页中插入水平线 |
| <h#></h#> | 标题标记，#：1,2,3,4,5,6 数字越小，字体越大 |
| <p></p> | 段落标记 |
| <b></b> | 黑体标记 |
| <i></i> | 斜体标记 |
| <strong></strong> | 加重标记 |
| <font></font> | 字体标记 |
| <cite></cite> | 定义作品的标题 <cite>标题 The</cite> 效果:标题 The |
| <blockquote></blockquote> | 标签定义块引用，标签之间的所有文本都会从常规文本中分离出来经常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体也就是说，块引用拥有它们自己的空间 |
HTML 属性
属性总是以名称/值对的形式出现，比如：name="value"，属性值应该始终被包括在引号内。双引号是最常用的，使用单引号也可以。如果属性值本身就含有双引号，那么必须使用单引号，例如：name='1 "xxx" 2'。
属性和属性值对大小写不敏感，建议使用小写。
<!-- href是一个属性 -->
<a href="http://www.baidu.com">这是一个链接</a>
head 标签
元信息标记：meta
用于定义页面元信息，该标记位于 head 标记内。
http-equiv：用于指定元信息名称，该属性指定的名称具有特殊意义;
name：用于指定元信息名称，可随意指定;
content：用于指定元信息的值。
<head>
<!-- 不让百度转码,no-siteapp大于no-transform -->
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<meta http-equiv="Cache-Control" content="no-transform"/>
<!-- 使得页面在IE8里面表现正常 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- 设置网页内容类型及字符编码 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 定义针对搜索引擎的关键词 -->
<meta name="keywords" content="H5,CSS,JS" />
<!-- 定义对页面的描述 -->
<meta name="description" content="前端学习,包括H5,CSS,JS..." />
<!-- 定义页面的最新版本 -->
<meta name="revised" content="2520/05/20" />
<!-- 禁用页面缓存 -->
<meta http-equiv="Pragma" content ="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content ="0">
<!-- 网页作者 -->
<meta name="author" content="name, email@gmail.com"/>
<!-- 忽略页面中的数字识别为电话,忽略email识别 -->
<meta name="format-detection" content="telphone=no, email=no"/>
<!-- IOS中Safari允许全屏浏览 -->
<meta content="yes" name="apple-mobile-web-app-capable">
<!-- IOS中Safari顶端状态条样式 -->
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<!-- 1秒刷新一次 -->
<meta http-equiv="refresh" content="1" />
<!-- 3秒后跳到百度网页 -->
<meta http-equiv="refresh" content="3;url=http://www.baidu.com" />
</head>
标题，图标
<!DOCTYPE html>
<html>
<head>
<!-- 标题前面的小图标 -->
<link href="img/head/logo.jpg" rel="icon"/>
<!-- 标题 -->
<title>前端学习</title>
</head>
</html>
加载资源
<!DOCTYPE html>
<html>
<head>
<!-- 加载js -->
<script type="text/javascript" src="js/test.js"></script>
<!-- 加载CSS -->
<link type="text/css" href="css/test.css" rel="stylesheet"/>
</head>
</html>
style
<!DOCTYPE html>
<html>
<head>
<!-- css样式 -->
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
</html>
body 标签
HTML 链接
<a href="http://www.baidu.com/" title="悬浮显示的信息">超链接名称或图片</a>
<!-- target="_blank" 新开一个页面 -->
<a href="http://www.baidu.com/" target="_blank">新开页面的超链接</a>
<!-- 链接到本项目其它文件 -->
<!--
注意路径问题,这里file与该网页同级,使用相对地址
如果不同级 ../ 表示退一级
-->
<a href="file/index.html">此处为超链接</a>
<!-- 链接到本页 -->
<a href="#">此处为超链接</a>
<!-- 链接到本页中锚点位置 -->
<a href="#home">此处为超链接</a>
<!-- 设置锚点 -->
<a name="home"></a>
<a href="文件名#锚点名">此处为超链接</a>
target属性值：
| 属性值 | 作用 |
|---|---|
| _self | 链接在自身窗口中显示，它是target的默认值 |
| _blank | 链接在新窗口中显示 |
| _parent | 链接在父窗口中显示，用在框架中 |
HTML 图像
<!-- height,width指定长与宽 -->
<img src="img/logo.png" alt="加载不成功后的替代文本" title="图片悬停显示的名称">
HTML 层标记
<!-- 定义了文档的区域，块级 (block-level) -->
<div id="层编号">...</div>
<!-- 用来组合文档中的行内元素， 内联元素(inline) -->
<span id="">...</span>
<p class="" id="">段落标记</p>
HTML 列表
<!-- 无序列表标记,实际使用时自定义格式 -->
<!--
disc：实心圆点（默认值）
circle：空心圆点
square：实心方块
-->
<ul type="类型样式">
<li>...</li>
<li>...</li>
<li>...</li>
...
</ul>
<!-- 有序列表标记 -->
<!--
“1”：编号为阿拉伯数字（默认值）
“a”：小写英文字母
“A”：大写英文字母
“i”：小写罗马数字
“I”：为大写罗马数字
-->
<ol type="序号类型">
<li>...</li>
<li>...</li>
<li>...</li>
...
</ol>
<!--
自定义列表
每个自定义列表项以 <dt> 开始
每个自定义列表项的定义以 <dd> 开始
了解即可
-->
<dl>
<dt>列表项一</dt>
<dd>-列一</dd>
<dt>列表项二</dt>
<dd>-列二</dd>
</dl>
HTML 表格
-
HTML中的table可以大致分为三个部分：
thead ---------表格的页眉；
tbody ---------表格的主体；
tfoot ----------定义表格的页脚，一般可忽略该结构。
书写时，一般可以不写上面的三个标签。
<!-- 表格 -->
<table border="1">
<caption>表格标题</caption>
<tr>
<th>列名一</th>
<th>列名二</th>
<th>列名三</th>
</tr>
<tr>
<td>数据1.1</td>
<td>数据1.2</td>
<td>数据1.3</td>
</tr>
<!-- 合并单元格 -->
<tr>
<td colspan="3">横向合并单元格</td>
</tr>
<tr>
<td colspan="2">横向合并单元格</td>
<td rowspan="2">纵向合并单元格</td>
</tr>
<tr>
<td colspan="2">横向合并单元格</td>
</tr>
</table>
<table> 标签常用属性
border="1" 表格边框的宽度
bordercolor="#fff" 表格边框的颜色
align="right" 表格整体对齐方式 (left、center、right)
cellspacing="0" 单元格之间的间距(间距)
cellpadding="0" 单元边沿与其内容之间的空白(边距)
width="500px" 表格的总宽度
height="100px" 表格的总高度
bgcolor="#fff" 表格整体的背景颜色
background="img/1.jpg" 表格背景图片
<tr> 标签常用属性
bgcolor="#fff" 行的颜色
align="right" 行内文字的水平对齐方式 (left、center、right)
valign="top" 行内文字的垂直对齐方式 (top、middle、bottom)
<td>、<th> 标签常用属性
rowspan="3" 合并垂直水平方向的单元格
colspan="3" 合并水平方向单元格
width="500px" 单元格的宽度，设置后对当前一列的单元格都有影响
height="100px" 单元格的高度，设置后对当前一行的单元格都有影响
bgcolor="fff" 单元格的背景色
align="right" 单元格文字的水平对齐方式 (left、center、right)
valign="top" 单元格文字的垂直对齐方式 (middle、bottom、top)
HTML 表单
<form name="表单名" action="处理程序" method="提交方法">
<!-- ... -->
</form>
input 用法：
<!--
<input>标签主要有六个属性：
type,name,value
size,maxlength,check
-->
<form name="" action="" method="">
<input type="button" value="测试"
onclick="test()"/>
</form>
以往input中的name和value要随着form表单一起提交，form表单必须包裹input ， 而现在可以通过input的form属性綁定。
<form id="testform">
<input type="text" />
</form>
<input form="testform" />
HTML 下拉框
<select name="" id="">
<option value="0" selected="selected">请选择</option>
<option value="1">显示1</option>
<option value="2">显示2</option>
<option value="3">显示3</option>
</select>
多行文本框：textarea
<!--
resize:none;
去掉右下角的两条斜线，设置多行文本为不可拖拽
-->
<!--
rows：设置多行文本框的行数
cols：设置多行文本框的列数
wrap：设置是否自动换行
-->
<textarea name="" rows="" cols="" maxlength="30"
value="" wrap="off|virtual|physical"
style="width:100%; height:70px; resize:none;">
显示默认值
</textarea>
窗口的分割与设置：frameset
<frameset rows="高度1,高度2…"
或者 cols="宽度1,宽度2…">
<frame src="网页1" name="">
<frame src="网页2" name="">
<!-- ... -->
</frameset>
不能将body标签和frame标签同时使用，否则frame标签会失效。
noframes标签用于当浏览器不支持框架时使用，一般都会添加。
<noframes>
<body>浏览器不能处理框架</body>
</noframes>
| 属性 | 说明 | 例子 |
|---|---|---|
| rows | 横向分割网页，把网页形成一行一行 属性可以为百分比或者整数，也可以为*，*代表剩余空间 | rows=“15%,85%” |
| cols | 竖向分割网页，把网页形成一列一列 | cols=“100,100,140” |
| noresize | 框架是不可调整尺寸的 | noresize=“noresize” |
| border | 设置框架的边框粗细 | |
| bordercolor | 设置框架的边框颜色 | |
| frameborder | 设置是否显示框架边框 | 0为不显示边框，1为显示边框 |
| bordercolor | 设置框架的颜色 |
body{
margin: 0;
padding: 0;
}
frameset{
margin: 0px;
padding: 0px;
border: none;
}
frame{
width: 100%;
margin: 0px;
padding: 0px;
border: none;
}
<frameset rows="" frameborder="no" framespacing="0">
<frame frameborder="no" marginwidth="0" marginheight="0"/>
</frameset>
内部框架：iframe
<!--
可以在一个页面定义一个区域用于显示另一个页面内容 ，同frame有相似之处
frameborder：是否有边框
scrolling：是否可以滑动
-->
<iframe src="文件" width="宽度" height="高度"
name="框架名称" scrolling="auto|yes|no"
frameborder="0|1">
</iframe>
网页元素分组：fieldset
<fieldset> 标签用于从逻辑上将表单中的元素组合起来。
<fieldset> 标签会在相关表单元素周围绘制边框。
<legend> 标签为 fieldset 元素定义标题。
<fieldset>
<legend>标题1</legend>
内容1
</fieldset>
<fieldset>
<legend>标题2</legend>
内容2
</fieldset>
基底网址标记
<base href="" target="_blank">
HTML 视频
<video width="300" height="200" controls>
<source src="media/movie.mp4" type="video/mp4">
<source src="media/movie.ogg" type="video/ogg">
浏览器不支持video标签
</video>
HTML 音频
<!-- autoplay="autoplay" 规定一旦音频就绪马上开始播放
controls="controls" 出现控制组件
loop="loop" 当音频结束后将重新开始播放
preload="auto" 当页面加载后载入整个音频，如果使用 "autoplay"，则忽略该属性
-->
<audio src="media/123.mp3" loop="loop" controls="controls">
浏览器不支持audio标签
</audio>
HTML 滚动字幕
<marquee direction="up|down|left(默认)|right"
behavior="scroll|slide|alternate"
scrollamount="文字每次移动的长度（像素）"
scrolldelay="两步间的时间间隔(毫秒)"
loop="循环次数" bgcolor="背景颜色"
width="宽度" height="高度"
hspace="距周围水平距离" vspace="距周围垂直距离">
要滚动的文字
</marquee>
| 属性 | 属性值以及说明 |
|---|---|
| direction | up、down、left (默认) 和 right |
| behavior | scroll 循环滚动，默认效果 slide 只滚动一次就停止 alternate 来回交替进行滚动 |
| scrollamount | 设置滚动文字每次移动的长度，以像素为单位 |
| scrolldelay | 滚动延迟属性，两步间的时间间隔(毫秒) |
| width、height | 滚动范围属性 |
| bgcolor | 滚动背景颜色属性，文字背景颜色设置为 16 位颜色码 |
| loop | 循环次数 |
| hspace | 距周围水平距离 |
| vspace | 距周围垂直距离 |
HTML 特殊字符
| 字符 | 标识 |
|---|---|
空格 | |
< | < |
> | > |
" | " |
× | × |
| § | § |
| & | & |
| © | © |
| ® | ® |
| ™ | ™ |
HTML 补充标记
| 标签 | 作用 |
|---|---|
| <pre></pre> | 保留文本原始排版方式 |
| <u>…</u> | 下划线 |
| <s>…</s> | 删除线 |
| <sup>…</sup> | 上标 |
| <sub>…</sub> | 下标 |
| <center>…</center> | 内容居中 |
| <blockquote> | 右缩进 |
| <nobr> | 强制不换行 |
450
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
