HTML_关于现代前端必要知识

由VS Code空.html文件打出html:5或!按下tab建后默认生成的.html基本框架代码说起

第一行:

很庆幸,如今我们只需要这么一个自闭合标签即可告诉浏览器,请使用html5的标准来解析下面的代码

从第二行起, 我们就需要用到前端相关知识了, 以下将知识划分四块:

1. 普通标签
2. 自闭合标签
3. 标签的属性
4. 标签的内容

普通标签

HTML中的普通标签就是形如abc这种形式的块结构, 其中为开标签, 为闭合标签简称闭标签

普通标签是可以嵌套其他标签的

自闭合标签

在最新的W3C标准中, 已经不推荐使用的形式来表明自闭合标签, 使用即可

具体表述为, 某标签只有开标签并且没有与之匹配的闭标签, 则这种标签称之为自闭合标签, 即自行闭合标签

自闭合标签是无法嵌套其他标签的

标签的属性

以下 即代表普通标签的开标签与自闭合标签, 在属性的表述上, 二者无差异

形如, 其中a与b即为标签的属性, 与之匹配的a1与b1即为属性对应的属性值, 注意属性值使用""或''括起来的, 如果没有使用""或''括起来, 也会被转换成字符串

标签不同, 其对应的属性不同, 如img标签具有src属性, 即, 而input具有value属性等等, 即

所有标签都具有的属性即为通用属性, 如: class, id, style等, 即

标签的内容

注意标签的内容根据普通标签与自闭合标签不同而表现不同

形如abc, 开标签与闭标签之间的内容即为标签的内容, 即本例中的abc.
若是自闭合标签, 则内容体现在其相关属性上, 如input标签的内容则体现在属性value上, 即

---

那么现在再看文章头部的代码:

则从第二行可以分析如下:

一个html普通标签, 其属性lang的属性值是en, 这个html标签包裹了head与body两个普通标签, 其中body普通标签内容为空, 属性也是空; 而head普通标签属性为空, 但是内容是包裹了三个meta自闭合标签与一个title普通标签, 三个meta自闭合标签各自有各自的属性值, title普通标签没有属性, 内容是"我是title"

一下介绍四种常见标签(HTML5标准的标签种类百来种)

1. div

   块标签, 主要负责包裹作用, 形式如下:
   
   ```
   
       other...
   
   ```
   

2. a

   锚点或链接标签, 用来前往本页某点或前往其他页面
   
   `我是前往百度的锚点`
   

3. input

   文本输入标签

   ``
   

4. img

   图片标签
   
   ``
   

将例子融合成最终代码

    
        
        
        
        
    
    
        

            other...
        
        我是前往百度的锚点
        
        
    

效果如下:

源码相关

GitHub

Codepen

B站视频

斗鱼视频