由VS Code空.html文件打出html:5或!按下tab建后默认生成的.html基本框架代码说起
我是title
第一行: <!DOCTYPE html>
很庆幸,如今我们只需要这么一个自闭合标签即可告诉浏览器,请使用html5的标准来解析下面的代码
从第二行起, 我们就需要用到前端相关知识了, 以下将知识划分四块:
- 普通标签
- 自闭合标签
- 标签的属性
- 标签的内容
普通标签
HTML中的普通标签就是形如<x>abc</x>这种形式的块结构, 其中<x>为开标签, </x>为闭合标签简称闭标签
普通标签是可以嵌套其他标签的
自闭合标签
在最新的W3C标准中, 已经不推荐使用<y />的形式来表明自闭合标签, 使用<y>即可
具体表述为, 某标签只有开标签并且没有与之匹配的闭标签, 则这种标签称之为自闭合标签, 即自行闭合标签
自闭合标签是无法嵌套其他标签的
标签的属性
以下 <z>即代表普通标签的开标签与自闭合标签, 在属性的表述上, 二者无差异
形如<z a="a1" b="b1">, 其中a与b即为标签的属性, 与之匹配的a1与b1即为属性对应的属性值, 注意属性值使用""或''括起来的, 如果没有使用""或''括起来, 也会被转换成字符串
标签不同, 其对应的属性不同, 如img标签具有src属性, 即<img src='xxx'>, 而input具有value属性等等, 即<input value='yyy'>
所有标签都具有的属性即为通用属性, 如: class, id, style等, 即<any id='id' class='class1' style='style1: value1'>
标签的内容
注意标签的内容根据普通标签与自闭合标签不同而表现不同
形如<x>abc</x>, 开标签与闭标签之间的内容即为标签的内容, 即本例中的abc.
<input value='我是input的内容'> 那么现在再看文章头部的代码:
我是title
则从第二行可以分析如下:
一个html普通标签, 其属性lang的属性值是en, 这个html标签包裹了head与body两个普通标签, 其中body普通标签内容为空, 属性也是空; 而head普通标签属性为空, 但是内容是包裹了三个meta自闭合标签与一个title普通标签, 三个meta自闭合标签各自有各自的属性值, title普通标签没有属性, 内容是"我是title"
一下介绍四种常见标签(HTML5标准的标签种类百来种)
-
div
块标签, 主要负责包裹作用, 形式如下:```
other...``` -
a
锚点或链接标签, 用来前往本页某点或前往其他页面`我是前往百度的锚点`
-
input
文本输入标签
``
-
img
图片标签`
`
将例子融合成最终代码
我是title other...我是前往百度的锚点
效果如下:
