笔记：HTML5基础内容-CSDN博客

本文链接：https://blog.csdn.net/ghj528/article/details/147400646

HTML5介绍

HTML5是用来描述网页的一种语言，被称为超文本标记语言。用HTML5编写的文件，后缀以.html结尾
HTML是一种标记语言，标记语言是一套标记标签。标签是由尖括号包围的关键字，例如：<html>
标签有两种表现形式：

双标签，例如：<html></html>
单标签，例如：<img>

HTML5的DOCTYPE声明

DOCTYPE是document type (文档类型) 的缩写。<!DOCTYPE html >是H5的声明位于文档的最前面，处于标签之前。他是网页必备的组成部分，避免浏览器的怪异模式。

HTML5基本骨架

<!DOCTYPE html>  #声明
<html lang="en">  #html标签开始点
    <head>  #head标签开始点
        <meta charset="UTF-8">  #meta标签
        <title>我的网站</title>  #title标签
    </head>  #head标签结束点
    <body>  #body标签开始点
    </body>  #body标签结束点
</html>  #html标签结束点

以上就是HTML5的基本骨架了

1）!DOCTYPE html是声明，位于文档的最前面，处于标签之前。他是网页必备的组成部分，避免浏览器的怪异模式。
2）html标签 定义 HTML 文档，浏览器看到后就明白这是个*HTML文档了。这里lang=en表示文档使用英文，lang是language的缩写，en是English的缩写。换成lang=zh就表示文档使用的是中文。
3）head标签 head标签用于定义文档的头部。文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
4）meta标签用来描述一个HTML网页文档的属性，关键词等。charset="utf-8" 是说当前使用的是utf-8编码格式，在开发中我们经常会看到utf-8或是gbk，这些都是编码格式，通常使用utf-8。
5）title标签 定义文档的标题。head标签中唯一必须要求包含的东西，就是说写head一定要写title。它显示在浏览器窗口的标题栏或状态栏上。列如打开百度，它的窗口标签就是“百度一下，你就知道”。而本段代码窗口就会显示“我的网站”
6）body标签定义文档的主体。body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等）它会直接在页面中显示出来，也就是用户可以直观看到的内容。
HTML标签对大小写不敏感，所以这里用大写或者小写都行

标题、段落、换行

 <h1>这是一级标题，</h1>
    <h2>这是二级标题，比一级小</h2>
    <p>这是这个网站的第一个段落</p>
    <p>这是网站<br>的第二个段落</p>

1）标题Heading是通过 <h1> - <h6> 标签进行定义的。这里和word差不多，h1表示一级标题，h2表示二级标题。快捷建标签：h$*6 (建h1-h6)
2）段落是通过<p>标签定义的。中间的文本是属于同一段落的。
3）< br >是换行标签，将一段文本分成了两行，但是还是属于同一段的。

上述代码运行后的结果展示：
在这里插入图片描述

水平线、图片

    <hr color="blue" width="600px" size="30px" align="center">
    <p>相对路径<img src="./宋代.webp" alt="宋代图片" title="宋代" width="400px" height="600px">
    网络路径<img src="https://pic.rmb.bdstatic.com/bjh/240629/dump/ab8ec75f784386492206e76a868fbf5a.jpeg"  width="400px" height="600px">
    绝对路径<img src="D:\Users\86138\Desktop\html/宋代.webp" alt="宋代图片" title="宋代" width="400px" height="600px">
    加载不出图片展示<img src="D:\Users\86138\Desktop\html/12.webp" alt="宋代图片" title="宋代" width="400px" height="600px"></p>

1）<hr> #水平线代码，后面的属性依次为颜色，宽度，高度，位置（px表示像素，center代表居中，left靠左，right靠右），位置默认居中。
2）<img> #图片，src：路径，alt：图像的替代文本，title：鼠标悬停在图片上给予提示。
3）相对路径 两者相对关系，两者在同⼀路径下可以直接访问。相对路径有三种，子级关系：以 /表示（以“我”为起始，在我所在文件层中文件夹里面的文件）** 父级关系** 以 ../表示（在我所在文件层的上一级文件夹里面的文件，要打开这个文件夹才能看到我）同级关系 以 ./表示或者省略（就在我待着的这个文件夹里面的文件）
4）网络路径 就是图片在互联网上所在位置的网址
5）绝对路径电脑的盘符存储与访问的具体地址。（找到文件鼠标单机右键，进入属性，属性里面的文件地址+文件名称就是绝对地址）这里为了展示alt标签，写的绝对路径是错的，所以图片加载不出来。

