HTML标签、认识浏览器

HTML标签、认识浏览器

1.什么是HTML标签

• 那么标签有哪些呢
  • 块级标签
  • 行内标签
  • 行内块标签
  • 按作用分类（太多懒得加锚点QAQ）

2.什么是浏览器

• 内核
• 主流浏览器

什么是html标签

超文本标记语言（外国语简称：HTML）标记标签通常被称为HTML标签，HTML标签是HTML语言中最基本的单位，HTML标签是HTML（标准通用标记语言下的一个应用）最重要的组成部分。
HTML标签的大小写无关的，例如“主体”跟表示的意思是一样的，推荐使用小写。(来自于百度百科)


我认为标签相当于是html网页内容的框架，是给你要写的内容加上一些标签独有的属性，让你写的文字可以达成各种最基本的效果。

那么标签有哪些呢

如果按配套标签的个数可以将标签分为单标签与双标签。
顾名思义，单标签就是只有一个标签就能生效，而双标签必须要两个在一起才能配套使用。
而双标签页分为两种，是并列与包含关系。
并列关系就相当于是兄弟关系，而包含关系就相当于是父子关系。
而如果按照标签的属性来分类，可以将其分为块级标签、行内标签、行内块标签与其他标签

块级标签

块状标签：标签独占一行，可指定宽、高。
特性：
能够识别宽高
margin和padding的上下左右均对其有效
可以自动换行
多个块状元素标签写在一起，默认排列方式为从上至下
可以使用margin:0 auto居中对齐

常用的块状元素有：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>、<form>

行内标签：

内联(行级)标签：标签在一行内，宽度与高度由内容决定，只有在内容超过HTML的宽度时，才会换行。
特性：
无法设置宽高
margin上下无效，只有左右有效果，padding都有效果，会撑大空间；box-sizing:border-box;无效，因为该属性针对盒模型。
不会自动换行

常用的内联元素有：

<a>、<span>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

行内快标签：

行内块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)。
特性：
不会自动换行
能够设置宽高
默认排列方式为从左到右
可以使用text-align:center使内容相对于父盒子水平居中对齐，例如img标签，可以使用text-align:center，相对父盒子居中对齐、margin:0
auto无效
水平排列，但所有元素默认会有1个空格的间隙，因为元素之间在html中书写有回车换行，浏览器解析会将其解析成一个空格。

常用的内联块状元素有：

<img>、<input>

而如果按作用来分类，会有超多的分类

按作用分类

1、标题标签

<h1>---<h5>

2、段落和换行标签

<p></p>与<br/>或<br>

3、文本格式化标签

加 粗 <strong></strong>或<b></b>
倾 斜 <em></em>或<i></i>
删除线 <del></del>或<s></s>
下划线 <ins></ins>或<u></u>

4、div 和 span 标签

<div>是一个块级元素。这意味着它的内容自动地开始一个新行。
实际上，换行是 <div> 固有的唯一格式表现。
可以通过 <div> 的 class 或 id 应用额外的样式。
不必为每一个 <div> 都加上类或 id，虽然这样做也有一定的好处。
可以对同一个 <div> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。
这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。

例子:<p><span>some text.</span>some other text.</p>
提示：请使用 <span> 来组合行内元素，以便通过样式来格式化它们。
注释：span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。

5、图像标签

img 元素向网页中嵌入一幅图像。
请注意，从技术上讲，<img> 标签并不会在网页中插入图像，
而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。
<img> 标签有两个必需的属性：src 属性 和 alt 属性。

6、超链接标签

<a> 标签定义超链接，用于从一张页面链接到另一张页面。
<a> 元素最重要的属性是 href 属性，它指示链接的目标。
在所有浏览器中，链接的默认外观是：
未被访问的链接带有下划线而且是蓝色的
已被访问的链接带有下划线而且是紫色的
活动链接带有下划线而且是红色的

7、表格标签

<table> 标签定义 HTML 表格。
简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。
更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素
8、列表标签

<ol> 定义有序列表。
<ul> 定义无序列表。
<li> 定义列表项。
<dl> 定义定义列表。
<dt> 定义定义项目。
<dd> 定义定义的描述。

9、表单标签

<form> 标签用于为用户输入创建 HTML 表单。
表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。
表单用于向服务器传输数据。

什么是浏览器

**浏览器**：浏览器是用来检索、展示以及传递Web信息资源的应用程序。Web信息资源由统一资源标识符( Uniform Resource Identifier，URI)所标记，它是一张网页、一张图片、一段视频或者任何在Web上所呈现的内容。使用者可以借助超级链接( Hyperlinks)，通过浏览器浏览互相关联的信息。

内核

1、Trident内核
代表产品为Internet Explorer，又称其为IE内核。Trident（又称为MSHTML），是微软开发的一种排版引擎。使用Trident渲染引擎的浏览器有：IE、傲游、世界之窗浏览器、Avant、腾讯TT、Netscape 8、NetCaptor、Sleipnir、GOSURF、GreenBrowser和KKman等 。
2、Gecko内核
代表作品为Mozilla Firefox。Gecko是一套开放源代码的、以C++编写的网页排版引擎，是最流行的排版引擎之一，仅次于Trident。使用它的最著名浏览器有Firefox、Netscape6至9 。
3、WebKit内核
代表作品有Safari、Chrome。WebKit是一个开源项目，包含了来自KDE项目和苹果公司的一些组件，主要用于Mac OS系统，它的特点在于源码结构清晰、渲染速度极快。缺点是对网页代码的兼容性不高，导致一些编写不标准的网页无法正常显示 。
4、Presto内核
代表作品Opera。Presto是由Opera Software开发的浏览器排版引擎，供Opera 7.0及以上使用。它取代了旧版Opera 4至6版本使用的Elektra排版引擎，包括加入动态功能，例如网页或其部分可随着DOM及Script语法的事件而重新排版 。

主流浏览器

主流的浏览器分为IE、Chrome、Firefox、Safari等几大类，它们具有以下特点：
1、IE浏览器。IE浏览器是微软推出的Windows系统自带的浏览器，它的内核是由微软独立开发的，简称IE内核，该浏览器只支持Windows平台。国内大部分的浏览器，都是在IE内核基础上提供了一些插件，如360浏览器、搜狗浏览器等 。
2、Chrome浏览器。Chrome浏览器由Google在开源项目的基础上进行独立开发的一款浏览器，市场占有率第一，而且它提供了很多方便开发者使用的插件，因此该浏览器也是本书开发的主要浏览器。Chrome浏览器不仅支持Windows平台，还支持Linux、Mac系统，同时它也提供了移动端的应用（如Android和iOS平台） 。
3、Firefox浏览器。Firefox浏览器是开源组织提供的一款开源的浏览器，它开源了浏览器的源码，同时也提供了很多插件，方便了用户的使用，支持Windows平台、Llnux平台和Mac平台 。
4、Safari浏览器。Safari浏览器主要是Apple公司为Mac系统量身打造的一款浏览器，主要应用在Mac和iOS系统中 。