HTML基础

HTML、XML、XHTML

  • HTML:超文本标记语言 (Hyper Text Markup Language),用于显示数据,使用标记标签来描述网页的一种语言。HTML语法较为松散。标签不区分大小写,标签甚至不必成对出现。
  • XML:可扩展标记语言(EXtensible Markup Language),用于传输和存储数据,需要自行定义标签的一种标记语言。XML语法较为严格。标签必须小写,标签也必须成对地出现。
  • XHTML:可扩展超文本标签语言(EXtensible HyperText Markup Language),以 XML 重构的 HTML,继承了XML严格的语法。是更严格更纯净的 HTML 版本。

HTML 语义化

HTML语义化是选择合适的标签来把HTML内容结构化,使得开发者阅读和写出更优雅的代码的同时,让浏览器的爬虫和机器很好的解析。

优点

  • 有利于SEO,有助于爬虫抓取更多的有效信息,爬虫是依赖于标签来确定上下文和各个关键字的权重
  • 语义化的HTML在没有CSS的情况下也能呈现较好的内容结构与代码结构
  • 方便其他设备的解析
  • 便于团队开发和维护

内容与样式分离

本意是:一篇文档的实际内容和意义,与这篇文档呈现给读者的方式(样式),是相互独立的。
在网页设计中,将页面通过HTML和CSS分开,不仅可以更清晰地分别表达样式或者内容,更重要的是这一分离使得二者不再耦合,样式变得可复用、组件化。

优点

  • 利于协同工作。样式往往由设计师负责,而内容往往由前端工程师负责。这样的分离有利于他们的分工。
  • 样式可复用。引入样式时,可以对不同的样式文件进行组合,便于网站风格的建立和管理。

meta标签

meta标签用于定义关于 HTML 文档的的元信息(meta-information)。通过一些字段信息来描述一下当前网页,以便浏览器和搜索引擎在访问到此网页的时候,可以通过这些描述信息来知道如何去解析此网页数据。
<meta> 标签不包含任何内容,通过属性定义了与文档相关联的名称/值对。
如:

  • <meta charset="utf-8"> 标明文档编码
  • <meta name="author" content="Jiaz"> 注明文档作者
  • <meta name="description" content="This page is about the meaning of science, education,culture."> 注明了当前网页的主要内容
  • <meta name="keywords" content="HTML,ASP,PHP,SQL"> 注明了页面关键词

!DOCTYPE 文档声明

<!DOCTYPE> 声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。定义文档是否可以使用一些不被W3C推荐的标签,以及是否可以使用框架。
浏览器从服务端获取网页后会根据文档的 DOCTYPE 定义显示网页,如果文档正确定义了 DOCTYPE,浏览器则会进入严格模式(Standards Mode),否则浏览器会进入怪异模式或混杂模式(Quirks mode)。
浏览器开发初期W3C倡导的网页标准并不流行,因此浏览器有独特的对网页标签或属性的解析模式,随着日后网页标准的流行,浏览器增加了对新标准的支持(严格模式),但又没有放弃对原有模式的兼容(混杂模式),这就是浏览器多种表现模式的来源。

  • 在 HTML 4.01 中有三种 <!DOCTYPE> 声明。
    • HTML 4.01 Strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    • HTML 4.01 Transitional <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    • HTML 4.01 Frameset <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

  • 在 HTML5 中只有一种:<!doctype html>

在每个 HTML 页面的第一行添加声明,能够确保在每个浏览器中拥有一致的展现。

编码格式

在计算机内部,所有的信息最终都表示为一个二进制的字符串。上个世纪60年代,美国制定了一套字符编码,对英语字符与二进制位之间的关系,做了统一规定。这被称为ASCII码,一直沿用至今。

  • 乱码

英语用128个符号编码就够了,但是用来表示其他语言,128个符号是不够的。所以世界上出现了多种编码方式,比如,简体中文常见的编码方式是GB2312。
同一个二进制数字通过不同的编码方式可以被解释成不同的符号。因此,要想打开一个文本文件,就必须知道它的编码方式,否则用错误的编码方式解读,就会出现乱码。

  • 统一

互联网的普及,强烈要求出现一种统一的编码方式,将世界上所有的符号都纳入其中。每一个符号都给予一个独一无二的编码,那么乱码问题就会消失。这就是Unicode,就像它的名字都表示的,这是一种所有符号的编码。
UTF-8就是在互联网上使用最广的一种Unicode的实现方式。

  • 实现

在网页中通过明确声明字符编码,能够确保浏览器快速并容易的判断页面内容的渲染方式。这样做的好处是,可以避免在 HTML 中使用字符实体标记(character entity),从而全部与文档编码一致。

