HTML基础知识

HTML、XML、XHTML 有什么区别?

  • 三者发展先后HTML>XML>XHTML
  • HTML:HyperText Markup Language / 超文本标记语言
  • XML: Extensible Markup Language / 可扩展标记语言
  • XHTML: Extensible Hypertext Markup Language / 可扩展超文本标记语

HTML

  • 所谓超文本,就是说它除了能标记文本,还能标记其他的内容,比如:图片,链接,音频,视频等。
  • HTML里面的标签都是预设的,不能自定义标签,语法比较松散,大小写可以混用,属性值随便你加不加引号,单引号还是双引号也随便你,标签不闭合也能运行。

XML

  • 它的表现形式就是给一个文档加一堆标签,说明每段文字是干什么的,有什么意义。方便存储、传输、分享数据,人和机器都可以很方便的阅读。
  • 语法严格有开有闭!

XHTML

  • 是HTML与XML的结合体,也可以理解为HTML除了预设的标签,也能添加自定的标签了。而且语法变得严格。
    如:
    1.对非空元素,必须使用结束标签。
    2.元素和属性名必须小写。
    3.属性值必须在引号中。
    4.属性-属性值必须完整成对的写出。像checked这样的属性名不能在不指定属性值的情况下出现。
    5.空元素必须有结束标签,或者起始标签必须以/>结束。如:<br/>或<hr></hr>。

怎样理解 HTML 语义化?

  • 根据内容的结构(内容语义化),选择合适的标签便于开发者阅读和* 出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
  • 语义化的含义就是用正确的标签做正确的事情,html语义化就是让页面的内容结构化,便于对浏览器、搜索引擎解析;在没有样式CCS情况下也以一种文档格式显示,并且是容易阅读的。使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。
    举例说明,按钮用<button> ,输入框搜索框用<input>,字体加粗直接用标签,<b></b>/<strong></strong>,字体倾斜用<i></i>,一级标题用<h1> 二级标题用<h2>,以此类推,这就是语义化

怎样理解内容与样式分离的原则?

我们先看一下下面两个例子

  1. <p style="color: red"></p>
    <p style="color: red"></p>
    <p style="color: red"></p>
    这是分离前的。

.html文件
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
.css文件
p{color:red;}
p
这是分离后的。
有没有发现代码结构精简,而且复用性变高,而且如果以后要改外观不用再HTML里面一个个的换样式,而是直接写CSS覆盖。


有哪些常见的meta标签?

  • chaset:

申明编码。

  • name:

常用的选项有keywords(关键字) ,description(网站内容描述),author(作者),robots(机器人向导)等。

  • http-equiv:

可用于代替name项,常用的选项有Expires(期限),Pragma(cache模式),Refresh(刷新),Set-Cookie(cookie设定),Window-target(显示窗口的设定),content-Type(显示字符集的设定)等。

  • content:

根据name项或http-equiv项的定义来决定此项填写什么样的字符串。


文档声明的作用?严格模式和混杂模式指什么?<!doctype html> 的作用?

  • 文档声明作用:为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。必须在 HTML 文档的第一行,这并不是一个 HTML 标签。
  • 严格模式:又称标准模式,是指浏览器按照 W3C 标准解析代码。
  • 混杂模式:又称怪异模式或兼容模式,是指浏览器用自己的方式解析代码。
  • <!DOCTYPE html> 告诉浏览器,以HTML5的方式解析、渲染当前页面。

浏览器乱码的原因是什么?如何解决?

浏览器打开页面时,将编码和字符串解析成内容;若无指明编码格式,浏览器不知道以何种方式来解析编码,以浏览器默认的编码方式进行解析,所以容易造成乱码。常见有中文字符、小语种字符错误。

解决方式:设置在meta里面charset=“UTF-8”;


常见的浏览器有哪些,什么内核?

浏览器 内核
IE Trident
Chrome Blink
firefox Gecko
Safari Webkit
Opera Presto

列出常见的标签,并简单介绍这些标签用在什么场景?

  • h1-h6 标题1~6从大到小
  • p 段落
  • a 链接到一个地方可以使锚点可以使网页
  • img 展示图片
  • div标签,用于给页面划分区块,让结构更清晰
  • ul li 无序列表,可以嵌套ul的直接子元素是li,里面不可以有p,h等标签
  • ol li 有序列表
  • dl dt dd 用于展示一系列“标题:内容....”的场景
  • <button> </button>按钮
  • iframe 用于嵌入一个页面,需要注意跨域操作问题
  • table 用于展示表格,tr为行,td为列

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

推荐阅读更多精彩内容

  • HTML、XML、XHTML 有什么区别? 因为相同之处从字面可以看出,他们都是ML,都是标记语言(Markup ...
    DCbryant阅读 279评论 0 2
  • 课程任务 1.HTML,XML,XHTML有什么区别 HTML,超文本标记语言,语法较为松散不是严格的标记语言。X...
    Jingle_hunger阅读 299评论 0 1
  • 1. HTML、XML、XHTML 有什么区别 HTML即是超文本标记语言(Hyper Text Markup L...
    agui526阅读 274评论 0 1
  • 一、HTML、XML、XHTML 有什么区别? 首先,我们来看看每一项在维基百科中第一句话介绍: HTML: 超文...
    SHININGJACK阅读 1,369评论 0 2
  • HTML,XML,XHTML的区别 HTML,超文本标记语言,语法比较松散,不严格的Web语言。XML,可扩展标记...
    饥人谷_思铭阅读 284评论 0 2