3. HTML-CSDN博客

本文链接：https://blog.csdn.net/weixin_55439500/article/details/132779379

1 概念

HTML是HyperText Markup Language的简称，中文名称：超文本标记语言，它是一种用于创建网页的标准标记语言。

标记语言是由标签构成的语言。<标签名称>例如html，xml；标记语言不是编程语言。

HTML 运行在浏览器上，由浏览器来解析。

2 快速入门

html文档的后缀名

.html和.htm两种都可以，没有区别。授课中都是.html后缀名，个人习惯不同而已。
标签的分类
- 围堵标签：有开始标签和结束标签，例如
- 自闭和标签：开始标签和结束标签都在一个标签中

标签可以嵌套，但是嵌套的语法要正确

正确案例：<p><a></a></p>
错误案例：<p><a></p></a>

标签的内部是可以定义属性的，属性由键值对组成，值需要用双引号引起来，多个属性用空格隔开
```
<标签名称 属性名1="属性值" 属性名2="属性值"></标签名称>
<p id="p1" name="p1">    
</p>
```
html标签不区分大小写，但是推荐全小写

3 HTML文档的基本结构

HTML文档也叫web页面。

3.1 基本结构

<!-- 声明当前文档是html5文档 -->
<!DOCTYPE html>
<!-- html,根元素 ，围堵标签-->	
<html>
	<head>
		<meta charset="utf-8" />
		<title>这是我的第一个HTML页面</title>
	</head>
	<!--body，主体：浏览器显示的内容都将在这里编写
		格式化代码的快捷键：ctrl+shift+f（英文状态下使用）
	-->
	<body>
		hello html 这是我的第一个HTML页面
	</body>
</html>

3.2 HTML的注释

语法：
HTML注释以<!-- 开头  ，以-->结尾。
注释的部分浏览器不解析，注释是为了给程序员看，更好的了解html代码
<!--
	这里编写HTML注释，
	可以是一行，也可以是多行
-->

4 常用标签

HTML中的标签有很多，我们只讲解比较常用的标签。其他标签大家感兴趣的就再自行查询。

4.1.文本标签

1. 标题标签   <h1></h1> 
2. 段落标签   <p></p> 
3. 换行标签   <br>
4.水平线标签  <hr> 
5. 范围标签   <span></span>一般在内容中为了突出部分信息时使用，嵌套在其他标签中使用
<!--PS：不是因为有了范围标签，局部内容的样式才有变化；是为了改变局部内容样子，我们才通过范围标签包裹，然后修改它的样式。 -->

4.2 图片标签

<img src="图片路径" title="图片名称" width="12px" height="12px"/>
<!-- ps: ../ 表示上一级目录  alt的作用和title相同 -->

4.3列表标签

<!--一般用在导航上-->
   无序列表           有序列表
- - - - - - - - - - - - - - - - - -
<ul>           |    <ol> 
   <li></li>   |       <li></li>
   <li></li>   |       <li></li>
   <li></li>   |       <li></li>
</ul>          |    </ol>
- - - - - - - - - - - - - - - - - - - 

描述标签  -->一般用在图文混编的场景中
<dl>
   <dt></dt> 用来放置标题或图片<dt><img src="a.png" title="小熊饼干"/></dt>
   <dd></dd> 对图片的补充说名或列表内容
</dl>

4.5 div标签

一般就是做容器，盛放其他标签的，将其他标签组合在一起用来布局。

4.6 标签分类

html标签可以分为块状元素和行级元素两类。
- 块状元素：新起一行，可以容纳其它元素h1,p,hr,div ol,ul,dl
- 行级元素：只能容纳文本或者其他行内元素。span,img
- 区分方法：是否独占一行。
块状元素和行级元素的区别：

1、块级元素会独占一行，其宽度自动填满其父元素宽度；

行级元素会排列到同一行里，其宽度随元素的内容变化而变化。

2、块级元素可以设置宽高；行内元素设置宽高无效。

3、块级元素可以设置margin，padding属性；行内元素的水平方向的padding会有边距效果，但是竖直方向的padding没有效果。

6 超链接

作用 1、实现页面间的跳转 2、实现锚链接功能

6.1 页面跳转

<a href="a.html" target="_blank">点击跳转</a>
<!--
target的值：
	_self 在当前页面打开
	_blank 在新页面打开
-->

6.2 锚链接

跳转到当前页面的指定位置
也可以实现不同页面间的锚链接

