资讯专栏INFORMATION COLUMN

从HTML标签开始

chadLi / 515人阅读

摘要:开始这一切吧没错,你没看错,我将从标签开始我的整个系列文章。简单来说,你访问一个网页,不管这个网页多酷炫,功能多复杂,它们都是从一个个标签开始建立的。

开始这一切吧!

没错,你没看错,我将从HTML标签开始我的整个系列文章。很基础吧?但是每个前端人都是从最简单的HTML标签开始的,都是从一个开始整个前端宇宙,不是么?

文章最终会写成怎样呢?我也不知道哈哈哈,拭目以待吧!也当给自己找找状态了。(非初学者可以跳过)

HTML长这样

HTML,全称Hypertext Markup Language,也就是“超文本链接标示语言”……这其实没啥好说的。。

简单来说,你访问一个网页,不管这个网页多酷炫,功能多复杂,它们都是从一个个HTML标签开始建立的。就像谷歌的真面目是这样的:

页面就是由右边这些密密麻麻的标签组成的。浏览器再根据标签和样式规则渲染出对应的页面展示到我们眼前。

HTML版本发展

从HTML最初的草案发布到现在较为成熟的HTML5,经历了整整25年(跟我差不多同龄了)。HTML4.0以及4.01其实已经算得上是比较友好的标准了,我们现在用到的一些基础标签,都是它的产物。比如:h1~h6、p、a、table、div、span、img......等等使用频率非常高的标签都是早早就实现了的。但是随着现代Web技术的更新和发展,更加复杂的网页需求以及更多的展示形式的出现,HTML已经很难承载这一切了。因此HTML5应运而生,作为最新的HTML标准,HTML5添加了新的语义、图形以及多媒体元素,也为旧有的标签添加了很多新的属性。

比如新的标签canvas解决了图形甚至动画的表达缺陷,新的APIlocalStorage解决了web应用的本地存储问题,同时HTML5新加了很多符合语义化的标签article、header、footer、section.....。我们现在工作中,几乎所有项目也都是基于HTML5的,除非你要兼容一些版本很低很低的浏览器。

碰到兼容IE的需求,真的头疼。God bless you!

HTML标签的分类

根据HTML各标签的布局特性,可以对它们进行分类。

块级元素

块级元素大多是结构性标签,特征是能够识别和设置宽高,并且可以自动换行。块级元素可以包含行内元素和块级元素。

如:address、caption、div、h1~h6、dd,dl,dt、fieldset、form、legend、li、ol、ul、noframes、noscript、p、pre、table、tbody、tgoot、td、th、thead、tr

行内元素

行内元素的特征是不能够识别和设置宽高,并且不会自动换行。行内元素可以包含行内元素,但不能包涵块级元素(真要写也不会出错,但是不符合标准)。

如:a、abbr、acronym、b、bdo、big、br、cite、code、dfn、em、i、kbd、label、q、samp、select、strong、sub、sup、textarea、tt

行内块级元素

和行内元素差不多,但是它可以设置宽高。

如:img、input

一般还可以通过css修改元素样式display:inline-block实现

尽管标签区分了其是块级还是行内,但你仍可以通过设置它们的样式改变它们的展示形式。

HTML语义化

说实话,我在工作中,还是比较忽视语义化的,基本都是DIV+CSS的方式去做开发。这里要检讨一下自己,存在即合理,有那么多语义化的标签存在,还是多去使用它们吧。选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。特别是做一些官网项目,或者SEO要求比较高的项目,尽量逼着自己去实现语义化。

参考:如何理解 Web 语义化?

今天的没啥营养,貌似写这些出来也没多大意义,明天写写盒模型好了。

关于我

微信号:rcgrcg,欢迎交友~

为了生计,我也接外包项目的哦~

网站搭建(PC、H5、前后端全包,我们有团队的哦),APP开发(安卓和IOS),都是有成功案例的哦。

有兴趣的请联系我!!服务包您满意的那种!!

Good luck!
2018-11-12 厦门

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/53257.html

相关文章

  • Vue.js 模板解析器原理 - 来自《深入浅出Vue.js》第九章

    摘要:模板解析器原理本文来自深入浅出模板编译原理篇的第九章,主要讲述了如何将模板解析成,这一章的内容是全书最复杂且烧脑的章节。循环模板的伪代码如下截取模板字符串并触发钩子函数为了方便理解,我们手动模拟解析器的解析过程。 Vue.js 模板解析器原理 本文来自《深入浅出Vue.js》模板编译原理篇的第九章,主要讲述了如何将模板解析成AST,这一章的内容是全书最复杂且烧脑的章节。本文未经排版,真...

    pinecone 评论0 收藏0
  • 0开始接触html--第一天学习内容总结

    摘要:第一天总结段落有序无序定义列表块级元素独占一行,行内元素共占一行和和和块级分区元素行内分区元素特殊字符空格小于号大于号图片图片不能正常显示的时候显示此内容路径鼠标悬停时显示的内容图片地图细节文本标签内容标题标第一天 总结: h1-h6 p 段落 hr br 有序 ol li 无序 ul li 定义列表 dl dt dd 块级元素:独占一行,h1-h6 p hr div 行内元素:共占一行,...

    changfeng1050 评论0 收藏0
  • HTML基础

    摘要:概念前端最核心的技术结构骨架样式效果用户行为做的事情超文本标记语言超文本文本文件浏览器可以直接打开如果具有中文,可能出现乱码问题标记语法结构标签名注意浏览器解析标记规定的标记内容注意是不严格的语言允许不用编写所有内容标签名 HTML 概念 前端最核心的技术 HTML + CSS + javascript HTML - 结构 - 骨架 CSS - 样式 - 效果 JAVASCR...

    Prasanta 评论0 收藏0
  • HTML 基础知识及webstorm基本快捷键

    摘要:我们在可替换的元素上使用,然而把用于在涉及的文档和外部资源之间建立一个关系。属性仅仅嵌入当前资源到当前文档元素定义的位置。 一、webstorm快捷键编写HTML标签的快捷键: 标签名+TAB键(修改格式,格式化代码)快捷键: ctrl+shift+f 【此快捷键在webstorm中无效】(用ctrl+alt+L)同时编写多个相同的标签的快捷键 :标签名*个数+tab键同时编写多行代码...

    wenshi11019 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<