HTML_关于现代前端必要知识

时间 2019-12-05

标签 html 关于现代前端必要知识栏目 HTML 繁體版

原文原文链接

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>我是title</title>
    </head>
    <body>

    </body>
</html>

第一行: <!DOCTYPE html>前端

很庆幸,现在咱们只须要这么一个自闭合标签便可告诉浏览器,请使用html5的标准来解析下面的代码

从第二行起, 咱们就须要用到前端相关知识了, 如下将知识划分四块:html5

普通标签
自闭合标签
标签的属性
标签的内容

普通标签

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

普通标签是能够嵌套其余标签的github

自闭合标签

在最新的W3C标准中, 已经不推荐使用<y />的形式来代表自闭合标签, 使用<y>便可浏览器

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

自闭合标签是没法嵌套其余标签的ide

标签的属性

如下 <z>即表明普通标签的开标签与自闭合标签, 在属性的表述上, 两者无差别ui

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

标签不一样, 其对应的属性不一样, 如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 value='我是input的内容'>

那么如今再看文章头部的代码:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>我是title</title>
    </head>
    <body>

    </body>
</html>

则从第二行能够分析以下:

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

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

div

块标签, 主要负责包裹做用, 形式以下:

```
<div>
    other...
</div>
```

锚点或连接标签, 用来前往本页某点或前往其余页面

`<a href="https://www.baidu.com/">我是前往百度的锚点</a>`

input

文本输入标签

`<input type="password" placeholder="请输入密码">`

img

图片标签

`<img src="http://img4.imgtn.bdimg.com/it/u=2626080281,1039691735&fm=27&gp=0.jpg" alt="当图片连接无效时候我会显示出来">`

将例子融合成最终代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>我是title</title>
    </head>
    <body>
        <div>
            other...
        </div>
        <a href="https://www.baidu.com/">我是前往百度的锚点</a>
        <input type="password" placeholder="请输入密码">
        <img src="http://img4.imgtn.bdimg.com/it/u=2626080281,1039691735&fm=27&gp=0.jpg" alt="当图片连接无效时候我会显示出来">
    </body>
</html>

效果以下:

源码相关