HTML入门

1.HTML、XML、XHTML 有什么区别

  • HTML:超文本标记语言,用来描述网页的一种语言,其语法较为松散的、不严格。下面的 HTML 代码运行起来非常正常(即使没遵守语法规则)
<html>
<head>
<title>This is bad HTML</title>
<body>
<h1>Bad HTML
<p>This is a paragraph
</body>
  • XML :可扩展标记语言,主要用于存储数据和结构,可扩展。HTML的标签是被预定义的而XML 标签没有被预定义,需根据需要自行定义标签。
  • XHTML:可扩展超文本标记语言,基于XML,作用与HTML类似,但语法更严格,针对HTML进行了规范,编码更加严谨。

2.怎样理解 HTML 语义化

HTML语义化是指使用合理的标签与结构来构建网络,方便开发者阅读,修改。能够更好的让爬虫和机器解析。总而言之,就是让正确的标签做正确的事。

写语义化的 HTML 结构其实很简单,首先掌握 HTML 中各个标签的语义,在看到内容的时候想想用什么标签能更好的描述它,是什么就用什么标签。

<h1> ~ <h6>,作为标题使用,并且依据重要性递减,<h1> 是最高的等级。

<p>段落标记,知道了 <p> 作为段落,你就不会再使用 <br /> 来换行了,而且不需要 <br /> 来区分段落与段落。<p> 中的文字会自动换行,而且换行的效果优于 <br />。段落与段落之间的空隙也可以利用 CSS 来控制,很容易而且清晰的区分出段落与段落。

<ul>、<ol>、<li>,<ul> 无序列表,这个被大家广泛的使用,<ol> 有序列表也挺常用。在 web 标准化过程中,<ul> 还被更多的用于导航条,本来导航条就是个列表,这样做是完全正确的,而且当你的浏览器不支持 CSS 的时候,导航链接仍然很好使,只是美观方面差了一点而已。

<dl>、<dt>、<dd>,<dl> 就是“定义列表”。比如说词典里面的词的解释、定义就可以用这种列表。

<em>、<strong>,<em> 是用作强调,<strong> 是用作重点强调。

<q>也不仅仅只是为文字增加双引号,而是代表这些文字是引用来的。

<table>、<td>、<th>、<caption>, (X)HTML中的表格不再是用来布局。

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

内容与样式分离,就是让HTML只负责内容的部分,让CSS负责样式的部分;这样可以降低HTML的结构复杂度,使得文档变得清晰易读,方便维护。

4.有哪些常见的meta标签

meta标签常见属性有三种,分别为name、http-equiv和charset

  1. name
    name属性主要用于描述网页,比如网页的关键词,叙述等。与之对应的属性值为content,content中的内容是对name填入类型的具体描述,便于搜索引擎抓取。meta标签中name属性语法格式是:
<meta name="参数" content="具体的描述">
  • keywords
    <meta name="keywords" content="前端">
    用于告诉搜索引擎你的网页关键字
  • description
    <meta name="description" content="这是我的前端博客">
    页面描述,每个网页都应有一个不超过 150 个字符且能准确反映网页内容的描述标签
  • author
    <meta name="author" content="wfw,xxxxxx@qq.com">
    定义网页作者
  • copyright
    <meta name="copyright" content="wfw">
    用于注册版权信息
  1. http-equiv
    http-equiv定义了能改变服务器和用户引擎行为的内容。语法格式是:
<meta http-equiv="参数" content="具体的描述">
  • X-UA-Compatible
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    告诉浏览器以何种版本来渲染页面
  • expires
    <meta http-equiv="expires" content="Monday 26 June 2017 11:00 GMT" />
    用于设定网页的到期时间,过期后网页必须到服务器上重新传输。
  • refresh
    <meta http-equiv="refresh" content="2;URL=http://www.baidu.com/">
    网页将在设定的时间内,自动刷新并调向设定的网址。
  • Set-Cookie
    <meta http-equiv="Set-Cookie" content="name, date">
    如果网页过期,那么这个网页存在本地的cookies也会被自动删除。
  1. charset
    用于设定网页字符集,便于浏览器解析与渲染页面。
    <meta charset="utf-8">

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

  1. 文档声明的作用是告诉浏览器此HTML是以什么标准编写的,方便浏览器正确解析。
  2. 严格模式是指有明确的DOCTYPE声明, 浏览器以明确的标准渲染页面;混杂模式是浏览器以向后兼容的方式渲染页面。
  3. <!doctype html>的作用为告诉浏览器以HTML5的标准渲染页面。

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

浏览器乱码的原因有:

  1. html中没用标明编码方式,浏览器没有正确识别页面编码而导致乱码。
    解决方法:添加html的编码方式<meta charset="编码方式">
  2. html中标明的编码方式与其真正的编码方式不一致,浏览器错误解析导致乱码。
    解决方法:标明正确的编码方式

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

常见的浏览器有IE、Firefox、Chrome、Safari、Opera等

浏览器 内核
IE Trident
Firefox Gecko
Safari WebKit
Chrome WebKit(27版本前)/Blink(28+)
Opera Presto(7至12)/Blink(15+)

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

标签 场景
html html文件开头 表示这是个html文件
head html 后 body 前 包含html文件一些关键信息
body html 的主体,包含了网页的主要内容
title html的标题
h1 - h6 从大到小的文字标题
span/stronge/em 位于需要特殊操作的文本两边
div 需要将网页划分区块时使用
p 段落,输入大段文字时使用
ul 无序列表,需要li配合使用
ol 有序列表,需要ol配合使用
li 列表项
img 图片,需插入图片时使用
a 链接,要使用链接时使用
button 按钮,添加按钮时使用
table(th/tr/td) 用于展示表格
iframe 用于嵌入一个页面
dl 定义列表
dt 定义列表中的项目
dd 定义列表中项目的描述

参考

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

推荐阅读更多精彩内容