HTML基础(一)

1.HTML、XML、XHTML的区别。

HTML:

超文本标记语言。语法松散、不严谨。在大小写方面和闭合方面不报错,可能会导致浏览器误解。

XML:

可扩展的标记语言。主要用于储存数据和结构。标签可自定义。

XHTML:

可扩展超文本标记语言。基于XML和HTML。比HTML更加严谨。


2.HTML的语义化

选择合适的标签、使用合理的代码结构。便于开发者阅读。同时让浏览器的爬虫和机器更好的解析网页。


3.内容、样式与行为的分离原则

写HTML时。重点放在HTML的结构和语义化上。让HTML先能体现页面结构或者内容。之后在写样式。
写JS时。尽量不要直接操作样式,而是通过修改class熟悉。
HTML内不允许出现熟悉样式。尽量不要出现行内样式。


4.常见的meta标签

    <meta charset="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="最有爱的前端学习社区">

<meta charset="utf-8">保存时的编码格式。在浏览器打开时。告诉浏览器用什么编码格式进行解析。在中文页面中。不告知浏览其用什么编码格式解析。最容易出现乱码。

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">在双核浏览器中。或者装有插件的IE浏览器中。使用chrome的内核方式进行渲染。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">在移动端浏览时。使用这句使得展现更好。
<meta name="keywords" content="前端 饥人谷"><meta name="description" content="最有爱的前端学习社区">对于搜索引擎优化有好处。能将你的页面的关键词等显示在搜索结果中。


5.文档声明的作用。严格模式和混杂模式。<!doctype html>的作用。

<!doctype html>:doctype表示文档的对象、模型。表示用HTML5的标准来解析页面。
严格模式:浏览器按W3C标准解析执行代码。
混杂模式:不加文档声明,浏览器将用比较宽松的方式进行页面渲染和解析。在不同的浏览器可能有不同的表现。


6.浏览器乱码原因和解决方法。

浏览器出现乱码的大多数原因是编码问题。如第四点中所说的
<meta charset="utf-8">在页面中没有这句代码时。浏览其将不知道该用什么样的编码进行解析。在浏览器蒙对的时候页面会正确显示。而猜错的时候页面就会出现乱码。这时,页面编辑者应该在网页代码的head部分中加入<meta charset="utf-8">这样一段代码,用来告诉浏览器到底应该用何种编码进行解析。


7.常见浏览器和其内核分别是什么。

  • Trident(MSHTML):是微软开发的一种排版引擎。使用Trident渲染引擎的浏览器主要为IE浏览器。
  • FirefoxGecko是一套开放源代码的、以C++编写的网页排版引擎。它的主要使用者为Firefox浏览器。
  • Webkit:苹果公司自己的内核,也是苹果的Safari和Google的Chrome浏览器使用的内核。
  • Presto:是一个由Opera Software开发的浏览器排版引擎。在Opera 7.0及以上使用。

8.常见的标签,和这些标签用于的场合。

h1~h6——标题
h1到h6表示从大到小的标题。

a——链接
<a href="#" target="_blank" title="TapTap">TapTap</a>
<a href="#game" target="_blank" title="TapTap">TapTap</a>

第一个标签a中的href为‘#’是一个无作用的锚,点击后不会发生任何事。
第二个标签a中的href为‘#game’,点击后页面会自动跳转到当前页面中id为game的位置,并将这个位置放在浏览器的最左上方。

img——图片
![jirengulogo](http://upload-images.jianshu.io/upload_images/4672050-c5f17b73d1bc6504.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
src 表示该图片的链接,在图片显示失败时(如链接失效),将会显示alt中的信息。这样就不会造成该显示图片的地方空白一片,任何提示也没有。在搜索时。搜索引擎也会通过alt中的信息进行搜索。
div——块
<div id="header">……</div>
<div class="red_head">……</div>
给页面划分区块,让结构更加清晰。
id="header" 给该元素一个唯一标记。
class="red_head"给该元素甚至更多的元素同一个标记。可以直接操作一个标记,来改变拥有这个标记的元素的样式。
一个元素可以同时拥有class和id,并且可以同时拥有多个class属性。
ul、ol、li——无序、有序列表
ul为无序列表。如:
<ul>
<li>椰</li>
<li>树</li>
<li>牌</li>
</ul>
li为有序列表。如:
<ol>
<li>椰</li>
<li>树</li>
<li>牌</li>
</ol>
ul和ol中。与li可以嵌套。
iframe——嵌入一个页面
嵌入页面时,注意跨域操作问题。

<iframe src="http://jirengu.com " name="myPage"></iframe>
<p><a href="http://www.w3cschool.cc" target="myPage">W3C</a></p>

当前页面与iframe中的页面相同域名时。可以通过js获取iframe中的元素并且操作。但是。当iframe中的页面与与当前页面的域名不同。则只能展现页面。
table——表格
用于展现表格。以前曾用于布局。现在最好不要用于布局。
table中,thead定义表格的表头,tbody定义表格的主体部分,tfoot定义表格的表注(页脚)。这三者应该同时使用。
th表示与内容不相关的文字。tr表示横,td表示列。

更多标签请参考w3school

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

推荐阅读更多精彩内容

  • 一、浏览器 1.浏览器是帮助用户进行浏览网页的软件 2.常用的浏览器有IE、火狐(Firefox)、谷歌(Chro...
    Stevenqqq阅读 591评论 0 1
  • html基础 html简介 中文译为“超文本标记语言”,主要是通过HTML标记对网页中的文本、图片、声音等内容进行...
    mao_orz阅读 620评论 0 1
  • 关于 HTML 超文本标记语言(HyperText Markup Language,简称 HTML)是一种用于创建...
    _空空阅读 1,062评论 0 1
  • HTML基础 本文包括 HTML基本知识与结构 HTML常见标签 标签写法与嵌套的讨论 HTML、CSS、java...
    廖少少阅读 2,076评论 2 21
  • 简介网络浏览器很可能是使用最广的软件。在这篇入门文章中,我将会介绍它们的幕后工作原理。我们会了解到,从您在地址栏输...
    wengjq阅读 1,994评论 2 15