第一天：HTML-CSDN博客

本文链接：https://blog.csdn.net/lhhzzy/article/details/114501034

HTML

语法

html的标签是通过由<>包围的关键字比如
```
<html></html>
```

包含和并列关系

//包含
<head>
    <title></title>
</head>
//并列
<head></head>
<boby></boby>

基本结构标签

<!-- 页面中最大的标签 根标签 -->
<html>
    <!-- 头部标签 -->
    <head> 
        <!-- 网页标题标签 -->
        <title></title> 
    </head>
    <!-- 文档的主体 -->
    <body>
    </body>
</html>

文档类型<!DOCTYPE>

用来说明你用的XHTML或者HTML是什么版本。告诉浏览器按照HTML5标准解析页面。

<!DOCTYPE html>
<!-- 告诉浏览器这个是hmtl5写的页面  这个必须在页面的最上端-->

页面语言lang

lang指定该html标签内容所用的语言

<html lang="zh-CN">
<!-- 当前文档的显示语言  en急速英语  zh-CN就是中文 -->

其他作用：

根据根据lang属性来设定不同语言的css样式，或者字体
告诉搜索引擎做精确的识别
让语法检查程序做语言识别
帮助翻译工具做识别
帮助网页阅读程序做识别

字符集

「字符集」(Character set)是多个字符的集合,计算机要准确的处理各种字符集文字，需要进行字符编码，以便计算机能够识别和存储各种文字。

UTF-8是目前最常用的字符集编码方式
让 html 文件是以 UTF-8 编码保存的，浏览器根据编码去解码对应的html内容

<head>
    <!-- 不写会出现乱码 -->
    <meta charset="UTF-8">
   
</head>

HTML常用标签

标题标签<h1>-<h6>一级标题到6级标题 =md中的#
段落标签和换行标签<p></p>段落标签
换行标签单标签 <br />强制换行(也可以这么写<br>)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- h1到h5修饰的标题从大到小以此类推 -->
    <h1>我</h1>
    <h2>我</h2>
    <h3>我</h3>
    <h4>我</h4>
    <h5>我</h5>
    
    <p>我爱中共安康回到家奥委会的金阿奎搭嘎接口类和抵押金高表达接口</p>
    的尬舞来几个大悟的高架路往观看就登记卡我回到<br/>家卡高度为客户端尬舞看见多GV建华大街看外公回到家奥斯卡后丢我个呆逼
    爱的哈库一丢哈酒公司借款搭嘎为广大我
</body>
</html>

在这里插入图片描述

文本格式化

语义	标签	说明
加粗	或者	更推荐使用标签加粗，语义更强烈
倾斜	或者	更推荐使用标签，语义更强烈
删除线	或者	更推荐使用标签，语义更强烈
下划线	或者	更推荐使用标签，语义更强烈

div和span标签

<!-- <div>和<span>是没有语义的，它们就是一个盒子，用来装内容的。 -->
    <!-- <div>行元素 </span>块元素 -->
    <div>这是头部</div>
    <span>今日价格</span>

图像标签

在HTML标签中，<img>标签用于定义HTML页面中的图像。

<img src="图像URL" />

src是<img>标签的必须属性，它用于指定图像文件的路径和文件名。

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本，图像不能显示的文字
title	文本	提示文本，鼠标放到图像上，显示的文字
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框粗细

图像标签属性注意点：
① 图像标签可以拥有多个属性，必须写在标签名的后面。
② 属性之间不分前后顺序，标签名与属性，属性与属性之间均以空格分开。
③ 属性采取键值对的格式，即key=“value”的格式，属性=“属性值”。

路径

目录文件夹和根目录：
实际工作中，我们的文件不能随便乱放，否则用起来很难快速的找到他们，因此我们需要一个文件夹来管理他们。
**目录文件夹：**就是普通的文件夹，里面只不过存放了我们做页面所需要的相关素材。比如html文件、图片等。
**根目录：**打开目录文件夹的第一层就是根目录。

