3. 前端基础 - html

一、HTML标签

(一) 标签

[1].标题标签

• 在一个网页中，h1标签最重要，并且一个.html文件中只能出现一次h1标签，其他都随意

• h5~h6不经常使用。

  <h1></h1> ~<h6></h6>
  

[2].文本修饰标签

• 两个都可以对文本进行强调，strong比em更强烈

• strong和em是具备语义化的，而b和i不具备语义化

• 插入文本一般是配合删除文本来使用

  <strong>和<b>:加粗
  <em>和<i>:斜体
  <sub> :上标
  <sup>:下标
  <del>:删除文本
  <ins>:插入文本
  

[3].图片标签和图片属性

• 宽高要进行添加，这样当网速不好，图片没有加载好的时候，图片占的位置也会被保留

• 标签：<img >
  属性

  • src:引入图片地址
  • alt:图片不出现时的提示语
  • title:在鼠标放在元素上时的提示信息
  • width
  • height

[4].文件引入路径

• 相对路径是针对当前文件的路径

[5].跳转链接

• 单标签<a>
  href: 链接
  target:可以改变链接打开的方式，默认情况下，就是在当前页面打开_self，新窗口打开_blank
• 单标签<base>
  <base>标签在head进行设置target属性，可以控制整个页面链接的打开方式

[6].跳转锚点

• 实现一：
  在<a> 的href属性中添加#和 跳转到的位置的id

• 实现二：
  在<a> 的href属性中添加#和跳转到的位置上面添加的<a>中的name

  

[7].特殊符号

[8].无序列表

• <ul>和<li>之间是不能有其他标签的

  <ul> 
  <li>
  

[9].无序列表

• 有序列表用的非常少，经常使用的是无序列表，无序列表可以代替有序列表

  <ol><li>
  

[10].定义列表

<dl>:定义列表
<dt>:定义专业术语或名词
<dd>:对名词进行解释和描述

[11].表格标签

• tbody可以出现多次，thead、tfood只能出现一次

  <table>
  <caption>:表格标题
  <th>：定义表头
  <tr>
  <td>
  语义化标签：<thead>、<tbody>、<tfood>
  

[12].表格标签

border:表格边框
cellpadding:单元格内的空间
cellspacing:单元格之间的空间
rowspan:合并行
colspan:合并列
align:左右对齐方式
valign:上下对齐方式

[13].表格扩展

添加单线：border-collapse:collapase
隐藏空单元：empty-cells:hide
斜线分类：border/rotate
列分组：colgroup / col

[14].表单标签

• select 的size=”3”表示显示3个

• select的multiple表示选择多个

  <form>
  <input>
  <textarea>
  <select>
  <option>
  <label>
  

[15].<iframe>

• <iframe>元素创建包含另一个文档的内联框架(即行内框架)
• 应用场景：数据传输、共享代码、局部刷新、第三方介入等
  

[16].换行

• br标签表示换行操作，而wbr标签表示软换行操作

• 如果单词太长，或者担心浏览器在错误的位置换行，那么您可以使用wbr元素来添加Word Break Oppprtunity(单词换行时机)

  单标签：<br>
  单标签：<wbr>

[17].热点图

• area元素永远嵌套在map元素内部。

• area元素可定义图像映射中的区域

• area元素的href属性定义区域的URL，shape属性定义区域的形状，coords属性定义热区的坐标

  <map>
  单标签<area>
  

[18].视频音频标签 H5

• 被嵌套标签<soure src=”” type=””>可以引用多个视频音频，供浏览器选择

• 默认控件不显示，可通过controls属性进行显示

• loop属性是否循环

• autoplay是否自动播放

  <video>
  <audio>
  

[19].link标签

<link rel=”stylsheet” type=”text/css” href=””>
添加icon
<link rel=”icon” type=”/image/x-icon” href=””>
在自己的网页进行dns解析
<link rel=”dns-prefetch” href=””>

[20].meta标签

网页描述
<meta name=”description”  content=”’>
网页关键字
<meta name=”keywords” content=””>
选择网页渲染内核
<meta name=”renderer” content=”webkit”>
使ie使用更高级的版本进行渲染
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
3秒后刷新
<meta http-equiv=”refresh” content=”3” >
设置网页失效的时间
<meta http-equiv=”expires” content=”时间” >

(二) H5新语义化标签

[1].页眉header

