认识HTML

HTML、XML、XHTML的区别

首先,这三种都是标记语言,是html书写的规范。

HTML
html 是超文本标记语言,语法较为松散,要求不严格的web语言。
可能会出现大小写不一致,标签没有闭合等问题,但是浏览器不会报错,可能会不能显示或者不能运行出来。
XML
xml 是可扩展标记语言,主要用于存储数据和结构。
标签需要自定义使用,无限制名称,主要是传输数据等作用。
XHTML
xhtml 是可扩展超文本标记语言,看名称也能知道他是以上两种的结合版。
基于xml,作用与html类似,语法上要求更加严格。

HTML语义化

语义化就是根据页面的要求,具体的内容,在合适的地方使用合适的标签,合理的代码结构编写代码。这样利于seo优化,利于浏览器爬虫和机器对页面的解析。也便于开发者阅读。
语义化的标签就是对所有包含的所有内容作一个整体声明。

如何正确的使用标签

首先需要掌握html标签的含义,在先写内容时,想想用什么标签能更好的描述他,内容与内容间的关系,是并列还是包含,考虑结构化合理。

语义化的好处

1 有利于seo,有利于搜索引擎爬虫更好的理解我们的网页,从而获取更多的有效信息,提高网页权重。
2 没有css的美化后,能够清晰看到网页的结构,增强可读性。
3 语义化的html可以认识那个开发者更容易理解,便于团队开发、维护。
4 支持多个终端设备的浏览器渲染。

理解内容、样式、行为分离的原则

html代码与css代码分开编写,两个的代码不能混在一起。
HTML标签只用负责承载内容,而样式交给了CSS,行为交给了JavaScript。
怎么做呢??
1 在编写html的时候不考虑css样式,单独对页面的内容和结构分析。
2 当html写完后再来写css。
3 也不要将css写在html内,不允许出现属性样式,行内样式。
4 行为js 与样式css分离,不直接对css的属性编码,而是通过js操作添加、删除样式。
这样做的好处??
为了以后改版时更方便,直接修改样式,而不动HTML的内容。更方便易于阅读样式和内容,便于网站的维护。
网页的内容直接暴露在搜索引擎面前,这样有利于搜索引擎抓取网页的内容。

常见的meta标签

<meta charset="utf-8">设置保存页面内容的编码方式。
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>很多电脑是双内核,声明用用ie最新版本来渲染解析,也可以用Chrome最新版本渲染。
<meta name="keywords" content="购物">
<meta name="description" content="shopping">
上面两个 设置对网站优化有好处。用户可以通过搜索,查找到相关内容,那么"keywords、description就是可以指出网页是写的什么内容,可以查找到返回给用户。
<meta name="viewport" content="width=device-width, initial-scale=1">是在移动端上显示时能适用,更加合理,正常。
文档声明的作用

文档声明就是告诉浏览器用什么方式对页面解析。

严格模式和混杂模式

严格模式是设置了浏览器对此页面的渲染解析方式。是h5还是h4等。
混杂模式就是没有设置文档声明的,这个要依据浏览器自己的渲染方式来进行。

<!doctype html>

<!docutype html>为html5的文档声明方式。

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

有可能你没有设置编码方式,只是使用了默认的编码方式保存,浏览器又不知道你的编码方式,用了另一种方式解析。
也有可能设置页面编码的方式不对,编码方式有的并不支持中文,当这时候页面内有中文,就会在浏览器检测到编码方式时用页面设定的编码方式解析,解析的页面会出现乱码。

解决:需要设置正确的对应编码方式,编码方式要写在页面中,例如<meta charset="utf-8">。

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

IE、Maxthon的内核:Trident
FireFox、MozillaSuite/SeaMonkey的内核:Gecko
Opera内核: Presto
Safari、Chrome的内核:Webkit

列出常见的标签,并简单介绍这些标签用在什么场景
  1. 标题 h1~h6
    h1是最大标签,h2是二级标题,以此类推。
    可应用在文章的标题,页面的网站大标题等。
  2. p 段落
    文章中的一段文字,也可以是一两个字也可以用p。
    用于新闻类网页的文章段。
  3. a 链接
    链接一个地址,点击跳转。
    用于导航、文字链接,一点击到另外一个页面。
  4. img 图片
    将本地图片加载到网页。
    在页面添加一个图,可用于网站商品图展示中。
  5. div 一个块
    页面划分区域。
    用户页面内容结构划分。
  6. ul li 无序列表
    没有顺序前后之分,搭配使用。表示并列的内容,可以嵌套使用。
    用于页面的导航部分的每个导航内容。
  7. ol li 有序列表
    有顺序,表示步骤。1.2.3.
    用于文章中有顺序阐述的内容。
  8. dl dt dd
    表示标题与内容的一种展示格式。
    用于清晰表现一系列标题与内容的场景。如词典里面的词的解释。
  9. button 按钮
    可点击的按钮。
    用于表单中的提交按钮等。
  10. span strong em
    span 是没有强调作用,只是对某些文字进行包裹,可添加样式。
    strong 强强调,对有想突出的内容显示。
    em 相对于strong 稍弱一点,代表弱强调。
    用于对某些文字稍加强调或其他样式。
    11 iframe
    嵌入到一个页面
    用于不适用后台和js的情况下,简单的一个教程,在左边点击后,右边的iframe标签区域显示。
    12 table 表格
    展示表格,不要用来做布局。
    用于数据统计图表。
行内元素VS块级元素区别

区别:
行内元素占据的宽度是自身的宽度,标签有:a span strong em img button
块级元素占据整一行。标签有: div p ul li h1~h6

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,727评论 1 92
  • 初识html HTML、XML、XHTML 有什么区别 都是ML结尾,共同点就是都是标记语言。 HTML,超文本标...
    我是一只_鱼阅读 373评论 0 1
  • HTML:超文本标记语言; 1.什么是HTML标记语言:表示网页信息的符号标记语言 特点: 可以设置文本的格式; ...
    special_wen阅读 362评论 0 2
  • 什么是HTML HTML其实是HyperText Markup Language的缩写, 超文本标记语言 HTML...
    cheney0217阅读 419评论 0 1
  • 心情差。在办理公司合作业务时,我犯了一个低级错误。公司向工商局提交包含虚假价格的股权转让协议,作为一个律师,还是材...
    他像一个球阅读 338评论 0 0