HTML基础知识

<!DOCTYPE html>   //文档声明
<html lang="en">  //根元素
<head>           //文档头
       <meta charset="UTF-8">//指定网页内容编码
    <meta http-equiv="X-UA-Compatible" content="IE=edge">//建议使用edg内核
    <meta name="viewport"content="width=device-width initial-scale=1.0">//可视化调节
    <title>Document</title>//网页标题
</head>
<body>    //文档体
    <!-- 超链接 -->
    <a href="http://www.duyiedu.com">杜伊教育</a>  //a，h是元素
    <h1 title="this is the first page">           //href=||title=是属性
        第一个网页
    </h1>
    <img src="图片地址" alt="">
</body>
</html>

其中：

<!DOCTYPE html>

**文档声明**：告诉浏览器当前文档使用HTML标准是HTML5；

<html lang="en">  //en语言是英文

**根元素**：一个页面只有一个

<head>
    文档的元数据
</head>

**文档头**：不会出现在页面上

<head>
    <meta charset="UTF-8">//指定网页内容编码
    <meta http-equiv="X-UA-Compatible" content="IE=edge">//建议使用edg内核
    <meta name="viewport"content="width=device-width initial-scale=1.0">//可视化调节
    <title>Document</title>//网页标题
</head>

**文档的元数据**：附加信息

<body>
     元素
     属性
</body>

**文档体**：页面上所有要显示的元素都在文档体里面

元素（标签）||（标记）

例如a元素，h1元素等

元素 = 起始标记 + 结束标记 + 元素内容 + 元素属性

空元素：没有结束标记的元素

属性

属性夹在<>里

href="http://www.duyiedu.com"

title="黑龙江不啦不啦"

属性=属性名+属性值

4.文本元素

1.h元素

<body>
    h$*6>{$级标题}
    <h1>1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>
    <h6>6级标题</h6>
</body>

2.p元素

段落

>乱数假文：lorem

生成内容不同的，没有含义的段话

p*3>lorem

3. span元素（无语义）

仅用于设置样式

比如我要显示带有颜色的红绿蓝，用css，但是css只用于元素里，所以用无语义的span

三原色：
    <span style="color:red">红</span>
    <span style="color:green">绿</span>
    <span style="color:blue">蓝</span>

4.pre元素

预格式化文本元素

空白折叠：连续的空白（空格，制表，回车）会被折叠成一个空格

在pre中的的内容不会出现空白折叠，按照源代码格式显示页面

<pre>
                    (^ ^ ^)
                  { / o o / }
                    ( (oo) )
                      ~ ~ ~
</pre>

以前：

某些元素会独占一行（块级元素），比如h，p

某些元素不会独占一行（行级元素），比如span

块级元素可以包含行级元素

现在：HTML5已经弃用这种说法

5.HTML实体

实体字符：用于在页面中显示一些特殊符号

1. &单词；

2. &#数字；

源代码：在页面中表示段落使用：< p >

页面中：在页面中表示段落使用：<p>

小于符号：&lt； <

大于符号：&gt； >

空格符号：&nbsp；  

版权符号：&copy； ©

and符号：&amp； &

5.a元素

超链接的存在

href属性

1.普通链接

 <a href="https:baidu.com">百度</a>

2.锚链接（#）

<a href="#chapter1">章节1</a>
<a href="#chapter2">章节2</a>   // #chapter2就是*锚点*
<a href="#chapter3">章节3</a>
    <h2 id="chapter1">章节1</h2>   //id是*唯一编码*
    <p>Lorem ipsu obcaecati ipsa perferendis ipsam i adipisci!</p>
    <h2 id="chapter2">章节2</h2>
    <p>Veniam umendist quia explicabo excepturi alias eligendi?</p>
    <h2 id="chapter3">章节3</h2>
    <p>Iste de  maiontur esse temporibus earum officiis? Quasi.</p>

    <a href="#">回到顶部</a>

3.功能链接

点击后触发某个功能

- 执行JS代码，javascript：

- 发送邮件，mailto：（要求用户计算机上安装有邮件发送软件）

- 拨号，tel：要求用户计算机上安装拨号软件

target属性

表示跳转窗口位置

- _self：在当前窗口中打开

- _blank:在新窗口中打开

<a href="https://douyu.com"target="_blank">斗鱼直播</a>

6.图片元素

图片元素是一个空元素

1.img元素

<img src="   " alt="    ">

src属性

图片地址

alt属性

当图片资源失效时，将使用该属性的文字替代图片

和a元素联用

跳转链接

<a target="_blank"href="https://baike.baidu.comladdin">
     <img src="https://t7.baidu.com/i93&f=GIF" alt="小狗图片">
</a>

2.map元素

map：地图

area:区域

<a href="https://www.361478.com/baizi/354225.html">
        <img usemap="#solarMap"src="https://pic.rmb.bdstatic.com/bjh/news/25b14a.jpeg" alt="太阳系图片">
</a>
    
    <map name="solarMap">
        <area shape="circle" coords="圆心坐标加半径" href="https://baike.baidu.com/item/" alt="木星" target="_blank"> 
                    //圆形
        <area shape="rect" coords="左上角加右下角坐标" href="https://baike.baidu.com/item/" alt="木星" target="_blank">
                    //矩形
        <area shape="poly" coords="几边形几个坐标" href="https://baike.baidu.com/item/" alt="木星" target="_blank">
                    //多边形
    </map>

3.figure元素

指代，定义，通常用于把图片、图片标题、描述包裹起来

**子元素：figcaption**

表示指代一个标题

7.多媒体元素

1.video视频

布尔属性

controls：控制控件的显示，取值只能为controls

<video controls src="./陈月.mp4"></video>

autoplay：自动播放

muted：静音播放

loop：循环播放

2.audio音频

与视频基本一致

8.列表元素

1.有序列表

父： ol 元素: ordered list

子： li 元素: list item

<ol type="A">
    <li>打开冰箱门</li>
    <li>大象进去</li>
     <li>关上冰箱门</li>
</ol>

<ol reversed>
    <li>打开冰箱门</li>
    <li>大象进去</li>
    <li>关上冰箱门</li>
</ol>

type属性

type="a/A/1/i"

1. a表示以abcd顺序

2. A表示以ABCD顺序

3. 1表示以1234顺序

4. i表示以i ii iii，iv顺序

reversed属性

倒着排序

2.无序列表

父： ul 元素

子： li 元素

常用于制作菜单或新闻列表

xxx是个美女择偶条件：
    <ul>
        <li>年薪30w</li>      
        <li>帅</li>
        <li>高</li>
        <li>有房有车</li>
    </ul>

3.定义列表

父： dl 元素：定义列表

子： dt 元素：定义标题

子： dd 元素：术语描述

常用于一些术语的定义

HTML中的术语解释:
    <dl>
        <dt>HTML</dt>
        <dd>
            超文本标记语言,ksichsidohsdohsdolais
        </dd>
        <dt>元素</dt>
        <dd>
            组成文档的单元,每个元素diduhikdhaidhsikw
        </dd>
    </dl>

9.容器元素

该元素代表一个块区域，内部用于放置其他元素

1.div元素{没有语义}

先划分区域，一个区域一块div

一般上（header）中（article）下（footer）三块大区域

大区域内包含小区域

一个小区域一个div

<div>
    <div>
        <div>
            <img src="" alt="">
        </div>
        <div>
            <ul>
                <li>Lorem.</li>
                <li>Fugit?</li>
                <li>Eum.</li>
            </ul>
        </div>
</div>