相对路径：以引用文件所在位置为参考基础，而建立的目录路径。
这里简单来说，图片相对于HTML页面的位置

相对路径分类	符号	说明
同一级路径		图像文件位于HTML文件的同一级，如`<img src="baidu.gif"/>`
下一级路径	/	图像文件位于HTML文件的下一级，如`<img src="images/baidu.gif"/>`
上一级路径	…/	图像文件位于HTML文件的上一级，如`<img src="../baidu.gif"/>`

绝对路径
是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径
例如：“E:\web\images\img.jpg" 或完整的网络网址“http://www.itcast.cn/images/logo.gif”

超链接标签

在HTML标签中，<a>标签用于定义超链接，作用是从一个页面链接到另一个页面。

<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>

属性	作用
herf	用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能
target	用于指定链接页面的打开方式，其中_self为默认值，当前窗口打开页面，_blank为在新窗口中打开页面

链接分类

外部链接，例如<a href="http://www.baidu.com">百度</a>。
内部链接：网站内部页面直接的相互链接，直接链接内部页面名称即可，例如<a href="index.html">首页</a>。
空链接：如果当时没有确定链接目标时，<a href="#">首页</a>。
下载链接：如果href里面的地址是一个文件或者压缩包，会下载这个文件。地址链接是文件 .exe 或者是 .zip 等压缩包形式。
网络元素链接：在网页中的各种元素，如文本、图像、表格、音频、视频等都可以添加链接。
锚点链接：点击链接可以快速定位到页面中的某个位置。
① 在链接文本的href属性中，设置属性只为#名字的形式，如<a href="#two">第二集</a>
② 找到目标位置标签，里面添加一个id属性 = 刚才的名字，如：<h3 id="two">第二集介绍</h3>

HTML中的特殊字符

在这里插入图片描述

表格标签

表格的作用

表格主要用于显示、展示数据，因为它可以让数据显示的非常规整，可读性非常好，特别是后台展示数据的时候，能够熟练运用表格就显得很重要，一个清爽简约的表格那个把繁复的数据表现得很有条理。
表格不是用来布局页面的，而是用来展示数据的。

表格的基本语法

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格</title>
</head>
<body>
    <!-- <table></table>是用于定义表格的标签 -->
    <table>
        <!-- <tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中 -->
        <tr>
            <!-- <td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中 -->
            <td>111</td>
        </tr>
    </table>
</body>
</html>

表头单元格标签

一般表头单元格位于表格的第一行或者第一列（就是第一行的td换成th），表头单元格里面的文本内容加粗居中显示。
<th>标签表示HTML表格的表头部分（table head ）的缩写。

表格属性

属性名	属性值	描述
align	left(左)、center（中）、right（又）	规定表格相对周围元素的对其方式
border	1或“”	规定表格单元是否有边框，默认为“”，表示没有边框
cellpadding	像素值	规定单元边沿与其内容之间的空白，默认为1像素。
cellspacing	像素	规定单元格之间的空白，默认2像素
width	像素或百分比	规定表格的宽度

表格结构标签

使用场景：因为表格可能很长，为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分。
在表格标签中，分别用：标签表格的头部区域（就是把第一行的th包含进去），标签表格的主体区域（就是是td的那些行）。这样可以更好的分清表格结构。

:用于定义表格的头部。内部必须拥有标签。一般位于第一行。 :用于定义表格的主体，主要用于放数据本体。以上标签都是放在

标签中。

合并单元格

跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan=“合并单元格的个数”

表格总结

标签名	定义	说明
`<table></table>`	表格标签	就是一个大盒子
`<tr></tr>`	表格行标签	行标签要再table标签内部才有意义
`<td></td>`	单元格标签	单元格标签是个容器级元素，可以放任何东西
`<th></th>`	表头单元格标签	它还是一个单元格，但是里面的文字会居中且加粗
`<caption></caption>`	表格标题标签	表格的标题，跟着表格一起走，和表格居中对齐
`clospan 和 rowspan`	合并属性	用来合并单元格的