HTML总结归纳

HTML简介

---

什么是HTML

HTML 是用来描述网页的一种语言。

• HTML 指的是超文本标记语言: Hyper Text Markup Language
• HTML 不是一种编程语言，而是一种标记语言
• 标记语言是一套标记标签 (markup tag)
• HTML 使用标记标签来描述网页
• HTML 文档包含了HTML 标签及文本内容
• HTML文档也叫做 web 页面

---

HTML标签(语法)

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

• HTML 标签是由尖括号包围的关键词，比如
• HTML 标签通常是成对出现的，比如 和
• 标签对中的第一个标签是开始标签，第二个标签是结束标签
• 开始和结束标签也被称为开放标签和闭合标签
  • 标签放在尖括号里 <>
  • 标签都是闭合的
  • 一个或多个属性值
  • 可嵌套
  • 注释
• 书写规范
  • 小写
  • 属性值双引号
  • 嵌套缩进

---

HTML实例

    
    


    
我是标题标签
    
我是段落标签




 — 文档类型，写成  也行。

 — 包含整个页面的内容。

—包含页面描述，CSS样式等，但不会被用户看到。

—包含了你想被用户看到的内容。

 — 指定文档的字符编码为 UTF-8。

 — 设置页面的标题，显示在浏览器标签页上。

声明

• 首行 顶格

doctype 声明是不区分大小写的，以下方式均可：

HTML文档头部

---

HTML标签总结(常用)

文档章节标签

• body 呈现给用户
• header 头部
• nav 导航
• aside 和主要内容不相关的区域
• article 相邻独立可重复主体
• section 文档中的区域
• footer 尾部
• hx h1-h6 标题

文本标签

• 超链接
  • 创建指向另一个文档的链接
  • 创建一个文档内部的锚点
  • 链接到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 嵌入图片(自闭合图片)

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

• object embed嵌入外部资源

嵌入一个flash插件

• video audio视频 音频

  
  可以自己在mdn 查看video属性

主流浏览器都兼容HTML5的新标签，对于 IE8 及以下版本不认识 HTML5的新元素，可以使用 JavaScript 创建一个没用的元素来解决，例如：
，也可以使用shiv来解决兼容性问题，详情可参考HTML5 Shiv。

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

表格标签

跨行:


    
照片冲印价格详情
    

      
相片尺寸
富士
柯达
    
    

      
6寸
0.45
0.6
      
全景6寸
0.45
0.6
      
7寸
0.89
1
      
8寸
1.69
2
      
10寸
3.89
5
    
    

      
运费8元/单，满99元免运费
    
  
  
  
跨列:


  

    
区域
寄达地
首重（元/1000g)
续重（元/1000g)
  
  

    
一区
浙江、上海、江苏
6
1
    
江西、安徽
7
1
    
二区
北京、天津、河北
9
4
    
三区
辽宁、甘肃、四川
10
4
    
四区
吉林、黑龙江、云南
10
6
    
五区
新疆、西藏
15
10
  

表单标签

form表单标签的应用:


    

      
照片选择
      选择照片
    
    

      
综合设置
      
选择尺寸：
      

        5寸
        6寸
      
      
选择相纸：
      

        富士
        柯达
      
      

        配送方式：
        
            快递
            EMS
            平邮
        
      
      

        商品描述：
        
      
      

        意见反馈：
        
      
    
    

      提交
      重置
    
  

---

属性及全局属性

所有标签（包括 ） 都有的属性,请自行学习此教程

• accesskey
• class
• contenteditable
• data-*
• draggable
• hidden
• id
• spellcheck
• style
• tabindex
• title
  ...

---

实体字符

实体字符表示

• &entity_name;
• &#entity_number;
  • 有名字的 HTML 实体，用 &名字; 表示
  • 没有名字的 HTML 实体，用 &#十进制; 表示
  • 没有名字的 HTML 实体，还可以用 &#x十六进制; 表示

1. 空格
2. 引号 " "
3. 大于号 > >
4. 小于号 < <
5. 版权号 © ©
6. & & &

---

参考:

w3cschool

网易云课堂微专业

饥人谷

MDN

慕课

---

声明：本文章版权归饥人谷和YM_雨蒙所有，转载需经作者同意