HTML简介
什么是HTML
HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言:
Hyper Text Markup Language - HTML 不是一种编程语言，而是一种标记语言
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
- HTML 文档包含了HTML 标签及文本内容
- HTML文档也叫做 web 页面
HTML标签(语法)
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词，比如 <html>
- HTML 标签通常是成对出现的，比如 <b> 和 </b>
- 标签对中的第一个标签是开始标签，第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
- 标签放在尖括号里 <>
- 标签都是闭合的
- 一个或多个属性值
- 可嵌套
- 注释
- 书写规范
- 小写
- 属性值双引号
- 嵌套缩进
HTML实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML实例</title>
</head>
<body>
<h1>我是标题标签</h1>
<p>我是段落标签</p>
</body>
</html>
<!-- 解释-->
<!DOCTYPE html> — 文档类型，写成 <!doctype html> 也行。
<html></html> — <html>包含整个页面的内容。
<head></head>—<head>包含页面描述，CSS样式等，但不会被用户看到。
<body></body>—<body>包含了你想被用户看到的内容。
<meta charset="utf-8"> — 指定文档的字符编码为 UTF-8。
<title></title> — 设置页面的标题，显示在浏览器标签页上。
<!DOCTYPE> 声明
- 首行 顶格
doctype 声明是不区分大小写的，以下方式均可：
<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>
HTML文档头部
<head>
<meta charset="UTF-8"> <!-- 定义文档的字符编码 -->
<title>title</title> <!-- 文档标题 -->
<meta name="keywordss" content="音乐..."> <!-- 描述文档的基本信息 -->
<meta name="description" content="...">
<meta name="viewport" content="width=device-width">
<link rel="shortcut icon" href="favicon.ico"> <!-- 引入字体图标 -->
<link rel="stylesheet" href="../css/style.css"> <!-- 引入css样式 -->
<style>
p{
color: #999; /*样式写在style里*/
}
</style>
</head>
HTML标签总结(常用)
文档章节标签
-
body呈现给用户 -
header头部 -
nav导航 -
aside和主要内容不相关的区域 -
article相邻独立可重复主体 -
section文档中的区域 -
footer尾部 -
hxh1-h6 标题
文本标签
-
<a></a>超链接- 创建指向另一个文档的链接
- 创建一个文档内部的锚点
- 链接到Email地址
-
emstrongstrong比em更强调 -
span无语义 -
br换行 单闭合标签 -
citeq引用- cite引用的出处
- q简短的一段文字
-
bi格式化- 粗体但不想强调
b标签 - 斜体 技术术语等
i标签
- 粗体但不想强调
组标签
-
div分区(其他标签的容器) -
p段落 -
uloldl列表- 无序列表
ulli - 有序列表
olli - 自定义列表
dldtdd
- 无序列表
-
pre经过格式化的内容(保留空格和换行) -
blockquote大段引用
资源标签
-
img嵌入图片(自闭合图片)
<img src="../cover.jpg" alt="封面"
-
iframe嵌入页面(例如第三方广告)
<iframe src="http://www.163.com"></iframe>
-
objectembed嵌入外部资源
嵌入一个flash插件
<object data="" type="application/x-shockwave-flash">
<param name="movie" value="http://pdfReader.swf">
<param name="flashvars" value="http://book.pdf">
</object>
<embed src="http://pdfReader.swf" type="application/x-shockwave-flash">
-
videoaudio视频 音频
<video controls poster="./res/poster.jpg" >
<source src="./res/video.mp4" type="video/mp4">
<track kind="subtitles" src="./res/video.vtt" srclang="cn" label="cn">
Your browser does not support the video tag.
</video>
可以自己在mdn 查看video属性
主流浏览器都兼容HTML5的新标签，对于 IE8 及以下版本不认识 HTML5的新元素，可以使用 JavaScript 创建一个没用的元素来解决，例如：
<script>document.createElement("header");</script>，也可以使用shiv来解决兼容性问题，详情可参考HTML5 Shiv。
-
canvassvg图- 基于像素的
canvas - 矢量的
svg
- 基于像素的
-
maparea热点区域
表格标签
跨行:
<table>
<caption>照片冲印价格详情</caption>
<thead>
<tr><th>相片尺寸</th><th>富士</th><th>柯达</th></tr>
</thead>
<tbody>
<tr><th>6寸</th><td>0.45</td><td>0.6</td></tr>
<tr><th>全景6寸</th><td>0.45</td><td>0.6</td></tr>
<tr><th>7寸</th><td>0.89</td><td>1</td></tr>
<tr><th>8寸</th><td>1.69</td><td>2</td></tr>
<tr><th>10寸</th><td>3.89</td><td>5</td></tr>
</tbody>
<tfoot>
<tr><td colspan="3">运费8元/单，满99元免运费</td></tr>
</tfoot>
</table>
跨列:
<table class="table">
<thead>
<tr><th>区域</th><th>寄达地</th><th>首重（元/1000g)</th><th>续重（元/1000g)</th></tr>
</thead>
<tbody>
<tr><th rowspan="2">一区</th><td>浙江、上海、江苏</td><td>6</td><td>1</td></tr>
<tr><td>江西、安徽</td><td>7</td><td>1</td></tr>
<tr><th>二区</th><td>北京、天津、河北</td><td>9</td><td>4</td></tr>
<tr><th>三区</th><td>辽宁、甘肃、四川</td><td>10</td><td>4</td></tr>
<tr><th>四区</th><td>吉林、黑龙江、云南</td><td>10</td><td>6</td></tr>
<tr><th>五区</th><td>新疆、西藏</td><td>15</td><td>10</td></tr>
</tbody>
</table>
表单标签
form表单标签的应用:
<form action="/login" method="post" class="m-form">
<fieldset>
<legend>照片选择</legend>
<label for="file">选择照片</label><input type="file" id="file">
</fieldset>
<fieldset>
<legend>综合设置</legend>
<div>选择尺寸：</div>
<div>
<input class="cb" type="checkbox" name="size" id="cb_0" value="5"><label for="cb_0" checked>5寸</label>
<input class="cb" type="checkbox" name="size" id="cb_1" value="6"><label for="cb_1">6寸</label>
</div>
<div>选择相纸：</div>
<div>
<input class="rd" type="radio" name="material" id="rd_0" value="fushi"><label for="rd_0" >富士</label>
<input class="rd" type="radio" name="material" id="rd_1" value="keda"><label for="rd_1" >柯达</label>
</div>
<div>
<label for="delivery">配送方式：</label>
<select id="delivery">
<option value="0">快递</option>
<option value="1">EMS</option>
<option value="2" selected>平邮</option>
</select>
</div>
<div>
<label for="description">商品描述：</label>
<input class="txt" type="text" id="description" placeholder="描述">
</div>
<div>
<label for="feedback">意见反馈：</label>
<textarea name="feedback" rows="4" id="feedback"></textarea>
</div>
</fieldset>
<div>
<button type="submit">提交</button>
<button type="reset">重置</button>
</div>
</form>
属性及全局属性
所有标签（包括 <html>） 都有的属性,请自行学习此教程
- accesskey
- class
- contenteditable
- data-*
- draggable
- hidden
- id
- spellcheck
- style
- tabindex
- title
...
实体字符
实体字符表示
- &entity_name;
- &#entity_number;
- 有名字的 HTML 实体，用 &名字; 表示
- 没有名字的 HTML 实体，用 &#十进制; 表示
- 没有名字的 HTML 实体，还可以用 &#x十六进制; 表示
- 空格
- 引号
"" - 大于号
>> - 小于号
<< - 版权号
©© - &
&&
参考:
声明：本文章版权归饥人谷和YM_雨蒙所有，转载需经作者同意
