HTML基础标签

作者: 姚小帅 | 来源:发表于2017-05-09 00:07 被阅读0次

1.meta标签

<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。 <meta> 标签位于文档的头部，不包含任何内容。 <meta> 标签的属性定义了与文档相关联的名称/值对。
meta常用于定义页面的说明，关键字，最后修改日期，和其它的元数据。这些元数据将服务于浏览器（如何布局或重载页面），搜索引擎和其它网络服务。

常见的meta标签

eg.

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="keywords" content="前端 饥人谷">
  <meta name="description" content="最有爱的前端学习社区">
  <title>Document</title>
</head>

申明编码 <meta charset='utf-8' />
优先使用 IE 最新版本和 Chrome (适用于双内核浏览器)

<!-- 使用最新的ie内核和chrome内核 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- 关于X-UA-Compatible -->
<meta http-equiv="X-UA-Compatible" content="IE=6" ><!-- 使用IE6 -->
<meta http-equiv="X-UA-Compatible" content="IE=7" ><!-- 使用IE7 -->
<meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 -->

浏览器内核控制 <meta name="renderer" content="webkit|ie-comp|ie-stand">
移动设备显示 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
页面关键词 <meta name="keywords" content="前端饥人谷">
页面描述 <meta name="description" content="最有爱的前端学习社区">
内存控制 <meta http-equiv="cache-control" content="no-cache">

no-cache: 先发送请求，与服务器确认该资源是否被更改，如果未被更改，则使用缓存。
no-store: 不允许缓存，每次都要去服务器上，下载完整的响应。（安全措施）
public : 缓存所有响应，但并非必须。因为max-age也可以做到相同效果
private : 只为单个用户缓存，因此不允许任何中继进行缓存。（比如说CDN就不允许缓存private的响应）
maxage : 表示当前请求开始，该响应在多久内能被缓存和重用，而不去服务器重新请求。例如：max-age=60表示响应可以再缓存和重用 60 秒。

>
#####组成
meta标签共有四个属性分别是content属性、http-equiv属性、name属性和scheme属性。
其中content属于必须的属性用于*定义与 http-equiv 或 name 属性相关的元信息*
scheme 属性设置或返回用于解释 content 属性的值的格式。```<meta name="revised" content="2006-11-03" scheme="YYYY-MM-DD" />```
所以meta属性其实主要分为两大类 name 与 http-equiv
name 属性提供了名称/值对中的名称。HTML 和 XHTML 标签都没有指定任何预先定义的 <meta> 名称。通常情况下，您可以自由使用对自己和源文档的读者来说富有意义的名称。
http-equiv 属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。
>>使用带有 http-equiv 属性的 <meta> 标签时，服务器将把名称/值对添加到发送给浏览器的内容头部。例如，添加：

这样发送到浏览器的头部就应该包含：

content-type: text/html
charset:iso-8859-1
expires:31 Dec 2008

