昨日回顾

html相关概念

• 是什么：超文本标记语言
• 有什么用：描述一个页面
• 怎么用：使用合适的标签搭建页面骨架，使用属性控制样式

特点：语法非常宽松；不区分大小写，区别于xml；标签预定义好，是固定的

语法：标签（元素），标签体，属性，注释，特殊字符

HTML常见标签：文档（html，head，meta，title），文本（font，h1-h6，p），格式（hr，br，strong/b,em/i,u,mark)

列表相关标签

可以使用type来定义列表的样式

HTML无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表使用

标签

​

• Coffee
• Milk

​

type	样式
disc	默认实心圆
circle	空心圆
square	实心方块

type在html5中已废弃

HTML 有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于

标签。每个列表项始于
1. 标签。

   列表项使用数字来标记。

   ​

   1. Coffee
   2. Milk

   ​

   ​

   1. 手机
   2. 电视
   3. 家电

   ​

   HTML 自定义列表

   自定义列表不仅仅是一列项目，而是项目及其注释的组合。

   自定义列表以

   标签开始。每个自定义列表项以

   开始。每个自定义列表项的定义以

   开始。

   ​

   • Coffee

     • black hot drink

   • Milk

     • white cold drink

   ​

   浏览器显示如下：

   • Coffee

     • black hot drink

   • Milk

     • white cold drink

   提示: 列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

   标签分类

   依据：标签能否独占一行

   行级元素

   特点——上一行有空间，就在上一行显示，没有空间另起一行

   strong，font，em 都是行级元素

   span：纯粹的行级元素，没有任何样式，方便后期用css设置样式，不可以换行。主要用于分隔一行内容，可以存放少量数据。

   用于对文档中的行内元素进行组合。

   标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。如果不对 应用样式，那么 元素中的文本与其他文本不会任何视觉上的差异。

   标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。

   块级元素

   特点——不管上一行有无空间，直接另起一行显示

   p，ul都是块级元素

   div：纯粹的块级元素，没有任何样式，方便后期用css设置样式，主要用于布局div+css

       <div> 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。
   ​
       <div>标签常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化。
   

   图片媒体标签

   图片标签

   标签名 img

   标签定义 HTML 页面中的图像。

   标签有两个必需的属性：src 和 alt。

   注释： 从技术上讲，图像并不会插入 HTML 页面中，而是链接到 HTML 页面上。 标签的作用是为被引用的图像创建占位符。

   提示： 通过在 标签中嵌套 标签，给图像添加到另一个文档的链接。

   其他属性

   width：宽度

   height：高度

   alt：规定图片无法显示的时候替代文本

   title：鼠标经过图片提示文字

   src 图片的路径

   路径分类：

   1.绝对路径：以盘符开头，用本地方式才能打开(不推荐)

   2.相对路径：相对于当前html文件路径，把路径中相同部分去掉，剩下的就是相对路径。以./开头，都可以打开

   相对路径的三种情况

   1.图片在html文档的下一级目录：./图片目录名/图片名

   2.同一级目录：./图片名 或者直接使用 图片名

   3.上一级目录：../图片名 （../回退到上一级

   音频视频媒体标签

   音频标签：
   标签名 audio
       src，规定路径
       controls提供属性控件，是一个布尔属性
       control 属性供添加播放、暂停和音量控件。
   ​
   在<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本 。
   ​
   <audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件
   ​
   <audio src="./img/audio.mp3" controls></audio> <!-- 属性名和属性值一样的，可以不写属性值 -->
   

   ​​

   如需在 HTML5 中显示视频：

   ​

   file:///D:/web-gis/0711%E6%A0%87%E7%AD%BE/%E8%B5%84%E6%96%99/img/video.mp4?lastModify=1690024046

   ​

   ​​

   属性	值	描述
   autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
   controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
   height	pixels	设置视频播放器的高度。
   loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
   muted	muted	如果出现该属性，视频的音频输出为静音。
   poster	URL	规定视频正在下载时显示的图像，直到用户点击播放按钮。
   preload	auto metadata none	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
   src	URL	要播放的视频的 URL。
   width	pixels	设置视频播放器的宽度。

   链接相关标签

   a标签

   属性

   标签定义超链接，用于从一个页面链接到另一个页面。

   元素最重要的属性是 href 属性，它指定链接的目标。

   在所有浏览器中，链接的默认外观如下：

   • 未被访问的链接带有下划线而且是蓝色的
   • 已被访问的链接带有下划线而且是紫色的
   • 活动链接带有下划线而且是红色的

   标签的 target 属性规定在何处打开网页

   _blank	在新窗口中打开被链接文档。
   _self	默认。在相同的框架中打开被链接文档。
   _parent	在父框架集中打开被链接文档。
   _top	在整个窗口中打开被链接文档。
   framename	在指定的框架中打开被链接文档。

   百度

   浏览器特点：

   如果能够识别访问资源的格式，就会自动打开，如果不能，就会自动下载，如压缩包。

   根据跳转资源的位置分类

   1.站外链接：跳转到其他网站或者应用

   2.站内链接：跳转到本网站的另外一个页面或者资源

   3.锚链接：跳转到当前页面的其他不同部分，

   锚链接：模拟文章章节跳转

   第一步：生成两个目录

   <div id="top">目录</div>
   

   第一章

   ​

   第二章

   第二步：快速生成两个章节的内容（h3#p1{第一章}+p>lorem1000

   ​

   第一章

   ​

   布局相关标签

   什么是语义元素?

   一个语义元素能够清楚的描述其意义给浏览器和开发者。

   无语义 元素实例:

   和 - 无需考虑内容.

   语义元素实例:

   , , and - 清楚的定义了它的内容.

   HTML5 提供了新的语义元素来明确一个Web页面的不同部分:

   之前：

   ,

   , 或者

   , 来指明导航链接, 头部, 以及尾部.

   • < header>
   • < nav>
   • < section>
   • < article>
   • < aside>
   • < figcaption>
   • < figure>
   • < footer>

   这些标签称为语义化标签，没有任何样式，主要用于划分不同区域，便于页面布局

   HTML5

   元素

   ​

   元素描述了文档的头部区域

   ​

   ​

   元素主要用于定义内容的介绍展示区域.

   ​

   在页面中你可以使用多个

   元素.

   HTML5

   元素

   定义文档主体

   HTML5

   元素

   定义导航链接

   HTML5

   元素

   定义文档底部区域

   HTML5

   元素

   定义页面主区域内容之外的内容（如侧边栏

   HTML5

   元素

   定义文档中的节，如章节，页眉，页脚

   HTML5

   元素

   定义文档中的文章部分

   表单相关标签

   HTML 表单用于收集用户的输入信息。

   HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。

   以下实例创建了一个表单，包含一个普通输入框和一个密码输入框：

   <**form** action="">
    Username: <**input** type="text" name="user"><**br**>
    Password: <**input** type="password" name="password">
    </**form**>
   

   表单的组成（四大标签）

   ​​

   1、form，表单标签，约定提交的范围

   重要属性：action——设置表单要提交的地址，默认提交到当前页面

   method：设置表单提交方式（默认get方式

   get：将数据拼接到地址栏后面，以名称和值的方式，成对拼接，如：username&password=123

   弊端：相对不安全，且只能提交少量数据，URL只能提交3000字。请求体中无数据

   post：将数据拼接到请求体当中，相对安全，可以提交大量数据，主要用于文件上传，或者提交敏感数据

   post请求对应的响应代码没有写，所以会报错405.但不影响

   地址栏后面没有拼接数据，数据在请求体当中

   2、input，输入项，单选，多选

   根据type属性值的不同，显示不同样式，方便用户输入或者选择

   重要属性type

   • text 文本框
   • password 密码框
   • radio 单选框
   • checkbox 复选框
   • file 文件筐
   • reset 重置按钮（恢复页面到刚打开时的效果）
   • submit 提交按钮（将页面数据提交到后台）
   • button 普通按钮（结合js使用。

   name 属性规定 元素的名称。

   name 属性用于在 JavaScript 中引用元素，或者在表单提交后引用表单数据。

   注意： 只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。

   可以为单选和复选框进行分组，同一组单选框，一次只能选中一个

   value——对于单选和复选，需要指定value属性的值，用于在后台区分用户到底选了哪个选项

   设置submit，reset，button上的默认文字

                 可以设置下拉框中option标签的值，设置之后提交到后台使用的就是value里的值，否则使用的就是option标签体的值
   

   checked 默认选中，布尔属性

   3、select，下拉选择框，如果取值是固定的几个，可以考虑使用下拉选择框

   option 子标签，定义下拉选择框的选项

   selected 默认选中，布尔属性

   4、textarea，文本域标签

   主要用于输入大段文本，比如个人简介，商品评价

   重要属性

   cols列数（宽度）

   rows行数（高度）

   勾选框：value也可以不写，如果没有勾选提交到后台，获取的值是undefined/null，就可以知道是否勾选

   我同意所有条款

   表单元素是允许用户在表单中输入内容，比如：文本域（textarea）、下拉列表（select）、单选框（radio-buttons）、复选框（checkbox） 等等。

   我们可以使用 标签来创建表单