一.网页的基本元素

1.1文档声明

<!DOCTYPE html>

HTML文档声明告诉浏览器当前页面是HTML5页面，让浏览器用HTML5的标准去解析识别HTML文档
必须放在HTML文档的最前面，不能省略，否则会出现兼容性问题
HTML5的文档声明比HTML 4.01、XHTML 1.0简洁非常多(XHTML语法严格)

<!DOCTYPE   HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"   "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

1.2 html元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
</head>
<body>
    
</body>
</html>

html元素是HTML文档的根元素，一个文档只能有一个，其他所有元素都是它的后代元素
W3C标准建议为html元素增加一个lang属性

浏览器会读取lang属性，根据浏览器设置的语言，判断是否提示用户翻译网页
- 帮助语言合成工具确定要使用的发音
- 帮助翻译工具确定要使用的翻译规则
- lang="en"告诉浏览器，这个HTML文档的语言是英文，chrome浏览器有如下提示:
- lang="zh"告诉浏览器，这个HTML文档的语言是中文

1.3 head元素

head元素里面的内容是一些"元数据"，用来描述数据的数据
一般用于描述网页的各种信息，比如字符编码、网页标题、网页图标
- 以下列出的元素大多数情况下都是在head元素内部使用
- title元素：网页标题
- meta元素：设置网页的字符编码
  - 可以用于设置网页的字符编码，让浏览器更精准的显示每一个文字，不设置或者设置错误会导致乱码
  - 一般都是用UTF-8编码，涵盖了世界上几乎所有的文字
  - 在HTML5之前，meta标签的写法也是比较复杂的
  - ```
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
```
- style:样式
- link：
  - 引入外部css文件
  - 设置网页小图标：
- base
- script
- noscript:用来定义在脚本未被执行时的替代内容（文本），此标签可被用于可识别 noscript 标签但无法支持其中的脚本的浏览器。

<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
    <link rel="stylesheet" href="index.css">
    <style>
        div {
            color:red;
        }
    </style>
    <script src="index.js"></script>
    <noscript>你的浏览器不支持JavaScript</noscript>
    <base target="_blank">
</head>

字符编码

作用：将文字存储到计算机中，之后解析出来显示
应用：所有的网页目前都需要采用UTF-8编码，所以浏览器在解析时，我们也需要告诉浏览器当前我们使用UTF-8，浏览器才能正常的解析出来文字
- 计算机中所有的东西最终都是0101表示
- kobe -> 1110 0101 1101 0001
- k -> 1110 o -> 0101 b -> 1101 e -> 0001
- ASCII
- 中文: GB2312 -> GBK(生僻字) ->
- Unicode -> 规则:
- utf-16/utf-32/utf-8

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 字符编码设置不正确会导致乱码 -->
    <meta charset="GBK">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题</title>
</head>
<body>
    <h1>哈哈哈哈</h1>
</body>
</html>

哈哈哈 -> UTF-8(编码) 0101 0101 0011 -> GBK(解码) -> 乱码

1.4 body元素

body元素里面的内容是你在浏览器窗口中看到的东西，也就是网页的具体内容和结构

二.基本元素

h元素

表示网页的标题

h1~h6共规定了6个等级的标题

<!-- 1.h元素:h1~h6-->
<h1>我是h1标题</h1>
<h2>我是h2标题</h2>
<h3>我是h3标题</h3>
<h4>我是h4标题</h4>
<h5>我是h5标题</h5>
<h6>我是h6标题</h6>

h元素和SEO

h元素有助于网站的SEO（Search Engine Optimization中文：搜索引擎优化[百度/搜狗/360/Google]）优化，可以促进关键词排名

建议在网页中最多只有1个h1元素

乱用h元素不仅不会给网站带来好的权重，同时也可能被搜索引擎认为作弊，最后导致K站

p元素

段落

<!-- p元素:段落(paragraph) -->

<p>
    Eyewear II支持语音接收，可以接电话、听歌。它配备半开放式扬声器，搭配定制的高振幅扬声器驱动单元，声音清晰透亮。
    同时，这款智能眼镜搭载全新的逆声场声学系统，可以降低佩戴者双耳周围的漏音情况。即使身处安静的电梯或者会议室，
    也无需担心旁人听到你独享的音乐或电话那头的小秘密。
</p>
<p>
    在操作上，Eyewear II操控便捷，轻滑镜腿即可完成切歌、调节音量等操作；双击任意镜腿，可接听或挂断电话，也可暂停
    或播放音乐；双击左镜腿，可轻松唤醒语音助手，操作一步到位。这样的设计不仅为消费者带来更加智能的交互体验，而且
    显得科技感满满。
</p>
<p>
    值得一提的是，作为华为跟时尚眼镜品牌合作推出的产品，Eyewear II外观时尚，适合作为日常穿搭单品。这款智能眼镜推出了
    多个版本，包括经典光学系列、金属光学系列、SMART设计系列、New FLATBA墨镜系列，可以满足不同消费者的需求。
