html笔记

Created at 2016-10-17 Updated at 2016-10-17 Category 学习 Tag 前端

html笔记

1. HTML文档结构

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 //Html文档头部，重点是针对搜索引擎，浏览器看不到此处的内容
</head>
<body>
 //Html文档的主体部分，浏览器中能看到的内容都在此处
</body>
</html>

2. 块元素（block）

特点：有大小，未指定宽度则宽度自适应，能产生布局，独立成行

  • div： 典型的块元素特征
  • p：除了具有块元素的特征外，具有上下边距(margin-top/margin-bottom)
  • h1、h2、h3、h4、h5、h6：除了具有P标签的所有特性之外，还有具有特定的字 号，并给文字加粗
  • ul/ol：除了具有p 标签的特性外，还多了个左填充(padding-left)
  • dl：特性同p标签
  • dt：特性同div
  • dd：比div多了左边距(margin-left)
  • Li：同div

3. 行级元素（inline）

特点：无大小，不独立成行

  • span：典型的行级元素
  • a：除了具有行级元素特性外，会使其内部的文字默认颜色变蓝色，同时添加了下划线，在IE浏览器中，a标签内部的图片会有四个边框
  • b/strong：除了具有行级元素特性外，使其内部的文字加粗
  • i/em：除了具有行级元素特性外，使其内部的文字倾斜

4. 行级块元素/内联块（inline-block）

特点：不独立成行，但有大小；
主要有img、input

5. 行.块转换

  • 行转块 ： display: block;
  • 块转行 ： display:inline;
  • 块转行块： display:inline-block;

6. 列表

有序列表

1
2
3
4
5
<ol>
   <li>音乐ol</li> //    1.音乐
   <li>视频ol</li> //    2.视频
   <li>图片ol</li> //    3.图片
</ol>


  1. 音乐ol

  2. 视频ol

  3. 图片ol


无序列表
1
2
3
4
5
<ul>
   <li>音乐ul</li> //    .音乐
   <li>视频ul</li> //    .视频
   <li>图片ul</li> //    .图片
</ul>


  • 音乐ul

  • 视频ul

  • 图片ul


定义列表
1
2
3
4
<dl>
   <dt>标签</dt>
   <dd>解释说明</dd>
</dl>


标签

解释说明

7. H5新增标签

  • header：页面或者某一区块的头部
  • footer：页面或者某一区块的底部
  • section：页面中的某一区块
  • nav：导航或者是链接组
  • article：文章
  • aside：定义内容以外的内容（一般用在侧边栏）
  • figure：图文解释说明，常与figcapition联合使用，figcapition是图片的标题
  • time/mark/
  • video、audio、canvas

Table of Content

  1. html笔记
    1. 1. HTML文档结构
    2. 2. 块元素（block）
    3. 3. 行级元素（inline）
    4. 4. 行级块元素/内联块（inline-block）
    5. 5. 行.块转换
    6. 6. 列表
    7. 7. H5新增标签
Site by Mickey using Hexo & Random

Hide