当然，只有浏览器可以接受这些附加的头部字段，并能以适当的方式使用它们时，这些字段才有意义。
>
</br>
有两个链接讲的比较详细，以后想办法总结到一起
[分类描述](https://segmentfault.com/a/1190000004279791)
[各种具体应用场景](https://tink.gitbooks.io/fe-collections/content/ch02-html/s03-meta.html)

###文档声明
>#####文档声明的作用
<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。
<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
>>
- 严格模式是浏览器根据web标准去解析页面，是一种要求严格的DTD，不允许使用任何表现层的语法，如<br/>。
- 混杂模式则是一种向后兼容的解析方法，说的透明点就是可以实现IE5.5以下版本浏览器的渲染模式。
>
>>- 触发严格模式:触发严格模式很简单，就是正常的建立网页，声明正确的DTD，便是严格模式。
- 触发混杂模式:而混杂模式的触发可以通过在HTML文档开始不声明DTD，或者在DOCTYPE前加入XML声明l<?xml version=”1.0〃 encoding=”utf-8〃?>来实现。
>
####常用的 DOCTYPE 声明
>>- HTML 5
```<!DOCTYPE html>```
- HTML 4.01 Strict
该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。
```<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">```
- HTML 4.01 Transitional
该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。
```<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">```
- HTML 4.01 Frameset
该 DTD 等同于 HTML 4.01 Transitional，但允许框架集内容。
```<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd">```
- XHTML 1.0 Strict
该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。必须以格式正确的 XML 来编写标记。
```<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">```
- XHTML 1.0 Transitional
该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。必须以格式正确的 XML 来编写标记。
```<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">```
- XHTML 1.0 Frameset
该 DTD 等同于 XHTML 1.0 Transitional，但允许框架集内容。
```<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">```
- XHTML 1.1
该 DTD 等同于 XHTML 1.0 Strict，但允许添加模型（例如提供对东亚语系的 ruby 支持）。
```<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">```

###浏览器乱码的原因是什么？
> 文件保存的格式与meta中指定的解析格式不一样，解决方法，用meta指定正确的解析格式或者保存为meta制定的格式
ex:
>>1. 乱码产生的根本原因是你保存的编码格式和浏览器解析时的解码格式不匹配导致的。 
2. 乱码一般是英文以外的字符才会出现。

---

###常见的浏览器有哪些，什么内核

></br>
全球排行榜，IE占第一位，老牌浏览器，不过市场占有率逐步下滑， 第二是Mozilla Firefox，非IE内核的它迅速占有着IE的市场份额，强大无比的扩展插件是它一大特色，这也是我选用它的一个原因。 第三是Google Chrome，包含普通版还有极速版等，窗口较为简洁清爽，实际使用效果还是可以的。 还有像opera还是相当实用的 360，TT，搜狗，遨游，瑞影，hotbrowser，等等
</br>
>  
浏览器内核
- Trident：IE浏览器使用的内核,该内核程序在1997年的IE4中首次被采用，是微软在Mosaic代码的基础之上修改而来的，并沿用到目前的IE8。Trident实际上是一款开放的内核，其接口内核设计的相当成熟，因此才有许多采用IE内核而非IE的浏览器涌现（如 Maxthon、The World 、TT、GreenBrowser、AvantBrowser等）。此外，为了方便也有很多人直接简称其为IE内核（当然也不排除有部分人是因为不知道内核名称而只好如此说）。
- Gecko：Netscape6开始采用的内核，后来的Mozilla FireFox也采用了该内核，Gecko的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。因为这是个开源内核，因此受到许多人的青睐，Gecko内核的浏览器也很多，这也是Geckos内核虽然年轻但市场占有率能够迅速提高的重要原因。
- Presto： 目前Opera采用的内核，该内核在2003年的Opera7中首次被使用，该款引擎的特点就是渲染速度的优化达到了极致，也是目前公认网页浏览速度最快的浏览器内核，然而代价是牺牲了网页的兼容性。
- Webkit：苹果公司自己的内核，也是苹果的Safari浏览器使用的内核。 Webkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎，均是从KDE的KHTML及KJS引擎衍生而来，它们都是自由软件，在GPL条约下授权，同时支持BSD系统的开发。所以Webkit也是自由软件，同时开放源代码。在安全方面不受IE、Firefox的制约，所以Safari浏览器在国内还是很安全的。
- KHTML：KHTML，是HTML网页排版引擎之一，由KDE所开发。KDE系统自KDE2版起，在档案及网页浏览器使用了KHTML引擎。该引擎以C++编程语言所写，并以LGPL授权，支援大多数网页浏览标准。由于微软的Internet Explorer的占有率相当高，不少以FrontPage制作的网页均包含只有IE才能读取的非标准语法，为了使KHTML引擎可呈现的网页达到最多，部分IE专属的语法也一并支援。KHTML拥有速度快捷的优点，但对错误语法的容忍度则比Mozilla产品所使用的Gecko引擎小。
>>多种内核
傲游浏览器3:傲游浏览器3.0是国内首先尝试使用Webkit与Trident双核心的浏览器。Webkit核心将使你打开网页的速度更快，Trident核心则会带给你更好的兼容性支持。除此之外，傲游3.0目前还包括智能填表、智能地址栏、弹窗过滤、在线收藏等功能。
QQ浏览器:使用极速（Webkit）和普通（Trident）双浏览模式，设计了全新的界面交互及程序框架，目的是为用户打造一款快速、稳定、安全、网络化的优质浏览器。
搜狗高速浏览器:使用高速（webkit）和兼容（Trident）双浏览模式，保证良好兼容性的同时极大提升网页浏览速度。当采用高速模式访问网页出现问题时，可点击地址栏旁边的内核按钮直接切换内核，使用兼容性更佳的兼容模式正常浏览网页。

###HTML常见标签
>#####标题
- h1->h6 标题，由大到小，由强到弱,根据具体需求选择合适的标题标签
- p 段落，表示大段文字 ，自动带换行，尽量用p标签而不是自己通过换行来表示段落
- a 链接 链到一个地址

- img  展示一张图片  只闭合标签，最后不需要加 /
``` ![](a.png) ```
- div 语义为“一大块”，用于给页面划分区块，让结构更清晰

- ul li
>>ul: unsort list 无序列表
用于表示并列的内容
ul的直接子元素是li
可以嵌套

>
- ol li
>>ol: order list 有序序列表 用于表示带步骤或者编号的并列内容 ol的直接子元素只能是li 可以嵌套

<h2>把大象关到冰箱的步骤</h2>
<ol>
<li>把大象变小</li>
<li>打开冰箱</li>
<li>把大象塞进去</li>
</ol>

- dl dt dd
用于展示一系列 “标题:内容... ”的场景

<dl>
<dt>商品名称:</dt>
<dd>青花瓷</dd>
<dt>特征:</dt>
<dd>白色</dd>
<dd>圆口</dd>
<dt>商品介绍</dt>
<dd>这是一个年代久远的瓷器，很贵，易碎</dd>
</dl>

- button 按钮

- strong em span
>>- em 需要强调一下
>>- strong 很重要、强调性更强
>>- span 仅仅是一个标记
>

- iframe 用于嵌入一个页面 注意跨域操作问题,target可以控制跳转到新页面还是打开一个新窗口，使用name 是id选择器，跳到元素所在的位置

-table
>>用于展示表格，不要用来做布局 thead tbody tfoot可省略，浏览器会自动添加 border-collapse: collapse;用于合并边框
&lt;table> 标签定义 HTML 表格。
>> - 简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
>>- tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。
>>- 更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。
>

#####注意点
>>标签属性全小写
标签要闭合、自闭合标签可以省略 /
标题里不能有段落，段落里不能有标题
>
#####块级元素vs 行内元素
块级元素：大小只占自身所在区域
行内元素：大小占一行

HTML基础标签

1.meta标签

常见的meta标签

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

我爱编程