Web前端学习(二) 第一个网页

第一个网页

Emmet 插件：自动生成HTML代码片段

元素

其他叫法：标签、标记

    <a href="https://www.baidu.com" title="百度搜索" target="_blank">百度</a>  
    <title>Document</title> <!-- 网页的标题 -->

属性 = 属性名 + 属性值

属性的类型：

局部属性：某元素特有的属性
全局属性：所有元素都有的属性

    <meta charset="UTF-8">

有些元素没有结束标记

元素的嵌套

元素不能相互嵌套

父元素、子元素、祖先元素、后代元素、兄弟元素（拥有同一个父元素的两个元素）

标准的文档结构

HTML: 页面、HTML文档

<!DOCTYPE html>  <!--告诉浏览器，当前文档使用的HTML标准是HTML5-->
<html lang="en"> <!--根元素：一个页面最多只能一个，是其他元素的父元素或祖先元素-->
<head>    <!--文档头内容不显示在页面上-->
    <meta charset="UTF-8">  <!--网页内部的编码规则(gbk2312,gbk,Unicode,UTF-8)-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--如果是IE浏览器，建议内核使用edge内核-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"><!--适应于手机端，网页的视口设置为设备的宽度 -->
    <title>Document</title> <!--网页标题名称展示-->
</head>
<body><!--文档体，没有特别说明的一些元素基本都在文档体中-->

</body>
</html>

lang属性：language,全局属性，表示该元素内部使用的文字是使用哪一种自然语言书写而成的
目前常用的展示中文的属性值：

<html lang="cmn-hans"></html>  <!--标准中国地区简体汉语-->

语义化

选择什么元素，取决于内容的含义，而不是显示出的效果

为什么需要语义化

为了搜索引擎优化(SEO)
搜索引擎:百度、搜狗、Bing、Google

每隔一段时间，搜索引擎就会从整个互联网中，抓取页面源代码。
为了让浏览器理解网页

HTML代码快速生成语法

    <!-- 
    1.用 >创建父子结构标签，生成子元素
    2. 用+创建兄弟标签，生成同级元素
    3. 用.或者#创建类标签
    4. 用[]来创建属性标签
    5. 用{}在标签的内容
    6. 用$来实现编号
    7. 用@n来修改起始值
 -->

(div.father#father1>div.son#son$*3)+div.father#father2 
====>
<div class="father" id="father1">
    <div class="son" id="son1"></div>
    <div class="son" id="son2"></div>
    <div class="son" id="son3"></div>
</div>
<div class="father" id="father2"></div>

div.father#father1>div.son#son$*3>{$This is his son $}
====>
<div class="father" id="father1">
    <div class="son" id="son1">1This is his son 1</div>
    <div class="son" id="son2">2This is his son 2</div>
    <div class="son" id="son3">3This is his son 3</div>
</div>

乱数假文(lorem)

    <!-- lorem :随机生成一段假文 -->
    <!-- lorem1 : 随机生成一个单词的假文 -->
    <!-- lorem1->Tab -->
    <p>Lorem.</p>
    <p>Nemo.</p>
    <p>Hic!</p>
    <p>Mollitia!</p>
    <p>Nulla.</p>
    <p>Ab.</p>
    <!-- (p.paragraph>lorem4)*4 -->
    <p class="paragraph">Lorem ipsum dolor sit.</p>
    <p class="paragraph">Est sapiente id at.</p>
    <p class="paragraph">Eveniet nostrum harum velit?</p>
    <p class="paragraph">Velit quod ducimus porro!</p>