上述代码运行后的结果展示：
在这里插入图片描述

超链接、文本标签

超链接

HTML使用标签 <a>来设置超文本链接。
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档。
在标签<a> 中使用了href属性来描述链接的地址
默认情况下，链接将以，以下形式出现在浏览器中：

一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时，链接显示为红色并带有下划线。

文本标签

代码	解释
`<em>`	定义着重文字
`<b>`	定义粗体文本
`<i>`	定义斜体字
`<strong>`	定义加重语气
`<del>`	定义删除字
`<span>`	元素没有特定的含义

常用文本标签和段落是不同的，段落代表一段文本，而文本标签一般表示文本词汇

<a href="www.baidu.com">转到百度</a>
    <br>
    <p>白菜</p>
    <p>我喜欢吃<em>白菜</em></p>  
    <br><i>i白菜</i>
    <br><b>b白菜</b>
    <br><strong>strong白菜</strong>
    <br><span>span白菜</span>
    <br><del>del白菜</del>

上述代码运行后的结果展示：
在这里插入图片描述

1）转到百度 #超链接文本，鼠标指针移动到链接上时，箭头会变为一只小手。点击即跳转至百度。
2）使用 b 时，强调的是视觉效果；使用 `strong时，强调的是文本的重要性。大多数浏览器中，就表现页面来看两者表现无差别，但就语境而言，strong表示这个词很重要。（给开发人员看的）

有序列表、无序列表

有序列表

<p>有序列表<br>默认数字格式</p>
<ol>
    <li>第一</li>
    <li>第二</li>
</ol>
<p>有序列表<br>abc格式</p>
<ol type = 'a'>
    <li>第一</li>
    <li>第二</li>
</ol>

运行上面代码：
在这里插入图片描述

type属性

1 表示列表项目用数字标号（1,2,3…）
a 表示列表项目用小写字母标号（a,b,c…）
A 表示列表项目用大写字母标号（A,B,C…）
i 表示列表项目用小写罗马数字标号（i,ii,iii…）
I 表示列表项目用大写罗马数字标号（I,II,III…）

有序列表嵌套

<ol>
    <li>第一</li>
    <ol type = 'a'>
        <li>11111</li>
        <li>22222</li>
    </ol>
    <li>第二</li>
        <ol type="I">
            <li>11111</li>
            <li>22222</li>
        </ol>
</ol>

运行后：
在这里插入图片描述

无序列表

<ul type="disc">
    <li>第一</li>
    <li>第二</li>
</ul>
<ul type="circle">
    <li>第一</li>
    <li>第二</li>
</ul>

运行后：
在这里插入图片描述

<ul>的属性type 拥有的选项

disc 默认实心圆
circle 空心圆
square 小方块
none 不显示

无序列表嵌

<ul type="disc">
    <li>第一</li>
    <ul type="circle">
        <li>第一</li>
        <li>第二</li>
    </ul>
    <li>第二</li>
    <ul type="square">
        <li>第一</li>
        <li>第二</li>
        <ul type="none">
            <li>第一</li>
            <li>第二</li>
        </ul>
    </ul>  
</ul>

运行后：
在这里插入图片描述

有序无序结合镶嵌

<ol>
    <li>第一</li>
    <ol type = 'a'>
        <li>11111</li>
        <ul type="circle">
            <li>第一</li>
            <li>第二</li>
        </ul>
        <li>22222</li>
        <ul type="none">
            <li>第一</li>
            <li>第二</li>
        </ul>
    </ol>
    <li>第二</li>
        <ol type="I">
            <li>11111</li>
            <ul type="square">
                <li>第一</li>
                <li>第二</li>
            </ul>  
            <li>22222</li>
        </ol>
</ol>

运行后：
在这里插入图片描述

表格

表格组成与特点
组成：行、列、单元格
单元格特点：同行等高、同列等宽。
表格标签**
表格：<table> 行：<tr> 单元格(列)：<td>

<p>第一张表</p>
<table>
    <tr>
        <td>1行1列</td>
        <td>1行2列</td>
    </tr>
    <tr>
        <td>2行1列</td>
        <td>2行2列</td>
    </tr>
</table>
<p>第二张表</p>
<table border="8px" width="200px" height="18px">
    <tr>
        <td>1行1列</td>
        <td>1行2列</td>
    </tr>
    <tr>
        <td>2行1列</td>
        <td>2行2列</td>
    </tr>

运行后：
在这里插入图片描述

1）表格是先按行生成，编写完一行的所有列后在编辑下一行。
2）表格属性是可以定义的，border是边框，width是单元格宽度，height是表格高度。还有其他的定义，比如align定义表格位置等。

单元格合并

<p>第一张表</p>
<table border="8px" width="400px" height="18px">
    <tr>
        <td colspan="2">1行1列1行2列</td>
        <td>1行3列</td>
    </tr>
    <tr>
        <td rowspan="2">2行1列3行1列</td>
        <td>2行2列</td>
        <td>2行3列</td>
    </tr>
    <tr>  
        <td>3行2列</td>
        <td>3行3列</td>
    </tr>
</table>

运行后：
在这里插入图片描述

1）水平合并：colspan，后面数字表示合并同一行几项单元格。被合并的内容就放在同一行面，原本的列就不用写了。
2）垂直合并：rowspan，后面数字表示合并同一列几项单元格。被合并的内容就放在同一列里面，原本的列就不用写了。
如：这本来是3*3的表格，1行1、2列合并之后第一行就只需要再建立1个列的代码就行了。2、3行第1列合并之后在第三行就只需要再建2个列就行了。

form表单

表单在 Web 网页中用来给用户填写信息，从而能采用户信息，使网页具有交互的功能。

所有的用户输入内容的地方都用表单来写，如登录注册、搜索框

表单是由容器和控件组成的,一个表单一般应该包含用户填写信息的输入框,按钮等，这些输入框,按钮叫做控件,表单就是容器,它能够容纳各种各样的控件。

<form action="url" method="get|post" name="myform"></form>

属性说明

action服务器地址
name表单名称

method中 Get和 Post的区别

数据提交方式，get把提交的数据url可以看到，post看不到
get一般用于提交少量数据，post用来提交大量数据

表单元素、文本框、密码框、提交按钮

<form action="/" method="post">
    <!-- 文本输入框 -->
    <label for="name">用户名:</label>
    <input type="text" id="name" name="name" required>

    <br>

    <!-- 密码输入框 -->
    <label for="password">密码:</label>
    <input type="password" id="password" name="password" required>

    <br>

    <!-- 单选按钮 -->
    <label>性别:</label>
    <input type="radio" id="male" name="gender" value="male" checked>
    <label for="male">男</label>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">女</label>

    <br>

    <!-- 复选框 -->
    <input type="checkbox" id="subscribe" name="subscribe" checked>
    <label for="subscribe">订阅推送信息</label>

    <br>

    <!-- 下拉列表 -->
    <label for="country">国家:</label>
    <select id="country" name="country">
        <option value="cn">CN</option>
        <option value="usa">USA</option>
        <option value="uk">UK</option>
    </select>

    <br>

    <!-- 提交按钮 -->
    <input type="submit" value="提交">
</form>

运行后：
在这里插入图片描述

1）<label> #为表单添加标签。这里是第一个表单标签是（用户名：）
2）<input> #设定文本域，就是提供一个文本框供用户输入。
这里<type="text" id="name" name="name" required>

type定义的是文本域的格式是文本格式（可见），将type改为password的话就如这里密码框一样，将输入文本以小黑点替代了。
required定义是该选项不能为空。如果不填提交会报错。
id、mane这些是收集信息的标签，方便存储时归类。

3）单选择按钮<input type="radio"> #表示文本域成了一个选择按钮，只有勾选与不勾选两种状态。单选按钮的特点是用户只能在一组同名的单选按钮中选择一个选项。这里男女只能点击一个。

id=“male” 和 id=“female”：分别为两个单选按钮设置了唯一的标识符，方便通过CSS或JavaScript进行操作。
name=“gender”：为两个单选按钮设置了相同的name属性值，表示它们属于同一组选项。用户只能在这两个选项中选择一个。
checked：这是一个布尔属性，表示单选按钮在页面加载时默认被选中。在这个例子中，male单选按钮默认被选中。
for=“male” 和 for=“female”：for属性的值与单选按钮的id属性值一致，表示标签与单选按钮的关联。当用户点击标签时，对应的单选按钮会被选中。

4）复选框<input type="checkbox"> #定义了一个复选框。复选框的特点是用户可以选择多个选项，或者不选择任何选项。其他的属性与上面作用一样。

5）下拉选择框<select> #让用户从预定义的选项中选择一项。

<label for="country">国家:</label>：定义了一个标签，用于提示用户选择国家。for=“country”：for属性的值与下拉选择框的id属性值一致，表示标签与下拉选择框的关联。
<option value="cn">CN</option>：定义了一个选项，值为cn，显示文本为CN。

6）提交按钮<input type="submit" value="提交"> #type=submit就是定义了一个提交按钮，value=提交定义了按钮的显示为提交。