HTML知识点

关于html

HTML、XML和XHTML

html是一种超文本标记语言,通过一些字符串来对网页结构进行描述,浏览器对这些字符串进行编译从而展示出来DOM树。

xml是一种可扩展标记语言,相对于html语法更严谨,主要应用于存储数据和结构。

xhtml是一种可扩展超文本标记语言,基于xml,和html类似,但语法更严谨。

HTML语义化

语义化 HTML 就是选择合适的标签、使用合理的代码结构来编写HTML的方式,使代码更具可读性,也使得浏览器的爬虫和机器能对代码更好地解析。

要实现HTML的语义化,就要求开发者掌握常用的HTML标签,理解各种标签所代表的含义,在不同的场景能使用合适的标签,尽量不使用没有语义信息的标签。

语义化带来的是更清晰的页面结构,使页面可读性更强;更清晰的代码结构,更利于开发团队的开发和维护;更好的适应性,可以支持更多的设备的不同表现形式;与机器更良好的沟通,使浏览器更容易渲染表现,也使搜索引擎更容易获取有效信息。

内容和样式分离

写 HTML 的时候不管样式, 重点在HTML的结构和语义化上,让 HTML 能体现页面结构或者内容。之后再去用CSS写样式。

HTML 内不允许出现属性样式,尽量不要出现行内样式。

写 JS 的时候,尽量不要用 JS 去直接操作样式,而是通过给元素添加删除class来控制样式变化。

页面展现的所有样式,都由CSS来负责实现。

分离优点:更易于维护,让其他开发者更易阅读,更规范。使页面逻辑更清晰。


常见meta

<meta charest="UTF-8">   表示编码格式为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="我很好啊"> 利于搜索排名

文档声明

文档声明的作用是告诉浏览器用何种方式渲染页面。

严格模式是指用doctype告诉浏览器用何种方式渲染页面;

混杂模式是指不用doctype告诉浏览器,让其自行解析渲染。

<!doctype html>是指告诉浏览器用最新的html5规范渲染页面。

浏览器乱码

浏览器出现乱码一般是由于在制作页面时使用非英文字符时,保存的编码格式与浏览器解析时的解码格式不匹配。为了解决这个问题,就要在页面保存时就在HTML的里添加来声明编码格式,来告诉浏览器应该用什么解码格式来解码,例如使用UTF-8来编码的页面,添加<meta charset="UTF-8">来告诉浏览器使用UTF-8格式来解码,就不会出现乱码了。

常见浏览器

常见浏览器有IE、Google Chrome、Safari、opera、Firefox等,还有世界之窗、傲游浏览器、360安全浏览器、搜狗告诉浏览器、QQ安全浏览器、猎豹安全浏览器等。

Trident(IE内核):IE浏览器,很多国内浏览器,以及很多双核浏览器的其中“一核”都是Trident。

Gecko:FireFox浏览器等。

Webkit:Chrome浏览器,Safari浏览器等。

Chromium/Blink:Chromium fork 自开源引擎 WebKit,却把 WebKit 的代码梳理得可读性提高很多,Chrome浏览器就使用Chromium内核,搜狗、360、QQ浏览器等等双核浏览器的一核都是Chromium。2013年谷歌宣布 Chromium 项目中研发 Blink 渲染引擎,内置于 Chrome 浏览器之中。

Presto:Opera浏览器先前使用的内核,Opera 在 2013 年 2 月宣布放弃 Presto后使用 WebKit 分支的 Chromium 引擎作为自家浏览器核心引擎,在 Chrome 推出 Blink 引擎之后,Opera也转而使用Blink 作为浏览器核心引擎。

目前移动端系统内置浏览器的内核, iOS 平台主要是 WebKit,

Android 4.4 之前的系统浏览器内核是 WebKit;Android4.4 系统浏览器切换到了Chromium,内核是 Webkit 的分支 Blink;Windows Phone 8 系统浏览器内核则是 Trident。

常见易错标签

<q></q>定义短引用

<iframe name="" src="url"></iframe>在页面中嵌入一个页面。

<a target=""></a>当target的值为:

     _blank在新窗口中打开被链接文档。

     _self默认。在相同的框架中打开被链接文档。

     _parent在父框架集中打开被链接文档。

     _top在整个窗口中打开被链接文档。

      framename在指定的框架中打开被链接文档。

其中href的锚点也可是页面中的某个锚点,比如#div     

<dl><dt></dt><dd></dd></dl>  表示定义列表,定力列表的项目以及项目中的内容

常见的标签:

h1-h6 标题标签

p 段落标签

a 链接标签

href="#about" 跳转到id为about的位置

href="/test" 跳转到完整域名+test

img 图片链接

alt 图片无法展示时,显示内容,便于视力障碍人士使用

div 块标签

ul 无序列表

li ul的子标签,ul下的直接元素必须是li

ol 有序列表

li ol的子元素

dl 展示有标题和内容的自定义表格

dt 标题子标签

dl

button 按钮标签

strong 强调元素

em 中层强调元素

span 标记一段行内元素

iframe 在当前页面嵌入一个页面

table 用于展示表格,不要用来做布局

thead、tbody、tfoot 一般不用写

tr 代表表格的一行

th 代表表格第一行的列内容

td 代表表格的一列

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,378评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,356评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,702评论 0 342
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,259评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,263评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,036评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,349评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,979评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,469评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,938评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,059评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,703评论 4 323
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,257评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,262评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,485评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,501评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,792评论 2 345

推荐阅读更多精彩内容

  • HTML、XML和XHTML的区别 HTML,超文本标记语言,被设计用来显示数据,标记内容的格式,“超文本”体现在...
    佳联阅读 342评论 0 0
  • 什么是HTML? HTML指的是超文本标记语言 HTML不是一种编程语言,而是一种标记语言 标记语言是一套标记标签...
    Echolate阅读 434评论 0 1
  • HTML、XML、XHTML 的区别: HTML,超文本标记语言,是语法较为松散的、不严格的Web语言。 XML,...
    石林涛阅读 363评论 0 2
  • 1、HTML、XML、XHTML 有什么区别 HTML是超文本标记语言(Hyper Text Markup Lan...
    imtns阅读 269评论 0 1
  • 1、HTML、XML、XHTML 有什么区别? HTML是超文本标记语言(Hyper Text Markup La...
    不是我的简书阅读 642评论 0 0