</p>

strong元素

加粗

<p>
    这是一个<strong>重要</strong>的内容
</p>

img元素

显示图片

属性 src:图片路径

img:img元素专门用来显示图片(image)
- img元素是单标签
- 属性：src 用来设置图片路径(URL) 【网络图片/本地图片:[相对路径/绝对路径]】
  - 绝对路径：完整的描述文件位置的路径
  - 相对路径：由这个文件所在的文件夹引起的跟其他文件的路径关系
  - 对于网页来说，不管什么操作系统，路径分隔符都是/，而不是\
- 属性: alt 当图片失效(加载失败)时显示的文本,HTML5规范中为必要属性
- 属性:width/height，默认单位像素px

<!-- 
    src:
        * 远程图片地址
        * 本地图片地址(路径)
            绝对路径:E:/Test/HTML/img/timg.jpg
                特点:从根路径下面开始找
                缺点:一旦位置发生改变,那么就有可能出现(图片)找不到的情况
            相对路径:
                规则:
                    . 当前路径
                    .. 上一层路径(目录)
-->
<p>网络图片地址</p>
<img src="http://n1.sinaimg.cn/news/1_img/upload/c4b46437/100/w1500h1000/20191128/e246-iixnuaa0665289.jpg" alt="">

<p>本地图片地址(绝对路径)</p>
<img src="E:/Test/HTML/img/timg.jpg" alt="">

<p>本地图片地址(相对路径)</p>
<img src="../img/timg.jpg" alt="">


<!-- alt属性：当图片失效（加载失败）时显示文本 -->
<img src="aa.jpg" alt="图片加载失败时显示">


<!-- width属性(不常用) -->
<img 
    src="../img/test_01.jpg" 
    alt=""
    width="100">

Web常用的图片格式

png：静态图片，支持透明
jpg/jpeg：静态图片，不支持透明
gif:动态图片、静态图片，支持透明 gif分解

像素（pixel）

像素(px)是图像显示的最小单位
每个像素都能表示一种颜色
计算机显示出来的图像都是由一堆像素组成的
组成图片的像素越多，显示越清晰

视网膜屏幕

a元素

定义超链接，用于打开新的URL

常用属性
- href（Hypertext Reference）：指定要打开的URL
- target：在哪里打开URL
- 如何打开本地页面：使用相对路径

<!-- 14_a元素的基本使用.html -->
<!-- 1.基本使用 href:超链接 -->
<p>打开外部网站</p>
<a href="http://www.baidu.com">百度一下</a>

<p>打开自己的网页</p>
<a href="./b.html">打开图片网站</a>
<br>


<!-- 
    2.target:
        _self(默认值):在当前窗口打开URL
        _blank:在一个新的窗口中打开URL

        和iframe一起使用时,才有效果
        _parent:在父窗口中打开URL
        _top:在顶层窗口中打开URL
        具体iframe的name:在某个iframe中打开URL
-->
<p>target属性:(_self)</p>
<a href="http://www.baidu.com" target="_self">百度一下</a>

<p>target属性:(_blank)</p>
<a href="http://www.baidu.com" target="_blank">百度一下</a>

<p>target属性:(_parent)</p>
<a href="http://www.baidu.com" target="_parent">百度一下</a>

<p>target属性:(_top))</p>
<a href="http://www.baidu.com" target="_top">百度一下</a>

iframe中嵌套a

<!-- 点击target属性:(_parent)下的a标签，会在当前页面打开新的网页 -->
<iframe src="./14_a元素的基本使用.html" 
        frameborder="1"
        width="1000"
        height="600">
</iframe>

iframe中嵌套iframe

<iframe src="./iframe.html" 
        width="1200"
        height="600"  
        frameborder="1">
</iframe>

base元素

标签为页面上的所有链接规定默认地址或默认目标。
a元素和base元素结合使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <base href="http://www.baidu.com" target="_blank">
</head>
<body>
    <a href="">百度一下</a>
    <a href="/img/bd_logo1.png">百度logo</a>
    <a href="/s?wd=vue">搜索vue</a>

    <a href="http://www.taobao.com">淘宝</a>
</body>
</html>

iframe元素

    <iframe src="http://www.baidu.com"
            width="1000",
            height="600" 
            frameborder="1">
    </iframe>

    <iframe src="http://www.taobao.com"
            width="1000",
            height="600" 
            frameborder="1">
    </iframe>

    <iframe src="./a标签.html"
            width="1000",
            height="600" 
            frameborder="1">
    </iframe>

锚点连接

跳转到网页中的具体位置

<a href="#one">go</a>

点击Go会定位到

id值为one的元素
name值为one的a元素
如何跳转到其他页面的特定位置：

<a href="index.html#one">首页第一节</a>

<a href="#title1">标题1</a>
<a href="#title2">标题2</a>
<a href="#title3">标题3</a>