一. 本页面的锚链接
	1. 目标位置定义锚点<a name="锚点名称">目标位置已到达</a>
	2. 超链接的href属性使用锚点<a href="#锚点名称" target="_self">这里是锚链接</a>
二. 不同页面锚链接
	1. 在index.html中设置锚链接<a name="锚点名称">第二个页面的目标位置</a>
	2. 在第一个页面中设置超链接<a href="index.html#锚点名称">点击跳跃</a>

7 表格标签

7.1 规则表格

<table border="1" cellpadding="0"cellspacing="1" width="" height=""><!--边框，内边距，边与边距离-->
   <tr> <th></th><th></th><th></th> </tr><!--tr:定义行， th:定义表头-->
   <tr> <td></td><td></td><td></td> </tr><!--td:存放一行记录-->
   <tr> <td></td><td></td><td></td> </tr>
</table>

7.2 不规则表格

 <!--不规则表格创建-->
    <table border="1" cellspacing="1" cellpadding="3">
        <tr align="center">
            <td colspan="3">个人简历</td><!--colspan 合并列-->
        </tr>
        <tr>
            <td align="center">姓名</td>
            <td>贾宝玉</td>
            <td rowspan="3">个人照片</td><!--rowspan 合并行-->
        </tr>
        <tr>
            <td>出生年月日</td>
            <td>1998-6</td>
        </tr>
        <td align="center">电话</td>
        <td>17734013850</td>
    </table>

7.3 表格的高级标签

<!--总体格式为-->
<table>
   <caption></caption>  <!--表格标题-->
   <thead>
      <tr><th></th></tr>
   </thead>
   <tbody>
   	<tr><td></td></tr>
   </tbody>
   <tfoot>
   	<tr><td></td></tr>
   </tfoot>
</table>

案例展示
<table border="1" cellpadding="1" cellspacing="1" width="50%">
    <caption>资产负债表</caption>  
    <thead style="background: lavenderblush">  
    	<tr>
        <th>月份</th><th>负债</th><th>资产</th>
    	</tr>
    </thead>
    <tbody style="background: lightblue">
    	<tr>
        <td>1月份</td><td>10000</td><td>10000</td>
    	</tr>
    	<tr>
        <td>2月份</td><td>10000</td><td>10000</td>
    	</tr>
    	<tr>
        <td>3月份</td><td>10000</td><td>10000</td>
    	</tr>
    </tbody>
    <tfoot style="background: khaki">
    	<tr>
        <td>总计</td><td>21000</td><td>21000</td>
    	</tr>
    </tfoot>
</table>

8 表单

8.1 概念

表单用于采集用户输入的数据。和服务器进行交互。

8.2 表单项属性

id:元素的唯一表示，不重复
name:表单项元素名称，能提交给服务器。
value:表单项元素值，服务器获取name的值为value
type:表示表单项元素的呈现形式
class:表示样式名称
readonly:表示只读。
disabled：表示禁用，该元素不能改而且背景是灰色

8.3 表单元素

<form action="../test2.html" method="get" enctype="multipart/form-data">
   <!--action:将数据提交给谁  method:提交方式 enctype:表单有上传文件时取值为:multipart/form-data-->
   	<!--两种提交方式:1.get不安全，参数大小有限，参数会封装到请求行中 2.post 安全 没有大小限制，参数会封装到请求体中-->
1.文本框    
    <label for="userName">用户名</label>
    <input type="text" id="userName" name="userName" placeholder="请输入用户名"><br>
   	<!--表单数据想要提交给服务器，必许指定name属性-->
   	<!--placeholder:表示文本提示，用户输入时自动消失-->
2.密码框
    <label for="password">&nbsp;密&nbsp;码&nbsp;</label>
    <input type="password" id="password" name="password" required><br>
   	<!--required: 表示必填项-->
3.单选按钮
    性别：<input type="radio" name="gender" value="1" checked>男
    <input type="radio" name="gender" value="0">女<br>
    婚姻情况：<input type="radio" name="marry" value="1">已婚
    <input type="radio" name="marry" value="0" checked>未婚<br>
   	<!--name相同的表示一组并互斥发生。checked:表示默认选中-->
4.复选框
    爱好：<input type="checkbox" name="hobby" value="swim">游泳
    <input type="checkbox" name="hobby" value="sing">唱歌
    <input type="checkbox" name="hobby" value="dance">跳舞
    <input type="checkbox" name="hobby" value="rap">rap
    <input type="checkbox" name="hobby" value="basketball">篮球<br>
   	<!--name相同的表示一组可同时选中多个。checked:表示默认选中-->