浏览器

浏览器是一种用于检索并展示万维网信息资源的应用程序。这些信息资源可为网页、图片、影音或其他内容,它们由统一资源标志符标志。

主流网页浏览器有Mozilla Firefox、Internet Explorer、Microsoft Edge、Google Chrome、Opera及Safari。

浏览器内核主要指的是浏览器的渲染引擎,2013 年以前,代表有 Trident(IE),Gecko(firefox),Webkit(Safari chrome 等)以及 Presto(opera)。2013 年,谷歌开始研发 blink 引擎,chrome 28 以后开始使用,而 opera 则放弃了自主研发的 Presto 引擎,投入谷歌怀抱,和谷歌一起研发 blink 引擎,国内各种 chrome系的浏览器(360、UC、QQ、2345 等等)也纷纷放弃 webkit,投入 blink 的怀抱。

HTML标签

  • HTML 文档和 HTML 元素是通过 HTML 标签进行标记的
  • HTML 标签由开始标签和结束标签组成
  • 开始标签是被括号包围的元素名
  • 结束标签是被括号包围的斜杠和元素名
  • 某些 HTML 元素没有结束标签

常见的标签

html限定了文档的开始点和结束点。

head文档的头部,描述了文档的各种属性和信息,不会作为内容显示出来。

body文档的主体,包含文档的所有内容(比如文本、超链接、图像、表格和列表等等。)

title定义文档的标题。<title> 标签是 <head> 标签中唯一要求包含的东西。

style用于为 HTML 文档定义样式信息,通常位于 head 部分中

script用于定义客户端脚本,比如 JavaScript。既可以包含脚本语句,也可以通过 src 属性指向外部脚本文件。

h1~h6 标题 ,<h1>标题</h1>表示一级标题, h2表示二级标题……

p 段落,<p>一段文字</p>表示一段文字。

a 超链接,<a href="#"></a>表示链接到一个地址。

img 图片,![](a.jpg)用于展示图片。

div 块元素,<div>...</div>把文档分割为独立的、不同的部分。

ul 无序列表,ol 有序列表, li列表项目,
<ul> <li>...</li> <li>...</li> </ul>
<ol> <li>...</li> <li>...</li> </ol>
用于表示并列的内容.

dl 项目列表, dt 项目标题,dd项目内容
<dl> <dt>标题1:</dt> <dd>内容1 </dd> <dt>标题2:</dt> <dd>内容2 </dd> <dt>标题3:</dt> <dd>内容3</dd> </dl>
定义了定义列表

iframe 嵌入页面, <iframe src="#"></iframe>创建包含另外一个文档的内联框架

table 表格,tr定义行 th表头单元格 td标准单元格
<table> <tr> <th>表头1</th> <th>表头2</th> </tr> <tr> <td>项目1</td> <td>项目2</td> </tr> </table>

button 按钮,<button type="button">Click Me!</button>

em强调, strong更强的强调。

span 组合行内元素,以便通过样式来格式化它们。

header定义文档的页眉(介绍信息)。

nav定义导航链接的部分。

section定义文档中的节(section、区段)。比如章节部分。

footer定义文档的页脚。

推荐阅读更多精彩内容

  • 第一节:HTML基础 什么是浏览器 浏览器是网页运行的平台,常用的浏览器有IE、火狐(Firefox)、谷歌(Ch...
    单行道MY阅读 945评论 0 14
  • 1.meta标签 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述...
    姚小帅阅读 189评论 0 1
  • HTML基础 本文包括 HTML基本知识与结构 HTML常见标签 标签写法与嵌套的讨论 HTML、CSS、java...
    廖少少阅读 1,451评论 2 21
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 12,862评论 1 91
  • 课程任务 1.HTML,XML,XHTML有什么区别 HTML,超文本标记语言,语法较为松散不是严格的标记语言。X...
    Jingle_hunger阅读 144评论 0 1
  • 主坐幽篁林,客居沙中丘。 落花犹可闻,闲语笑谈中。
    紫鬮阅读 69评论 0 2
  • 下午四点二十八分,一病人皮试阳性,正在我和他解释时,120电话响起,一病人晕倒,轮到我出诊了。一线班出诊了,我这个...
    燕尾无声阅读 165评论 0 1
  • 前言 傍晚归家,在故乡的小镇车道上看到了难得壮观的一幕,云是自然这画家绘在画布天上的精灵,这一刻的天是云的归宿...
    风饮雨阅读 138评论 0 0
  • 我叫赵一博 我爱的人是方琳 半个月前我们因为晚上谁刷碗的问题大吵一番,她蹲在地上一边清理被摔碎的碗,一边流泪。我坐...
    见殊阅读 361评论 1 1