HTML的一些基础知识

1.HTML VS XML VS XHTML
HTML译为超文本标记语言,语法比较松散,是一种不严格的web语言。
XHTML是可扩展超文本标记语言,基于XML,作用与HTML类似,但语法更严格参考。
XML是扩展标记语言,用于存储数据和结构参考。

2.HTML语义化是什么意思?
(1)指的是机器在需要更少的人类干预的情况下能够研究和收集信息,让网页能够被机器理解,最终让人类受益。
(2)主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用
(3)根据内容的结构化(内容[语义化]选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

3.内容与样式的分离
现在的网页一般分为三部分:HTML——结构,CSS——渲染,javascript——行为。
内容也就是html,样式也就是css。所以内容和样式的分离,就是指在网页编码的过程中,要将html和css两大部分分开。
实现方法:写HTML的时候先不管样式,重点放在HTML的结构和语义化上,让HTML能够体现页面结构或者内容,然后进行 css 样式设置和渲染,写JS的时候,尽量不要用JS去直接操作样式,而是通过给元素添加删除class来控制样式变化(即行为分离)。
好处:
浏览器加载网页页面速度变快。分离原则下,大部分页面代码写在了CSS当中,页面体积容量变得更小。
网页修改设计时,效率、省时。根据html标签内ID或class的标记,到CSS里找到相应的ID或class,可以快速替换指定位置的样式,不会破坏页面架构和其他部分的样式。
典型的应用就是网页换肤,使用相同的 html 结构,不同的 css 样式。
更好地被搜索引擎收录seo更好。基于内容与样式分离的原则,html的语义化就是首要考虑的,网页中语义化的标签代码就会更加适合搜索引擎。
css样式的分离,它可以根据不同的浏览器,达到显示效果的统一。保证网页架构不变形的前提下,放心在不同浏览器渲染显示样式。

4.常见的meta标签
(1)定义和用法
<meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。
<meta> 标签位于文档的头部,不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。
(2)一些常见的meta标签

<meta http-equiv="keywords" content="关键字1,关键字2,...">

<meta http-equiv="description" content="网页描述">

<meta name="renderer" content="webkit|ie-comp|ie-stand">

<meta name="renderer" content="webkit">

<meta name="renderer" content="ie-comp">

<meta name="renderer" content="ie-stand">

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >

<meta http-equiv="Window-target" content="_top">

<meta http-equiv="Refresh" content="2;URL=http://">

<meta http-equiv="pragram" content="no-cache">

<meta http-equiv="cache-control" content="no-cache, must-revalidate">

<meta http-equiv="expires" content="0">

<meta name="format-detection" content="telphone=no, email=no"/>

<meta name="apple-mobile-web-app-status-bar-style" content="black"/>


<meta http-equiv="Cache-Control" content="no-siteapp" />

<meta http-equiv="cache-control" content="no-cache" />

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />

<meta content="yes" name="apple-mobile-web-app-capable" />

<meta content="black" name="apple-mobile-web-app-status-bar-style" />

5.文档声明的作用?严格模式和混杂模式指什么?<!doctype html> 的作用?
<!doctype>标签用来声明文档对象模型,用来告诉浏览器应该使用哪种方式来解析渲染页面。严格模式就是使用<!doctype>标签来显式声明该用哪种方式来渲染页面,混杂模式即不加<!doctype>标签,允许浏览器使用自己的方式来渲染页面。
<!doctype html>即就是声明使用HTML5来解析渲染页面。

6.浏览器乱码的原因是什么?如何解决
(1)乱码产生的根本原因是你保存的编码格式和浏览器解析时的解码格式不匹配导致的。
(2)乱码一般是英文以外的字符才会出现。
解决办法:首页,在文件保存的时候你自己要清楚是用哪种编码方式保存的。如果你的文件是保存为utf-8格式,那么一定要在html 的 <head>里添加<meta charset="utf-8">,这句话的意思是告诉浏览器在打开这个页面的时候不要去猜了,直接用utf-8去解码。 同理,如果你的文件保存为gbk格式,一定在文件里添加<meta charset="gbk">

7.常见的浏览器有哪些,什么内核?
(1)Trident内核代表产品Internet Explorer,又称其为IE内核。Trident(又称为MSHTML),是微软开发的一种排版引擎。使用Trident渲染引擎的浏览器包括:IE、傲游、世界之窗浏览器、Avant、腾讯TT、Netscape 8、NetCaptor、Sleipnir、GOSURF、GreenBrowser和KKman等。

(2)Gecko内核代表作品Mozilla FirefoxGecko是一套开放源代码的、以C++编写的网页排版引擎。Gecko是最流行的排版引擎之一,仅次于Trident。使用它的最著名浏览器有Firefox、Netscape6至9。

(3)WebKit内核代表作品Safari、Chromewebkit 是一个开源项目,包含了来自KDE项目和苹果公司的一些组件,主要用于Mac OS系统,它的特点在于源码结构清晰、渲染速度极快。缺点是对网页代码的兼容性不高,导致一些编写不标准的网页无法正常显示。主要代表作品有Safari和Google的浏览器Chrome。

(4)Presto内核代表作品OperaPresto是由Opera Software开发的浏览器排版引擎,供Opera 7.0及以上使用。它取代了旧版Opera 4至6版本使用的Elektra排版引擎,包括加入动态功能,例如网页或其部分可随着DOM及Script语法的事件而重新排版。

8。列出常见的标签,并简单介绍这些标签用在什么场景
html:我们页面的总包商
head:头部定义一些总体内容,比如浏览器标题,编码格式,样式文件引用
title:定义浏览器标题
meta:定义关于 HTML 文档的元信息,诸如例子中的编码格式,IE渲染模式(可以解决大部分IE兼容问题)
link:链接外部资源,如上图中链接浏览器标题旁的小图标,也经常用来链接css样式文件
style:在标签内定义css样式
body:我们肉眼看到的内容显示区域
script:在标签内定义js代码
br:换行符
h1~h6:不同字体大小的标题标签(块元素,什么是块元素?下篇文章详细介绍)
p:段落标签(块元素)
hr:水平分割线(块元素)
b:字体加粗(行元素,什么是行元素?下篇文章详细介绍)
strong:字体加粗,同b标签(行元素)
blockquote:引用标签,如果你的页面中需要引用一些文章内容时,使用该标签(块元素,细心的同学已经发现了块元素与行元素的一点区别了)
del:删除标签,标记废除的内容,通常用来标记原价,而优惠价则正常显示(行元素)
ins:下划线填写标签,标记可变的内容,或需要输入的内容(行元素)
em:斜体标签,用来强调(行元素)
i:斜体标签,同em(行元素)
form:表单包裹标签,里面的内容一般都是表单元素,通常结合table一并使用(块元素)
table:表格标签(table比较特殊,单独属于table元素,效果与块元素差不多)
thead:表格头部
tbody:表格主体内容部分
tr:表格行
th:表格单元格,一般用于显示标题,默认加粗样式
td:表格单元格,一般用于存放信息或输入框
input:各类表单输入元素,如上图中的输入框,单选框,复选框,隐藏的输入框以及按钮(行元素)
select:下拉框,比如用于选择省市区,民族等(行元素)
textarea:多行输入框,一般提供给用户输入简介,理由,多行文本等(行元素)
label:表单的提示信息,一般还用于包裹单选框,复选框使用,让用户点击文字也能实现勾选
img:图片标签,这个很简单,就是引用一个图片资源进行展示
ul:无序列表标签,内部只能是li标签(块元素)
li:列表项内容标签,包裹在ul中
dl:全称definition list,定义列表,即有一个标题,有一些解释信息的标签,如上图中的北京是标题,下面两行是解释(块元素)
dt:结合dl标签,一般用于显示标题
dd:结合dl标签,一般位于dt下面,用于解释dt包裹的标题内容
div:最典型并常用的块元素
span:最典型并常用的行元素

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

推荐阅读更多精彩内容