HTML相关知识点，由本人逐字整理，仅供参考，请勿转载-CSDN博客

本文链接：https://blog.csdn.net/qq_73605126/article/details/142516709

一、html

HTML：超文本标记语言标签组成，用于描述网页

文件保存后缀： .html 或 .htm

超文本：指网页中可以包含图片、链接、音乐、视频、程序等非文字元素

（一）编写网页

网页三部分：文档声明

<!doctype html>

<html>

网页头部

<head>
        <title>第一个网页</title>
    </head>

网页主题

<body>
        第一个网页的内容部分
    </body>

</html>

head 与 body

head: 头部信息，用于描述网页、配置网页信息
- 子标签：
  - title：设置网页的标题
  - meta：设置网页的编码、内容类型等
  - style：描述样式 css
  - script：定义脚本 js
body ：网页的主体部分，用于编写超文本

（二）网页中指定颜色值的方式

直接通过颜色单词来指定颜色例如：红色 red
通过三原色调色板来指定颜色值

红绿蓝

语法1：#RGB(R表示红色 G表示绿色 B表示蓝色)

每个颜色值表示一个16进制的数字，0-f表示颜色由深到浅例如：#000 纯黑色 #fff 纯白色 #f00 红色

语法2：#RRGGBB

每个颜色值表示一个16进制的数字，00-ff表示颜色由深到浅

例如：#000000 纯黑色 #ffffff 纯白色 #ff0000 红色

语法3：rgb(r,g,b) 每一个颜色值表示一个10进制数字，0-255，颜色由深到浅

语法4：rgb(r,g,b,a) 每一个颜色值表示一个10进制数字，0-255，颜色由深到浅

a表示透明度：0.0-1.0之间，从完全不透明到完全透明

在HTML中如何引入文件

通过文件的地址引入文件

方式一：引入本地文件

绝对路径: D:\Desktop\图片1.png
./表示当前目录
../表示跳出当前目录
相对路径：./img/图片1.png

推荐使用相对路径

方式二：引入网络文件：<img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.3C2kS8hTM4G2xvryK8IOuAHaH6?rs=1&pid=ImgDetMain">

网页中使用的长度单位

常用长度单位：
- px: 像素
- em: 字体长度单位，1em会自动替换为当前字体大小
- 百分比：占用父元素的百分比
  
  不常用单位：
  - pc :排卡
  - in：英寸
  - mm：毫米
  - cm：厘米
  - pt：point点

body部分标签

body

属性：

    - bgcolor：设置网页的背景颜色
    - background: 设置网页的背景图片
    - text：设置网页文本颜色

标题标签

文字格式化标签

<b>文本加粗</b>

<i>文本斜体</i>

<del>文本删除线</del>

<u>文本下划线</u>-----------------以下是展示效果------------

文本加粗

文本斜体

文本删除线

文本下划线

空格 / 换行 / 段落

&nbsp; 表示一个空格

<br/> 表示换行

<hr/> 换行并假如分割线

<p> 段落标签

超链接标签

用于指向一个网址/邮箱/手机号/锚点等等

语法格式：

    <a href="链接地址" title="光标移入弹出提示">显示的文本</a>

跳转到网页

<a href="https://www.baidu.com/"  title="点击跳转百度"> 百度一下 </a>
如何消除超链接下划线？
 - 设置文本格式

百度一下

新窗口打开网址

<a target="_blank" href="https://www.baidu.com/"  title="点击跳转百度"> 百度一下(新窗口) </a>

百度一下(新窗口)

发送邮件（调用设备中的邮箱软件，向指定地址编辑邮件）
```
<a href="mailto:3225756837@qq.com">联系我们</a>
```
联系我们

拨打电话

<a href="tel:手机或电话号码">文本</a>

文本

锚点使用

步骤：

建立锚点

<a name="锚点名称">一般锚点不指定文本</a>

在超链接上添加跳转至锚点
- 跳转到当前页面锚点
```
<a herf="#锚点名称">文本</a>
```
- 跳转到其他页面锚点
```
<a herf="页面地址#锚点名称">文本</a>
```

图片标签
- 格式：
  - 属性：
    - src：图片地址
    - alt：当图片加载失败时，展示的文字
    - width：图片的宽度
    - height：图片的高度
      - 一般不建议同时指定宽度和高度，在设置一方时，另一方会跟随宽高比缩放
      - 同时指定宽高会导致图片丢失原有宽高比，导致图片拉伸
div和span

在网页的默认定位中，分为三类
- 块元素(p,div)
  
  显示时独占一行，不与其他元素共享行内空间
- 行内元素块(img)
  
  显示时与其他元素或行内块元素共享一行，可设置宽高
- 行内元素

<> 标签

<head>
        <meta charset="utf-8" />
        <title>百度一下，你就知道</title>
    </head>

1.各级标题写法

    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

结果：

2.文本、图片以及超链接

    <!-- 使用 p标签 写文本 -->
    <p>晴川历历汉阳树，</p>
    <p>芳草萋萋鹦鹉洲。</p>
    <p>日暮乡关何处是？</p>
    <p>烟波江上使人愁。</p>
    
    <strong>加粗</strong>
    
    <!-- 属性名="属性值",块级标签可设置宽度和高度，
    行级不可以，图片属于行块级标签 -->
    <!-- img图片标签  
    alt图片无法正常显示展示代替文字 
    width宽度  hight高度-->
    <img src="img/logo-mi2.png" 
    alt="小米图标" 
    width="56px" height="56px"
    title="logo"/>
    
    <!-- 超链接  a标签-->
    <a href="http://www.baidu.com">跳转百度</a>
    <a href="demo.html">跳转demo页</a>
    <!--"#"表示跳转当前页面-->
    <a href="#">跳转当前页面</a>

<!-- 课堂练习：点击图片跳转到另一个页面 -->
        <a href="https://hadoop.apache.org/">
        <img src="img/elephant.png"
        alt="apache图标" 
        width="71px" height="71px"
        title="logo"/>
        </a>

3.进度条

<!-- 进度条 -->
        <progress></progress>
        <progress max="100" value="80"></progress>

4.列表标签(无序、有序)

无论是有序列表还是无序列表，都通过li标签来表示列表中的一行

    <!-- 无序列表 ul-->
<!-- 属性：
    - type : 前置图标类型（disc/square/circle）
-->

    <ul type="disc">
        <li>一二三四五</li>
        <li>一二三四五</li>
        <li>一二三四五</li>
    </ul>

    <ul type="square">
        <li>一二三四五</li>
        <li>一二三四五</li>
        <li>一二三四五</li>
    </ul>

    <ul type="circle">
        <li>一二三四五</li>
        <li>一二三四五</li>
        <li>一二三四五</li>
    </ul>
-----------------------------------------------------
    <ul>
        <li>MySQL</li>
        <li>Oracle</li>
        <li>SqlServer</li>
        <li>SQLite</li>
        <li>MongoDB</li>
        <li>Redis</li>
    </ul>
==============================================