• 就像DIV标签元素一样可以多次使用，不同地方可以使用id或class设置不同样式。

[2].页脚footer

也就是说footer元素跟header元素很类似，可以为整体页面的单独架构元素（表示页面页脚），也可以作为部分元素内的架构元素（表示部分的页脚）。

[3].主体main

main标签是HTML5新出的一个标签，它是用来表达document中的body的主要内容，但不能在一个document中有多个main,不能在article,aside,footer,header或者nav中包含main。

[4].标题组合hgroup

• 在html中，<hgroup>标签是使用来对网页或区段的标题进行组合，即对网页或区段中连续的<h1>~<h6>元素进行组合。
• <hgroup>标签只是对标题进行组合，而对标题的样式没有影响。
• <hgroup><h2>标题1<h2/><h2>标题2<h2/>……</hgroup>
• 如果文章有标题和子标题，就可以使用<hgroup>标签。通常情况下，文章只有一个主标题是不需要使用<hgroup>标签的。

[5].导航nav

• nav标签的功能，这里和header类似并没有指定必须是主导航，也可以是页面其它部分的子导航。

  <nav>
  	<ul> 
  		<li>
  			<a href="#html5">HTML5文章介绍</a>
  		</li>
  		<li>
  			<a href="#css3">CSS3文章介绍</a>
  		</li>
  	<ul>
  </nav>
  

[6].独立的内容article

是使用来定义独立于文档且有意义的来自外部的内容，比如：一些投稿文章、新闻记者的文章，或者是摘自其它博客、论坛的信息等。

[7].辅助信息的内容 aside

• 被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、名次解释，等等

  <article>
    <h1>…</h1>
    <p>…</p>
    <aside>…</aside>
  </article>
  

• 在article元素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏，其中的内容可以使友情链接，博客中的其它文章列表、广告单元等。

  <aside>
    <h2>…</h2>
    <ul><li>…</li><li>…</li> </ul>
    <h2>…</h2>
    <ul><li>…</li> <li>…</li></ul>
  </aside>
  

[8].区域section

• 用于定义文章中的章节（通常有标题段落内容）
• 用于定义文档中特定内容块，可视为一个区域分组元素，用来给页面上的内容分块。
• section元素的作用就是给内容分段，给页面分区。
• section元素和div元素的区别，div强调在形式上的独立性，section强调的是内容上的独立性

[9].arcticle元素和section元素

• 不同点：
  • div充当容器的角色，用来设置某一块的总体属性（一个div里面可能包含多个section）；
  • article元素更强调内容的独立性
  • section元素更强调内容的关联性
  • article元素是独立完整的内容，section元素是对页面内容分块
• 相同点
  • 本质上都是带有语义div块元素
  • 分别可以看成
    和

[10].描述图像或视频figure

• <figure>标签规定独立的流内容（图像、图表、照片、代码等等）。
• figure元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。它是一种元素的组合，可带有标题（可选）。figure标签用来表示网页上一块独立的内容，将其从网页上移除后不会对网页上的其他内容产生影响。

[11].描述图像或视频的标题部分figcaption

• <figcation> 标签定义 figure 元素的标题（caption）。
• “figcaption” 元素应该被置于 “figure” 元素的第一个或最后一个子元素的位置。

二、标签分类

(一) 按类型

[1].块block

• div、p、ul、li、h1 …
  特性：
  • 1.独占一行
  • 2.支持所有样式
  • 3.不写宽度的时候，会占满父元素
  • 4.所占区域是一个矩形

[2].内联inline

• span、a、em、strong、img …
  特性：
  • 1.用多少占多少空间
  • 2.不支持，width、height，某些方向的margin、padding不支持
  • 3.不写宽的时候，宽度由内容决定
  • 4.内联标签之间会有空隙，原因：由内连标签代码之间的换行产生的，可以对父容器设置font-size:0;内联标签的font-size:设置正常大小

    <span>213</span>
    <span>456</span>
    

[3].内联块inline-block

• input、select …
• 特性
  1.支持width、height,并且用多少空间，占多少空间
  2.标签之间也有空隙

(二) 按内容分类

www.w3.org/TR/html5/dom.html

(三) 按显示划分

• 替换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容
  • img、input
  • 通过属性来显示标签内容
• 非提换元素：将内容直接告诉浏览器，将其显示出来。
  • h1