<h2 id="title1">标题1</h2>
<p>我是内容1</p>
<p>我是内容1</p>
<p>我是内容1</p>
<p>我是内容1</p>
<p>我是内容1</p>
<p>我是内容1</p>
<p>我是内容1</p>
<p>我是内容1</p>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<h2 id="title2">标题2</h2>
<p>我是内容2</p>
<p>我是内容2</p>
<p>我是内容2</p>
<p>我是内容2</p>
<p>我是内容2</p>
<p>我是内容2</p>
<p>我是内容2</p>
<p>我是内容2</p>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<h2 id="title3">标题3</h2>
<p>我是内容3</p>
<p>我是内容3</p>
<p>我是内容3</p>
<p>我是内容3</p>
<p>我是内容3</p>
<p>我是内容3</p>
<p>我是内容3</p>
<p>我是内容3</p>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>

伪链接

有时候点击链接的时候不希望打开新的URL，而是希望干点别的事情，这是可以使用伪链接
没有指明具体链接地址的链接
点击链接后，具体要做什么事情，需要编写对应的JavaScript代码
- 如果暂时不做任何事，可以先写成下面的形式
```
<a href="#" onclick="return false;">伪链接1</a>
<a href="javascript:">伪链接2</a>
```
- 所以有时候可以把连接当作按钮来使用

<!-- 普通链接 -->
<a href="http://www.baidu.com">百度一下</a>

<!-- 链接:href的值#:点击返回顶部 -->
<a href="#">百度一下</a>
<a href="">百度一下</a>

<!-- 伪链接 -->
<a href="javascript:alert('Hello World')">弹出弹窗</a>

<a href="" onclick="alert('Hello HTML')">弹出弹窗</a>

a元素与img元素结合：img元素和a元素一起使用，可以实现图片链接

a元素的其他用途

<!-- 下载 -->
https://github.com/sripathikrishnan/redis-rdb-tools/archive/master.zip

<!-- 邮箱 -->
mailto:12345@qq.com

<!-- ed2k -->
ed2k://|file|%5BCsharp%E9%AB%98%E7%BA%A7%E7%BC%96%E7%A8%8B%28%E7%AC%AC6%E7%89%88%29%5D.%EF%BC%88%E7%....

<!-- 迅雷下载 -->
thunder://QUFmdHAlM0ElMkYlMkZ5Z2R5OCUzQXlnZHk4JTQweTIxOS5keWR5dHQubmV0JTNBODI0MCUyRiU1QiVFOSU5OCVCMy....

span

默认情况下，跟普通的文本没有区别
用于区分特殊文本和普通文本，比如用来显示一些关键字

示例1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .text {
            color:red;
            font-size: 30px;
        }
        
        .new-price {
            color:red;
            font-size: 30px;
        }
        .old-price {
            color:grey;
            text-decoration: line-through;
        }
        
    </style>
</head>
<body>
    <!-- 总结:span主要作用是对普通的文本进行归类 -->
    <!-- 换行符会导致空格 -->
    我是一段文本 
    <span class="text">我是也一段文本</span>
    
    <!-- 价格的显示 -->
    <p>
        <span class="new-price">￥69</span>
        <span class="old-price">￥99</span>
    </p>
</body>
</html>

div

一般作为其他元素的父容器，把其他元素包住，代表一个整体
用于把网页分割为多个独立的部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .box1 {
            float:left;
        }

        .box2 {
            float:right;
        }
    </style>
</head>
<body>

    <!-- 对多个标签或者区域进行统一的操作 -->
    <div class="box1">
        <h1>哈哈哈哈</h1>
        <p>hahahahahahaha</p>
    </div>
    
    <div class="box2">
        <h2>呵呵呵呵</h2>
        <p>hehehehehehhehe</p>
    </div>
    
</body>
</html>

code

<!-- code:显示代码 -->
<!-- 等宽字体:hl -->
<p>
    只是一段代码 <code>function test() {}</code> 代码结束
</p>

<!-- span代替 -->
<p>
    只是一段代码 <span style="font-family: monospace;">function test() {}</span> 代码结束
</p>

br:(break)

<!-- 换行 -->
<p>
    文字内容一<br>
    文字内容二<br>
    文字内容三<br>
    文字内容四<br>    
</p>

hr

<!-- 分割线 -->
<hr color="red">

<div style="height: 5px;background-color:red;"></div>
<!-- 通过边框:border -->
<div class="box"></div>

[小白笔记]HTML 基本元素

一.网页的基本元素

1.1文档声明

1.2 html元素

1.3 head元素

字符编码

1.4 body元素

二.基本元素

h元素

h元素和SEO

p元素

strong元素

img元素

Web常用的图片格式

像素（pixel）

a元素

base元素

iframe元素

锚点连接

伪链接

a元素的其他用途

span

div

code

br:(break)

hr

pre标签:可以保留空格