5.文件域
    文件：<input id="text" type="file" name="handImg" multiple><br>
   	<!--表单如果有上传文件，必须要有enctype="multipart/form-data"-->
   	<!--multiple:表示可以上传多个文件-->
6.日期
    生日日期：<input type="datetime-local" name="birthday"><br>
   	<!--datetime-local:表示年月日十分秒-->
7.隐藏域
    <!--    隐藏域：<input type="hidden" name="userID" value="1001"><br>-->
   	<!--hidden:页面上看不到任何效果-->
   	<!--作用：隐藏一些用户不关心但是程序眼需要的值-->
8。下拉列表
    <select name="month">
        <option value="2">缅北</option>
        <option value="3">日本</option>
        <option value="1" selected="selected">中国</option>
    </select>
   	<!--select中写name，value是上传给服务器的值，selected表示默认选中-->
9.文本域
    协议：<textarea  rows="15" cols="50" readonly="readonly" disabled>
    水波梁山英雄会注册会员条款说明：
    1. 必须遵守
    2.......
    </textarea>
   	<!--readonly:表示只读，disabled:表示不可用，样式呈现灰色-->
10. 按钮
    <input type="submit" value="注册" id="regBtn">  提交按钮
    <input type="image" src="img/夜光.png" width="50" height="50" id="regBtn"> 等价于提交按钮
    <input type="reset" value="重置" id="reset">  重置按钮
    <input type="button" value="普通按钮" id="btn">  普通按钮，没有任何功能
   	<!--button标签与input可以实现互换-->
   
    <label for="regBtn">必要的头像选择</label> 找input中id=”regBtn“
   	<!--label的for属性对应input的id属性，点击label区域会让input输入框获取焦点-->

在这里插入图片描述

点击注册按钮或者图片按钮之后地址栏的内容为：

http://localhost:63342/HTMLDemo/.idea/test2.html?userName=%E4%BA%8E%E6%B4%8B&
password=123456&gender=1&marry=0&hobby=sing&hobby=dance&hobby=rap&hobby=basketball&
handImg=&birthday=2023-09-01T10%3A04&month=1

9 框架

9.1 概念

通过使用框架，可以在同一个窗口中显示不止一个页面。
如京东的个人页面，点击左侧时候，只有右边页面发生变化。左侧和上面的均不变，这就是框架

9.2 框架语法

<p>
    <a href="https://www.mutefun.tv/" target="content">查询</a><!--在段落中放入超链接，打开位置为content-->
</p>
<iframe name="content" src="FormDemo.html" width="100%" height="500"></iframe>
	<!--iframe:定义内嵌框架 src:表示默认界面 name:内嵌框架的名称-->

11 布局组合

div-ul-li/div-ol-li：常用于导航布局
div-dl-dt-dd:常用于图文混编布局
div-form:常用于表单布局
div-table:常用于局部规则数据展示布局

12. HTML新标签

12.1 Input标签

color date datetime datetime-local 
email month number range search 
tel time url  week

12.2 音频文件

<!--在HTML中使用audio表示音频，具体用法如下：-->
<audio controls>      
  	<source src="文件路径" type="audio/mpeg">
	您的浏览器不支持 audio 元素。
</audio>
<!--control 属性供添加播放暂停和音量控件-->

12.3 视频文件

<!--  在HTML中使用video表示视频，具体用发如下：-->
<video width="320" height="240" controls>
    <source src="video/fate00.mp4" type="video/mp4">
</video>

12.4 转移符号

（了解即可）

转移符号	描述
` `	转义为空格
`<`	转义为小于号<
`≤`	转义为小于等于号≤
`>`	转义为大于号>
`≥`	转义为大于等于号≥
`©`	转义为版权符号 ©

转移符号	描述
` `	转义为空格
`<`	转义为小于号<
`≤`	转义为小于等于号≤
`>`	转义为大于号>
`≥`	转义为大于等于号≥
`©`	转义为版权符号 ©

转移符号	描述
` `	转义为空格
`<`	转义为小于号<
`≤`	转义为小于等于号≤
`>`	转义为大于号>
`≥`	转义为大于等于号≥
`©`	转义为版权符号 ©

转移符号	描述
` `	转义为空格
`<`	转义为小于号<
`≤`	转义为小于等于号≤
`>`	转义为大于号>
`≥`	转义为大于等于号≥
`©`	转义为版权符号 ©