HTML总结归纳

2017-08-02 本文已影响56人 YM雨蒙

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 尾部
hx h1-h6 标题

文本标签

<a></a> 超链接
- 创建指向另一个文档的链接
- 创建一个文档内部的锚点
- 链接到Email地址
em strong strong比em更强调
span 无语义
br 换行单闭合标签
cite q 引用
- cite引用的出处
- q简短的一段文字
b i 格式化
- 粗体但不想强调 b标签
- 斜体技术术语等i标签

组标签

div 分区(其他标签的容器)
p 段落
ul ol dl列表
- 无序列表 ul li
- 有序列表 ol li
- 自定义列表dl dt dd
pre 经过格式化的内容(保留空格和换行)
blockquote 大段引用

资源标签

img 嵌入图片(自闭合图片)

<img src="../cover.jpg" alt="封面"

iframe嵌入页面(例如第三方广告)

<iframe src="http://www.163.com"></iframe>

object embed嵌入外部资源

嵌入一个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">

video audio视频音频

<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。

canvas svg图
- 基于像素的canvas
- 矢量的svg
map area 热点区域

表格标签

跨行:

<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>