1：初识 html，一文搞懂 HTMl 骨架标签都有哪些含义及浏览器内核

前端史塔克

关注

发布于: 4 小时前

html 基础篇

初识 html（大概两篇），下面会从浏览器以及 web 标准和相关标签来说明整个 html 结构和由来。注：本系列文章适合新手小白入门学习。文章如有疏漏请指正。

浏览器的内核

在前端的学习中一般使用的都是 Chrome 浏览器。不过在整个浏览器中还有非常多的其他浏览器内核：通常指的是浏览器的核心技术（负责读取网页相关内容）

IE 的内核：Trident————ie、猎豹、360 浏览器、百度浏览器等

firefox 的内核：Gecko————firefox

safari 的内核：webkit———— 很多人错误的把 webkit 叫做 chrome 内核

Chrome 的内核：Chromium / Blink————在 Chromium 项目中研发 Blink 渲染引擎内置于 Chrome 浏览器中，值得注意的是 Blink 其实是 webkit 的分支，大部分国内浏览器都是基于 Blink 内核而进行二次开发的。

Opera 的内核：Blink

安卓一般使用率最高的是 Webkit 内核，大部分国产浏览器都是基于 webkit 二次开发的，ios 大部分都是 Safari

web 标准

一般在写页面的话，需要遵循 web 标准，web 中标准分为三部分，结构、表现、行为

结构：网页元素————HTML

表现：外观样式————CSS

行为：交互————javaScript

注意：对于初学者来讲，大部分初学者都会觉得 javaScript 比较重要，其实不然，自从 sass 这类的解释器出来之后，相当多的公式和语法糖对于新手来讲来十分重要

HTML 骨架

<html>  <head>    <title></title>  </head>  <body></body></html>

复制代码

基本的 html 骨架就是这样的 html：HTMl 标签——页面中最大的标签，称为：根标签

head：文档的头部——head 标签中设置 title

title：文档的标签——网页的标题

body：文档的主体——里面包含一般的网页内容

除去基本的骨架之外，在图中还有标注的 1、2、31：<!DOCTYPE html>——表示的是 HTML5 的版本号，只能写在页面的最前面

2：表示的是目前页面语言为英文，也可以将”en“ 更换为 ”zh-CN“ 表示的是中文

3：代表的是编码格式为 utf-8，是一个国际的编码，目的就是让所有人都能看懂页面内容。因为计算机到最后会将所有的页面内容按照编码之后呈现。国标码：GB2312

html 标签

   <!-- 段落标签 p -->   <p>银鞍照白马</p>   <p>飒沓如流星</p>   注意：段落标签是占据一行，中间间距较大。

复制代码

因为时间关系就演示这一个其余的可以在 vsCode 或者 sublime 中自己可以试试常用的标签如下：水平线：< hr />

换行：< br />

标题标签：< hx > </ hx >

布局标签： < div >、< span > 这两个在以后的工作中会大量使用

文本格式化标签

  <!-- 加粗 -->  <b>加粗显示</b>  <!-- （XHTML推荐strong） -->  <strong>加粗显示</strong> 
  <!-- 斜体 -->  <i>斜体</i>  <!-- （XHTML推荐em） -->  <em>斜体</em>
  <!-- 删除 -->  <s>删除</s>  <!-- （XHTML推荐del） -->  <del>删除</del>
  <!-- 下划线 -->  <u>下划线</u>  <!-- （XHTML推荐ins） -->  <ins>下划线</ins>

复制代码

图像标签< img />在 img 标签中有以下属性 src：url 地址——图像路径 alt：文本——图像不能显示时替换文本 title：文本——鼠标悬停在图像时显示的文本 width：像素——设置的图像宽度 height：像素——设置的图像高度注意：图片的宽度和高度只能设置一个，另一个是等比例放大的 border：数字——设置图像边框宽度（一般不用）

注意：在标签中可以写多个属性，没有顺序之分，但是每个属性需要空格分开，采用键值对形式 key=”value“ 格式

链接标签

<a href="https://www.xxx.com" target="_blank"></a>

复制代码

链接标签一般用 a 来代替，文中的 target 表示的是在点击之后会新出现一个页面，一般默认的是 self，在原本的页面中更换内容，如果指定 taget=”_blank“ 表示的是在新窗口打开页面内容，可以手动在编辑器中试一试

好了，一般的页面标签和整体的页面结构基本上都是这些了。如果哪里有不懂的话欢迎留言。需要注意的是双标签一定要有闭合标签也就是末尾的 </>，单标签需要在末尾加上 < /> 养成良好的习惯！

扩展阅读

锚点定位：锚点定位指的是，如果网页中的内容较多，想让用户体验更好，快速的找到某个标题的话，可以使用锚点定位

   <a href="#id">跳转到白马！</a>   <p id="id">银鞍照白马</p>   <hr />   <p>飒沓如流星</p>

复制代码

在上述的代码中，银鞍照白马中 id=”id“，而 a 标签中的 href 锁定的是 #id（两者的名字相同），表示的是只要 p 这个内容不管在页面的任何位置，只要点击 a 标签之后就直接可以跳转到 p 的位置。

常见的一些特殊字符

空格：&nbsp；大于：&gt；小于：&lt；注意：后面需要 ” ； “ 号是英文状态下的。

发布于: 4 小时前阅读数: 5

原文链接:【http://xie.infoq.cn/article/542e064afb47df74200570c38】。文章转载请联系作者。

前端史塔克

关注

还未添加个人签名 2019.09.04 加入

普及从学校到工作怎么快速转变，更高效学习前端知识及后续发展趋向，更好快速的融入到工作中关注公号：前端史塔克

发布

暂无评论

创作场景

1：初识 html，一文搞懂 HTMl 骨架标签都有哪些含义及浏览器内核

html 基础篇

浏览器的内核

web 标准

HTML 骨架

html 标签

扩展阅读

前端史塔克

评论