华清远见重庆中心-阶段总结学习心得分享

已于 2022-11-21 15:14:13 修改
阅读量237 收藏
点赞数
文章标签： html5 css
于 2022-11-20 20:16:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51312610/article/details/127950051
版权

文章目录

HTML的学习

一、初识HTML

1、HTML是什么？

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

2、HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如
HTML 标签通常是成对出现的，比如 和
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

3、HTML 文档 = 网页

HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页
Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：


<html>
<body>

<h1>我的第一个标题</h1>

<p>我的第一个段落。</p>

</body>
</html>

例子解释
<html> 与 </html> 之间的文本描述网页
<body> 与 </body> 之间的文本是可见的页面内容
<h1> 与 </h1> 之间的文本被显示为标题
<p> 与 </p> 之间的文本被显示为段落

二、HTML的标题（h标签）

标题（Heading）是通过 h1 - h6 等标签进行定义的。

h1 定义最大的标题。h6 定义最小的标题。

实列

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

注释：浏览器会自动地在标题的前后添加空行。

注释：默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。

标题很重要

请确保将 HTML heading 标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。

搜索引擎使用标题为您的网页的结构和内容编制索引。

因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。

应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。

HTML 水平线 hr 标签在 HTML 页面中创建水平线。

hr 元素可用于分隔内容。

实例

实例
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>

提示：使用水平线 (hr 标签) 来分隔文章中的小节是一个办法（但并不是唯一的办法）。

HTML 注释
可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。

注释是这样写的：

实例

<!-- This is a comment -->

三、HTML 段落

可以把 HTML 文档分割为若干段落。
HTML 段落

段落是通过 <p> 标签定义的。

实例
<p>This is a paragraph</p>
<p>This is another paragraph</p>

亲自试一试

注释：浏览器会自动地在段落的前后添加空行。（<p> 是块级元素）

提示：使用空的段落标记 <p></p> 去插入一个空行是个坏习惯。用 <br /> 标签代替它！（但是不要用 <br /> 标签去创建列表。不要着急，您将在稍后的篇幅学习到 HTML 列表。）

不要忘记结束标签
即使忘了使用结束标签，大多数浏览器也会正确地将 HTML 显示出来：

实例
<p>This is a paragraph
<p>This is another paragraph

亲自试一试
上面的例子在大多数浏览器中都没问题，但不要依赖这种做法。忘记使用结束标签会产生意想不到的结果和错误。

注释：在未来的 HTML 版本中，不允许省略结束标签。

提示：通过结束标签来关闭 HTML 是一种经得起未来考验的 HTML 编写方法。清楚地标记某个元素在何处开始，并在何处结束，不论对您还是对浏览器来说，都会使代码更容易理解。

HTML 折行
如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 br 标签：

<p>This is<br />a para<br />graph with line breaks</p>

<br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。

<br> 还是 <br />
您也许发现 <br> 与 <br /> 很相似。

在 XHTML、XML 以及未来的 HTML 版本中，不允许使用没有结束标签（闭合标签）的 HTML 元素。

即使 br在所有浏览器中的显示都没有问题，使用 br /也是更长远的保障。

HTML 输出 - 有用的提示
我们无法确定 HTML 被显示的确切效果。屏幕的大小，以及对窗口的调整都可能导致不同的结果。

对于 HTML，您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。

当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

四、HTML 文本格式化

HTML 可定义很多供格式化输出的元素，比如粗体和斜体字。

下面有很多例子，您可以亲自试试：

HTML 文本格式化实例
文本格式化
此例演示如何在一个 HTML 文件中对文本进行格式化

预格式文本
此例演示如何使用 pre 标签对空行和空格进行控制。

“计算机输出”标签
此例演示不同的“计算机输出”标签的显示效果。

地址
此例演示如何在 HTML 文件中写地址。

缩写和首字母缩写
此例演示如何实现缩写或首字母缩写。

文字方向
此例演示如何改变文字的方向。

块引用
此例演示如何实现长短不一的引用语。

删除字效果和插入字效果
此例演示如何标记删除文本和插入文本。

如何查看 HTML 源码
您是否有过这样的经历，当你看到一个很棒的站点，你会很想知道开发人员是如何将它实现的？

你有没有看过一些网页，并且想知道它是如何做出来的呢？

要揭示一个网站的技术秘密，其实很简单。单击浏览器的“查看”菜单，选择“查看源文件”即可。随后你会看到一个弹出的窗口，窗口内就是实际的 HTML 代码。
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
        <!-- b标签和strong标签 
                -作用：加粗
                -区别：b标签只是单纯的加粗文本，strong标签有强调语义，
        -->
        <b>这是粗体</b>
        <strong>这是粗体</strong>

        <!-- i标签和em标签（emphasized）
                  作用；斜体
                  区别：em标签有强调语义
          -->
        <i> 这是斜体</i>
        <em> 这是斜体</em>

        <!-- del标签和s标签
                 作用：删除线
                 区别：del标签有强调语义
         -->
         <del>这是删除线</del>
         <s>这是删除线</s>

         <!-- u标签和ins标签 -->
         <u>这是下划线</u>
         <ins>这是下划线</ins>


         <!-- sup标签
                作用：上标签
              sub标签
                作用：下标签
            -->
         <p>x<sup>2</sup></p>
        <p>H<sub>2</sub>O</p>


	</body>
</html>

五、HTML 符号

键盘上不存在的字符也可以由实体代替。

HTML 符号实体
在上一章中已经讲解了 HTML 实体。

普通键盘上不存在众多数学、技术和货币符号。

如需将此类符号添加到 HTML 页面，您可以使用 HTML 实体名称（HTML entity name）。

如果不存在实体名称，则可使用实体编号，十进制或十六进制的引用。

实例

<p>我将显示 &</p>
<p>我将显示 &#8364;</p>
<p>我将显示 &#x20AC;</p>

将显示为：

我将显示 €
我将显示 €
我将显示 €

常用的转义字符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!--  HTML里，标签中只能识别一个空格
		     转义字符:&字符名字
             常用的转义字符
                空格:&nbsp
                <:&lsaquo
                >:&rsaqun
                TM:&trane
                版权符号：&copyright
		 -->
	</body>
</html>

在这里插入图片描述

六、块元素和行内元素

块元素
-特点：独占一行，可以包含其他块元素和行内元素
-常见的块元素：h1，p，
-注意；p元素里不放块元素

行内元素
-特点：不独占一行，一行里有多个行内元素
-常见的行内元素
b,u,i,del等等文本格式化标签

HTML <div> 和 <span>

HTML 列表 和HTML 类

可以通过 <div> 和 <span> 将 HTML 元素组合起来。

HTML 块元素
大多数 HTML 元素被定义为块级元素或内联元素。

编者注：“块级元素”译为 block level element，“内联元素”译为 inline element。

块级元素在浏览器显示时，通常会以新行来开始（和结束）。

例子：<h1>, <p>, <ul>, <table>

HTML 内联元素
内联元素在显示时通常不会以新行开始。

例子：<b>, <td>, <a>, <img>

HTML <div> 元素
HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。

<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

HTML <span> 元素
HTML <span> 元素是内联元素，可用作文本的容器。

<span> 元素也没有特定的含义。

当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

七、HTML 图像

通过使用 HTML，可以在文档中显示图像。

实例
插入图像
本例演示如何在网页中显示图像。
从不同的位置插入图片
本例演示如何将其他文件夹或服务器的图片显示到网页中。
（可以在本页底端找到更多实例。）

图像标签（<img>）和源属性（Src）
在 HTML 中，图像由 <img> 标签定义。

<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。

要在页面上显示图像，你需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址。

定义图像的语法是：

<img src="url" />

URL 指存储图像的位置。如果名为 “boat.gif” 的图像位于 www.w3school.com.cn 的 images 目录中，那么其 URL 为 http://www.w3school.com.cn/images/boat.gif。

浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。

替换文本属性（Alt）
alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。

<img src="boat.gif" alt="Big Boat">

当浏览器无法载入图像时，替换文本属性可告诉读者他们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

基本的注意事项 - 有用的提示：
假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 标签的属性
            格式：属性名=“属性值”
            位置：开始标签里
            作用：设置标签的附加信息
        img元素
            作用：显示图片
            属性
               src 必要属性，定位图片的位置
               alt 图片的描述信息，在图片不显示出现
               title 图片的标题，鼠标悬停的时候出现
               width 定义图片的宽度
               hegihe 定义图片的高度
        路径
            相当与电子路径，定位到计算机上的资源文件
            相对路径
                -相对当前文件的位置，寻找其他资源的路径
                -./或者文件名 在当前文件的相同目录下
                   -./xxx进入下级文件
                   ../ 进入上级目录
            绝对路径
                -·注意：通过Hbuilder:等工具运行的htmL页面是通过它的内置服务器显示的，
                刘览器为了安全，不允许服务器上htmL页面访问本地文件
     -->
    <img src="D:\h5培训\20221107\1107html\img" alt="动漫" title="动漫" width="200px" height="200px">
</body>
</html>

八、HTML 列表

HTML 支持有序、无序和定义列表

实例
无序列表
本例演示无序列表。
有序列表
本例演示有序列表。
（可以在本页底端找到更多实例。）

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

无序列表始于 <ul> 标签。每个列表项始于 <li>。

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

浏览器显示如下：

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

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

有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

浏览器显示如下：

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

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

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

浏览器显示如下：

Coffee
Black hot drink
Milk
White cold drink
定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
在这里插入图片描述

九、HTML 链接

HTML 使用超级链接与网络上的另一个文档相连。
几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。

实例
创建超级链接
本例演示如何在 HTML 文档中创建链接。

将图像作为链接
本例演示如何使用图像作为链接。
（可以在本页底端找到更多实例）

HTML 超链接（链接）
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

我们通过使用 <a> 标签在 HTML 中创建链接。

有两种使用 <a> 标签的方式：

通过使用 href 属性 - 创建指向另一个文档的链接
通过使用 name 属性 - 创建文档内的书签

HTML 链接语法
链接的 HTML 代码很简单。它类似这样：

<a href="url">Link text</a>

href 属性规定链接的目标。

开始标签和结束标签之间的文字被作为超级链接来显示。

实例

<a href="http://www.baidu.com.cn/">Visit baidu</a>

上面这行代码显示为：Visit baidu

点击这个超链接会把用户带到 百度的首页。

提示：“链接文本” 不必一定是文本。图片或其他 HTML 元素都可以成为链接。

HTML 链接 - target 属性
使用 Target 属性，你可以定义被链接的文档在何处显示。

下面的这行会在新窗口打开文档：

<a href="http://www.baidu.com.cn/" target="_blank">Visit baidu!</a>

HTML 链接 - name 属性
name 属性规定锚（anchor）的名称。

您可以使用 name 属性创建 HTML 页面中的书签。

书签不会以任何特殊方式显示，它对读者是不可见的。

当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

命名锚的语法：

<a name="label">锚（显示在页面上的文本）</a>

提示：锚的名称可以是任何你喜欢的名字。

提示：您可以使用 id 属性来替代 name 属性，命名锚同样有效。

实例
首先，我们在 HTML 文档中对锚进行命名（创建一个书签）：

<a name="tips">基本的注意事项 - 有用的提示</a>

然后，我们在同一个文档中创建指向该锚的链接：

<a href="#tips">有用的提示</a>

您也可以在其他页面中创建指向该锚的链接：

<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>

在上面的代码中，我们将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个命名锚了。

具体效果：有用的提示

基本的注意事项 - 有用的提示：
注释：请始终将正斜杠添加到子文件夹。假如这样书写链接：href=“http://www.baidu.com.cn/html”，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href=“http://www.baidu.com.cn/html/”。

提示：命名锚经常用于在大型文档开始位置上创建目录。可以为每个章节赋予一个命名锚，然后把链接到这些锚的链接放到文档的上部。如果您经常访问百度百科，您会发现其中几乎每个词条都采用这样的导航方式。

提示：假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。不会有错误发生。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <!-- 
        a标签
            href定义超链接跳转的路径
            target定义跳转的方式
                    _self·默认··在当前窗白显示跳转之后的内容
                    _bLank空白页显示跳转之后的内容
                    _parent 在父页面的窗口显示跳转之后的内容
            锚点
                 定位的点
                 设置id属性，a标签里的href属性"#对应锚点的帆d属性值" 


     -->
    <a href="https://www.baidu.com/" target="_blank">跳转到百度</a>
    <a href="#c" target="_blank">跳转到底部</a>
    <a href="#c1">段落1</a>
    <a href="#c2">段落2</a>
    <a href="#c3">段落3</a>
    <p id="c1" style="height: 600px;">这是段落1</p>
    <p id="c2" style="height: 600px;">这是段落2</p>
    <p id="c3" style="height: 600px;">这是段落3</p>
    <p id="c">底部</p>
</body>
</html>

十、HTML 表格

你可以使用 HTML 创建表格。

实例

表格
这个例子演示如何在 HTML 文档中创建表格。

表格边框
本例演示各种类型的表格边框。
（可以在本页底端找到更多实例。）

表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），
每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），
即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

在浏览器显示如下：

row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

表格和边框属性
如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。

使用边框属性来显示一个带有边框的表格：

<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>

表格的表头

表格的表头使用 <th> 标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本：

<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

在浏览器显示如下：

Heading Another Heading
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

表格中的空单元格
在一些浏览器中，没有内容的表格单元显示得不太好。如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td></td>
<td>row 2, cell 2</td>
</tr>
</table>

浏览器可能会这样显示：

在这里插入图片描述

表格中的空单元格
注意：这个空的单元格的边框没有被显示出来。为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>row 2, cell 2</td>
</tr>
</table>

在浏览器中显示如下：

row 1, cell 1 row 1, cell 2
row 2, cell 2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 表格
          必要的标签
              table
              tr（table row）表示一行
              td(table date) 表示一个单元格，没有加粗效果
              th(table header cell)表示标头单元，有加粗效果
          格常用属性
              -border表格的边框，值是数字
              -cellspacing单元格之间的空隙值是像素px
              width 表格的宽度
              cellpadding是单元的内边距
              align控制表格的位置，值center， left ，right



     -->
     <table border="1" cellspacing="0" cellpadding="20px" align="center">
        <tr>
            <td>序号</td>
            <td>姓名</td>
            <td>毕业时间</td>
            <td>最高学历</td>
            <td>毕业院校</td>
            <td>专业</td>
            <td>csdn网址</td>
            <td>现住址</td>
        </tr>
        <tr>
            <td>1</td>
            <td>小明</td>
            <td>2023.6</td>
            <td>本科</td>
            <td>重科</td>
            <td>软件工程</td>
            <td>csdn网址</td>
            <td>歇台子</td>
        </tr>
        <tr>
            <td>1</td>
            <td>小明</td>
            <td>2023.6</td>
            <td>本科</td>
            <td>重科</td>
            <td>软件工程</td>
            <td>csdn网址</td>
            <td>歇台子</td>
        </tr>
     </table>
    
</body>
</html>

合并单元格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--合并单元格
            -rowspan  合并行··rowspan="2”.合并2行，保留的是目标单元格的数据
            -colspan  合并列  colspan="2".合并2列，保留的是目标单元格的数据

     -->
    <table border="1" cellpadding="5px">
        <tr>
            <td rowspan="2">1</td>
            <td colspan="2">2</td>
            <!-- <td>2</td> -->
        </tr>
        <tr>
            <!-- <td>1</td> -->
            <td>2</td>
            <td>3</td>
        </tr>
    </table>
</body>
</html>

十一、HTML 表单

1、表单

HTML 表单用于搜集不同类型的用户输入。

<form> 元素
HTML 表单用于收集用户输入。

<form> 元素定义 HTML 表单：

实例

<form>
 .
form elements
 .
</form>

HTML 表单包含表单元素。
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。

<input> 元素
<input> 元素是最重要的表单元素。

<input> 元素有很多形态，根据不同的 type 属性。

这是本章中使用的类型：
在这里插入图片描述

文本输入

<input type="text"> 定义用于文本输入的单行输入字段：

实例

<form>
 First name:<br>
<input type="text" name="firstname">
<br>
 Last name:<br>
<input type="text" name="lastname">
</form>

在浏览器中看起来是这样的：
在这里插入图片描述
单选按钮输入

<input type="radio"> 定义单选按钮。

单选按钮允许用户在有限数量的选项中选择其中之一：

实例

<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>

单选按钮在浏览器看起来是这样的：
在这里插入图片描述
提交按钮

<input type="submit"> 定义用于向表单处理程序（form-handler）
提交表单的按钮。

表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。

表单处理程序在表单的 action 属性中指定：

实例

<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

在浏览器中看起来是这样的：
在这里插入图片描述
Action 属性
action 属性定义在提交表单时执行的动作。

向服务器提交表单的通常做法是使用提交按钮。

通常，表单会被提交到 web 服务器上的网页。

在上面的例子中，指定了某个服务器脚本来处理被提交表单：

<form action="action_page.php">

如果省略 action 属性，则 action 会被设置为当前页面。

Method 属性
method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）：

<form action="action_page.php" method="GET">

或：

<form action="action_page.php" method="POST">

何时使用 GET？
您能够使用 GET（默认方法）：

如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。

当您使用 GET 时，表单数据在页面地址栏中是可见的：

action_page.php?firstname=Mickey&lastname=Mouse

注释：GET 最适合少量数据的提交。浏览器会设定容量限制。

何时使用 POST？
您应该使用 POST：

如果表单正在更新数据，或者包含敏感信息（例如密码）。

POST 的安全性更好，因为在页面地址栏中被提交的数据是不可见的。

Name 属性
如果要正确地被提交，每个输入字段必须设置一个 name 属性。

本例只会提交 “Last name” 输入字段：

实例

<form action="action_page.php">
First name:<br>
<input type="text" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form> 

用 <fieldset> 组合表单数据
<fieldset> 元素组合表单中的相关数据

<legend> 元素为 <fieldset> 元素定义标题。

实例

<form action="action_page.php">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit"></fieldset>
</form>

以上 HTML 代码在浏览器中看起来是这样的：

在这里插入图片描述
HTML Form 属性

HTML <form> 元素，已设置所有可能的属性，是这样的：

实例

<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"
ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
.
form elements
 .
</form>

在这里插入图片描述

2、表单属性

本章介绍 HTML <form> 元素的不同属性。

Action 属性
action 属性定义提交表单时要执行的操作。

通常，当用户单击“提交”按钮时，表单数据将发送到服务器上的文件中。

在下面的例子中，表单数据被发送到名为 “action_page.php” 的文件。该文件包含处理表单数据的服务器端脚本：

实例
提交后，将表单数据发送到 “action_page.php”：

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="Bill"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Gates"><br><br>
  <input type="submit" value="Submit">
</form>

提示：如果省略 action 属性，则将 action 设置为当前页面。

Target 属性
target 属性规定提交表单后在何处显示响应。

target 属性可设置以下值之一：
在这里插入图片描述
默认值为 _self，这意味着响应将在当前窗口中打开。
实例
此处，提交的结果将在新的浏览器标签中打开：

<form action="/action_page.php" target="_blank">

Method 属性
method 属性指定提交表单数据时要使用的 HTTP 方法。

表单数据可以作为 URL 变量（使用 method="get"）或作为 HTTP post 事务（使用 method="post"）发送。

提交表单数据时，默认的 HTTP 方法是 GET。

实例
此例在提交表单数据时使用 GET 方法：

实例
此例在提交表单数据时使用 POST 方法：

<form action="/action_page.php" method="post">

关于 GET 的注意事项：
以名称/值对的形式将表单数据追加到 URL
永远不要使用 GET 发送敏感数据！（提交的表单数据在 URL 中可见！）
URL 的长度受到限制（2048 个字符）
对于用户希望将结果添加为书签的表单提交很有用
GET 适用于非安全数据，例如 Google 中的查询字符串
关于 POST 的注意事项：
将表单数据附加在 HTTP 请求的正文中（不在 URL 中显示提交的表单数据）
POST 没有大小限制，可用于发送大量数据。
带有 POST 的表单提交无法添加书签
提示：如果表单数据包含敏感信息或个人信息，请务必使用 POST！

Autocomplete 属性
autocomplete 属性规定表单是否应打开自动完成功能。

启用自动完成功能后，浏览器会根据用户之前输入的值自动填写值。

实例
启用自动填写的表单：

<form action="/action_page.php" autocomplete="on">

Novalidate 属性
novalidate 属性是一个布尔属性。

如果已设置，它规定提交时不应验证表单数据。

实例
未设置 novalidate 属性的表单：

<form action="/action_page.php" novalidate>

在这里插入图片描述

3、表单元素

本章描述所有 HTML 表单元素。

<input> 元素
最重要的表单元素是 <input> 元素。

<input> 元素根据不同的 type 属性，可以变化为多种形态。

注释：下一章讲解所有 HTML 输入类型。

<select> 元素（下拉列表）
<select> 元素定义下拉列表：

实例

<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

<option> 元素定义待选择的选项。

列表通常会把首个选项显示为被选选项。

您能够通过添加 selected 属性来定义预定义选项。

实例

<option value="fiat" selected>Fiat</option>

<textarea> 元素
<textarea> 元素定义多行输入字段（文本域）：

实例

<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

以上 HTML 代码在浏览器中显示为：
The cat was playing in the garden.

<button> 元素
<button> 元素定义可点击的按钮：

实例

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

以上 HTML 代码在浏览器中显示为：
Click Me!

HTML5 表单元素
HTML5 增加了如下表单元素：

<datalist>
<keygen>
<output>

注释：默认地，浏览器不会显示未知元素。新元素不会破坏您的页面。

HTML5 <datalist> 元素
<datalist> 元素为 <input> 元素规定预定义选项列表。

用户会在他们输入数据时看到预定义选项的下拉列表。

<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性。

实例
通过 <datalist> 设置预定义值的 <input> 元素：

<form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist> 
</form>

4、表单的输入类型

本章描述 <input> 元素的输入类型。

输入类型：text
<input type="text"> 定义供文本输入的单行输入字段：

实例

<form>
 First name:<br>
<input type="text" name="firstname">
<br>
 Last name:<br>
<input type="text" name="lastname">
</form>

以上 HTML 代码在浏览器中看上去是这样的：
在这里插入图片描述
输入类型：password
<input type="password"> 定义密码字段：

实例

<form>
 User name:<br>
<input type="text" name="username">
<br>
 User password:<br>
<input type="password" name="psw">
</form>

以上 HTML 代码在浏览器中看上去是这样的：
在这里插入图片描述
注释：password 字段中的字符会被做掩码处理（显示为星号或实心圆）。

输入类型：submit
<input type="submit"> 定义提交表单数据至表单处理程序的按钮。

表单处理程序（form-handler）通常是包含处理输入数据的脚本的服务器页面。

在表单的 action 属性中规定表单处理程序（form-handler）：

实例

<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

以上 HTML 代码在浏览器中看上去是这样的：
在这里插入图片描述
如果您省略了提交按钮的 value 属性，那么该按钮将获得默认文本：
实例

<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit">
</form>

Input Type: radio
<input type="radio"> 定义单选按钮。

Radio buttons let a user select ONLY ONE of a limited number of choices:

实例

<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>

以上 HTML 代码在浏览器中看上去是这样的：
在这里插入图片描述

Input Type: checkbox
<input type="checkbox"> 定义复选框。

复选框允许用户在有限数量的选项中选择零个或多个选项。

实例

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form>

以上 HTML 代码在浏览器中看上去是这样的：
在这里插入图片描述
Input Type: button
<input type="button> 定义按钮。

实例

<input type="button" onclick="alert('Hello World!')" value="Click Me!">

HTML5 输入类型
HTML5 增加了多个新的输入类型：

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week
注释：老式 web 浏览器不支持的输入类型，会被视为输入类型 text。

输入类型：number
<input type="number"> 用于应该包含数字值的输入字段。
您能够对数字做出限制。
根据浏览器支持，限制可应用到输入字段。

实例

<form>
  Quantity (between 1 and 5):
  <input type="number" name="quantity" min="1" max="5">
</form>

输入限制
这里列出了一些常用的输入限制（其中一些是 HTML5 中新增的）：

属性 描述
disabled 规定输入字段应该被禁用。
max 规定输入字段的最大值。
maxlength 规定输入字段的最大字符数。
min 规定输入字段的最小值。
pattern 规定通过其检查输入值的正则表达式。
readonly 规定输入字段为只读（无法修改）。
required 规定输入字段是必需的（必需填写）。
size 规定输入字段的宽度（以字符计）。
step 规定输入字段的合法数字间隔。
value 规定输入字段的默认值。

实例

<form>
  Quantity:
  <input type="number" name="points" min="0" max="100" step="10" value="30">
</form>

输入类型：date
<input type="date"> 用于应该包含日期的输入字段。

根据浏览器支持，日期选择器会出现输入字段中。

实例

<form>
  Birthday:
  <input type="date" name="bday">
</form>

您可以向输入添加限制：

实例

<form>
  Enter a date before 1980-01-01:
  <input type="date" name="bday" max="1979-12-31"><br>
  Enter a date after 2000-01-01:
  <input type="date" name="bday" min="2000-01-02"><br>
</form>

输入类型：color
<input type="color"> 用于应该包含颜色的输入字段。
根据浏览器支持，颜色选择器会出现输入字段中。

实例

<form>
  Select your favorite color:
  <input type="color" name="favcolor">
</form>

输入类型：range
<input type="range"> 用于应该包含一定范围内的值的输入字段。
根据浏览器支持，输入字段能够显示为滑块控件。

实例

<form>
  <input type="range" name="points" min="0" max="10">
</form>

您能够使用如下属性来规定限制：min、max、step、value。

输入类型：month
<input type="month"> 允许用户选择月份和年份。

根据浏览器支持，日期选择器会出现输入字段中。

实例

<form>
  Birthday (month and year):
  <input type="month" name="bdaymonth">
</form>

输入类型：week
<input type="week"> 允许用户选择周和年。

根据浏览器支持，日期选择器会出现输入字段中。

实例

<form>
  Select a week:
  <input type="week" name="week_year">
</form>

输入类型：time
<input type="time"> 允许用户选择时间（无时区）。

根据浏览器支持，时间选择器会出现输入字段中。

实例

<form>
  Select a time:
  <input type="time" name="usr_time">
</form>

输入类型：datetime
<input type="datetime"> 允许用户选择日期和时间（有时区）。
根据浏览器支持，日期选择器会出现输入字段中。

实例

<form>
  Birthday (date and time):
  <input type="datetime" name="bdaytime">
</form>

输入类型：datetime-local
<input type="datetime-local"> 允许用户选择日期和时间（无时区）。
根据浏览器支持，日期选择器会出现输入字段中。

实例

<form>
  Birthday (date and time):
  <input type="datetime-local" name="bdaytime">
</form>

输入类型：email
<input type="email"> 用于应该包含电子邮件地址的输入字段。
根据浏览器支持，能够在被提交时自动对电子邮件地址进行验证。
某些智能手机会识别 email 类型，并在键盘增加 “.com” 以匹配电子邮件输入。

实例

<form>
  E-mail:
  <input type="email" name="email">
</form>

输入类型：search
<input type="search"> 用于搜索字段（搜索字段的表现类似常规文本字段）。

实例

<form>
  Search Google:
  <input type="search" name="googlesearch">
</form>

输入类型：tel
<input type="tel"> 用于应该包含电话号码的输入字段。
目前只有 Safari 8 支持 tel 类型。

实例

<form>
  Telephone:
  <input type="tel" name="usrtel">
</form>

输入类型：url
<input type="url"> 用于应该包含 URL 地址的输入字段。
根据浏览器支持，在提交时能够自动验证 url 字段。
某些智能手机识别 url 类型，并向键盘添加 “.com” 以匹配 url 输入。

实例

<form>
  Add your homepage:
  <input type="url" name="homepage">
</form>

5、input的属性

value 属性
value 属性规定输入字段的初始值：

实例

<form action="">
 First name:<br>
<input type="text" name="firstname" value="Bill">
<br>
 Last name:<br>
<input type="text" name="lastname">
</form>

readonly 属性
readonly 属性规定输入字段为只读（不能修改）：

实例

<form action="">
 First name:<br>
<input type="text" name="firstname" value="Bill" readonly>
<br>
 Last name:<br>
<input type="text" name="lastname">
</form>

readonly 属性不需要值。它等同于 readonly=“readonly”。

disabled 属性
disabled 属性规定输入字段是禁用的。
被禁用的元素是不可用和不可点击的。
被禁用的元素不会被提交。

实例

<form action="">
 First name:<br>
<input type="text" name="firstname" value="Bill" disabled>
<br>
 Last name:<br>
<input type="text" name="lastname">
</form>

disabled 属性不需要值。它等同于 disabled=“disabled”。

size 属性
size 属性规定输入字段的尺寸（以字符计）：

实例

<form action="">
 First name:<br>
<input type="text" name="firstname" value="Bill" size="40">
<br>
 Last name:<br>
<input type="text" name="lastname">
</form>

maxlength 属性
maxlength 属性规定输入字段允许的最大长度：

实例

<form action="">
 First name:<br>
<input type="text" name="firstname" maxlength="10">
<br>
 Last name:<br>
<input type="text" name="lastname">
</form>

如设置 maxlength 属性，则输入控件不会接受超过所允许数的字符。
该属性不会提供任何反馈。如果需要提醒用户，则必须编写 JavaScript 代码。
注释：输入限制并非万无一失。JavaScript 提供了很多方法来增加非法输入。如需安全地限制输入，则接受者（服务器）必须同时对限制进行检查。

HTML5 属性
HTML5 为 <input> 增加了如下属性：

autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height 和 width
list
min 和 max
multiple
pattern (regexp)
placeholder
required
step
并为 <form> 增加如需属性：
autocomplete
novalidate

autocomplete 属性
autocomplete 属性规定表单或输入字段是否应该自动完成。
当自动完成开启，浏览器会基于用户之前的输入值自动填写值。
提示：您可以把表单的 autocomplete 设置为 on，同时把特定的输入字段设置为 off，反之亦然。
autocomplete 属性适用于 以及如下 类型：text、search、url、tel、email、password、datepickers、range 以及 color。

实例
自动完成开启的 HTML 表单（某个输入字段为 off）：

<form action="action_page.php" autocomplete="on">
   First name:<input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   E-mail: <input type="email" name="email" autocomplete="off"><br>
   <input type="submit">
</form>

提示：在某些浏览器中，您也许需要手动启用自动完成功能。

novalidate 属性
novalidate 属性属于 <form> 属性。
如果设置，则 novalidate 规定在提交表单时不对表单数据进行验证。

实例
指示表单在被提交时不进行验证：

<form action="action_page.php" novalidate>
   E-mail: <input type="email" name="user_email">
   <input type="submit">
</form>

autofocus 属性
autofocus 属性是布尔属性。
如果设置，则规定当页面加载时 <input> 元素应该自动获得焦点。

实例
使 “First name” 输入字段在页面加载时自动获得焦点：

First name:<input type="text" name="fname" autofocus>

form 属性
form 属性规定 <input> 元素所属的一个或多个表单。
提示：如需引用一个以上的表单，请使用空格分隔的表单 id 列表。

实例
输入字段位于 HTML 表单之外（但仍属表单）：

<form action="action_page.php" id="form1">
   First name: <input type="text" name="fname"><br>
   <input type="submit" value="Submit">
</form>

 Last name: <input type="text" name="lname" form="form1">

formaction 属性
formaction 属性规定当提交表单时处理该输入控件的文件的 URL。
formaction 属性覆盖 <form> 元素的 action 属性。
formaction 属性适用于 type=“submit” 以及 type=“image”。

实例
拥有两个两个提交按钮并对于不同动作的 HTML 表单：

<form action="action_page.php">
   First name: <input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   <input type="submit" value="Submit"><br>
   <input type="submit" formaction="demo_admin.asp"
   value="Submit as admin">
</form>

formenctype 属性
formenctype 属性规定当把表单数据（form-data）提交至服务器时如何对其进行编码（仅针对 method=“post” 的表单）。
formenctype 属性覆盖 <form> 元素的 enctype 属性。
formenctype 属性适用于 type=“submit” 以及 type=“image”。

实例
发送默认编码以及编码为 “multipart/form-data”（第二个提交按钮）的表单数据（form-data）：

<form action="demo_post_enctype.asp" method="post">
   First name: <input type="text" name="fname"><br>
   <input type="submit" value="Submit">
   <input type="submit" formenctype="multipart/form-data"
   value="Submit as Multipart/form-data">
</form>

formmethod 属性
formmethod 属性定义用以向 action URL 发送表单数据（form-data）的 HTTP 方法。
formmethod 属性覆盖 <form> 元素的 method 属性。
formmethod 属性适用于 type=“submit” 以及 type=“image”。

实例
第二个提交按钮覆盖表单的 HTTP 方法：

<form action="action_page.php" method="get">
   First name: <input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   <input type="submit" value="Submit">
   <input type="submit" formmethod="post" formaction="demo_post.asp"
   value="Submit using POST">
</form>

formnovalidate 属性
novalidate 属性是布尔属性。
如果设置，则规定在提交表单时不对 <input> 元素进行验证。
formnovalidate 属性覆盖 <form> 元素的 novalidate 属性。
formnovalidate 属性可用于 type=“submit”。

实例
拥有两个提交按钮的表单（验证和不验证）：

<form action="action_page.php">
   E-mail: <input type="email" name="userid"><br>
   <input type="submit" value="Submit"><br>
   <input type="submit" formnovalidate value="Submit without validation">
</form>

formtarget 属性
formtarget 属性规定的名称或关键词指示提交表单后在何处显示接收到的响应。
formtarget 属性会覆盖 <form> 元素的 target 属性。
formtarget 属性可与 type=“submit” 和 type=“image” 使用。

实例
这个表单有两个提交按钮，对应不同的目标窗口：

<form action="action_page.php">
   First name: <input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   <input type="submit" value="Submit as normal">
   <input type="submit" formtarget="_blank"
   value="Submit to a new window">
</form>

height 和 width 属性
height 和 width 属性规定 元素的高度和宽度。
height 和 width 属性仅用于 。
注释：请始终规定图像的尺寸。如果浏览器不清楚图像尺寸，则页面会在图像加载时闪烁。

实例
把图像定义为提交按钮，并设置 height 和 width 属性：

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

list 属性
list 属性引用的 <datalist> 元素中包含了 <input> 元素的预定义选项。

实例
使用 <datalist> 设置预定义值的 <input> 元素：

<input list="browsers">

<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist>

min 和 max 属性
min 和 max 属性规定 <input> 元素的最小值和最大值。
min 和 max 属性适用于如需输入类型：number、range、date、datetime、datetime-local、month、time 以及 week。

实例
具有最小和最大值的 <input> 元素：

Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">

 Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">

 Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">

multiple 属性
multiple 属性是布尔属性。
如果设置，则规定允许用户在 <input> 元素中输入一个以上的值。
multiple 属性适用于以下输入类型：email 和 file。

实例
接受多个值的文件上传字段：

Select images: <input type="file" name="img" multiple>

pattern 属性
pattern 属性规定用于检查 <input> 元素值的正则表达式。
pattern 属性适用于以下输入类型：text、search、url、tel、email、and password。
提示：请使用全局的 title 属性对模式进行描述以帮助用户。
提示：请在我们的 JavaScript 教程中学习更多有关正则表达式的知识。

实例
只能包含三个字母的输入字段（无数字或特殊字符）：

Country code: 
<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

placeholder 属性
placeholder 属性规定用以描述输入字段预期值的提示（样本值或有关格式的简短描述）。
该提示会在用户输入值之前显示在输入字段中。
placeholder 属性适用于以下输入类型：text、search、url、tel、email 以及 password。

实例
拥有占位符文本的输入字段：

<input type="text" name="fname" placeholder="First name">

required 属性
required 属性是布尔属性。
如果设置，则规定在提交表单之前必须填写输入字段。
required 属性适用于以下输入类型：text、search、url、tel、email、password、date pickers、number、checkbox、radio、and file.

实例
必填的输入字段：

Username: <input type="text" name="usrname" required>

step 属性
step 属性规定 <input> 元素的合法数字间隔。
示例：如果 step=“3”，则合法数字应该是 -3、0、3、6、等等。
**提示：**step 属性可与 max 以及 min 属性一同使用，来创建合法值的范围。
step 属性适用于以下输入类型：number、range、date、datetime、datetime-local、month、time 以及 week。

示例
拥有具体的合法数字间隔的输入字段：

<input type="number" name="points" step="3">

6、Input form* 属性

本章介绍 HTML <input> 元素的不同 form* 属性。

form 属性
input 的 form 属性规定 <input> 元素所属的表单。
此属性的值必须等于它所属的 元素的 id 属性。

实例
位于 HTML 表单（但仍是表单的一部分）之外的输入字段：

<form action="/action_page.php" id="form1">
  <label for="fname">姓氏：</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="submit" value="提交">
</form>

<label for="lname">名字：</label>
<input type="text" id="lname" name="lname" form="form1">

formaction 属性
input 的 formaction 属性规定当提交表单时，对输入（数据）进行处理的文件的 URL。
**注释：**该属性会覆盖 <form> 元素的 action 属性。
formaction 属性适用于以下输入类型：submit 和 image。

实例
带有两个提交按钮的 HTML 表单，它们具有不同的操作（action）：

<form action="/action_page.php">
  <label for="fname">姓氏：</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">名字：</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="提交">
  <input type="submit" formaction="/action_page2.php" value="以管理员提交">
</form>

formenctype 属性
input 的 formenctype 属性指定提交时应如何编码表单数据（仅适用于 method=“post” 的表单）。
**注释：**此属性将覆盖 元素的 enctype 属性。
formenctype 属性适用于以下输入类型：submit 和 image。

实例
有两个提交按钮的表单。第一个发送使用默认编码的表单数据，第二个发送编码为 “multipart/form-data” 的表单数据：

<form action="/action_page_binary.asp" method="post">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="submit" value="提交">
  <input type="submit" formenctype="multipart/form-data"
  value="以 Multipart/form-data 编码提交">
</form>

formmethod 属性
input 的 formmethod 属性定义了将表单数据发送到 action URL 的 HTTP 方法。
**注释：**此属性将覆盖 元素的 method 属性。
formmethod 属性适用于以下输入类型：submit 和 image。
表单数据可以作为 URL 变量（method=“get”）或作为 HTTP post 事务（method=“post”）发送。

关于 GET 的注意事项：
以名称/值对的形式将表单数据追加到 URL
永远不要使用 GET 发送敏感数据！（提交的表单数据在 URL 中可见！）
URL 的长度受到限制（2048 个字符）
对于用户希望将结果添加为书签的表单提交很有用
GET 适用于非安全数据，例如 Google 中的查询字符串
关于 POST 的注意事项：
将表单数据附加在 HTTP 请求的正文中（不在 URL 中显示提交的表单数据）
POST 没有大小限制，可用于发送大量数据。
带有 POST 的表单提交无法添加书签
提示：如果表单数据包含敏感信息或个人信息，请务必使用 POST！

实例
有两个提交按钮的表单。第一个使用 method=“get” 发送表单数据。第二个使用 method=“post” 发送表单数据：

<form action="/action_page.php" method="get">
  <label for="fname">姓氏：</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">名字：</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="使用 GET 提交">
  <input type="submit" formmethod="post" value="使用 POST 提交">
</form>

formtarget 属性
input 的 formtarget 属性指定一个名称或关键字，该名称或关键字规定在提交表单后在何处显示收到的响应。
**注释：**此属性将覆盖 元素的 target 属性。
formtarget 属性适用于以下输入类型：submit 和 image。

实例
有两个提交按钮且有不同目标窗口的表单：

<form action="/action_page.php">
  <label for="fname">姓氏：</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">名字：</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="提交">
  <input type="submit" formtarget="_blank" value="提交到新窗口/标签页">
</form>

formnovalidate 属性
input 的 formnovalidate 属性规定提交时不应验证 <input> 元素。
注释：此属性将覆盖 <form> 元素的 novalidate 属性。
formnovalidate 属性适用于以下输入类型：submit。

实例
有两个提交按钮的表单（进行和不进行验证）：

<form action="/action_page.php">
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="提交">
  <input type="submit" formnovalidate="formnovalidate"
  value="不进行验证的提交">
</form>

novalidate 属性
novalidate 属性是 <form> 属性。
如果已设置，novalidate 属性规定在提交时不应验证所有表单数据。

实例
规定在提交时不验证任何表单数据：

<form action="/action_page.php" novalidate>
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="提交">
</form>

十二、内联框架（Iframe）

iframe 用于在网页内显示网页。

添加 iframe 的语法

<iframe src="URL"></iframe>

URL 指向隔离页面的位置。

Iframe - 设置高度和宽度
height 和 width 属性用于规定 iframe 的高度和宽度。

属性值的默认单位是像素，但也可以用百分比来设定（比如 “80%”）。

实例

<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

Iframe - 删除边框
frameborder 属性规定是否显示 iframe 周围的边框。
设置属性值为 “0” 就可以移除边框：

实例

<iframe src="demo_iframe.htm" frameborder="0"></iframe>

使用 iframe 作为链接的目标
iframe 可用作链接的目标（target）。
链接的 target 属性必须引用 iframe 的 name 属性：

实例

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.baibu.com.cn" target="iframe_a">baidu.com.cn</a></p>

十三、HTML 音频

在 HTML 中播放声音的方法有很多种。

问题，问题，以及解决方法
在 HTML 中播放音频并不容易！

您需要谙熟大量技巧，以确保您的音频文件在所有浏览器中（Internet Explorer, Chrome, Firefox, Safari, Opera）和所有硬件上（PC, Mac , iPad, iPhone）都能够播放。

使用插件
浏览器插件是一种扩展浏览器标准功能的小型计算机程序。
插件有很多用途：播放音乐、显示地图、验证银行账号，控制输入等等。
可使用 <object> 或 <embed> 标签来将插件添加到 HTML 页面。

这些标签定义资源（通常非 HTML 资源）的容器，根据类型，它们即会由浏览器显示，也会由外部插件显示。

使用 <embed> 元素
标签定义外部（非 HTML）内容的容器。（这是一个 HTML5 标签，在 HTML4 中是非法的，但是所有浏览器中都有效）。

下面的代码片段能够显示嵌入网页中的 MP3 文件：

实例

<embed height="100" width="100" src="song.mp3" />

问题：
<embed> 标签在 HTML 4 中是无效的。页面无法通过 HTML 4 验证。
不同的浏览器对音频格式的支持也不同。
如果浏览器不支持该文件格式，没有插件的话就无法播放该音频。
如果用户的计算机未安装插件，无法播放音频。
如果把该文件转换为其他格式，仍然无法在所有浏览器中播放。
注释：使用 (HTML5) 解决验证问题。

使用 <object> 元素
<object tag> 标签也可以定义外部（非 HTML）内容的容器。
下面的代码片段能够显示嵌入网页中的 MP3 文件：

实例

<object height="100" width="100" data="song.mp3"></object>

问题：
不同的浏览器对音频格式的支持也不同。
如果浏览器不支持该文件格式，没有插件的话就无法播放该音频。
如果用户的计算机未安装插件，无法播放音频。
如果把该文件转换为其他格式，仍然无法在所有浏览器中播放。

使用 HTML5 <audio> 元素
<audio> 元素是一个 HTML5 元素，在 HTML 4 中是非法的，但在所有浏览器中都有效。

实例

<audio controls="controls">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
Your browser does not support this audio format.
</audio>

上面的例子使用了一个 mp3 文件，这样它在 Internet Explorer、Chrome 以及 Safari 中是有效的。

为了使这段音频在 Firefox 和 Opera 中同样有效，添加了一个 ogg 类型的文件。如果失败，会显示错误消息。

问题：
<audio> 标签在 HTML 4 中是无效的。您的页面无法通过 HTML 4 验证。
您必须把音频文件转换为不同的格式。
<audio> 元素在老式浏览器中不起作用。
注释：使用 <!DOCTYPE html> (HTML5) 解决验证问题。

最好的 HTML 解决方法
实例

<audio controls="controls" height="100" width="100">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
<embed height="100" width="100" src="song.mp3" />
</audio>

上面的例子使用了两个不同的音频格式。HTML5 <audio> 元素会尝试以 mp3 或 ogg 来播放音频。如果失败，代码将回退尝试 <embed> 元素。

问题：
您必须把音频转换为不同的格式。
<audio> 元素无法通过 HTML 4 和 XHTML 验证。
<embed> 元素无法通过 HTML 4 和 XHTML 验证。
<embed> 元素无法回退来显示错误消息。
注释：使用 <!DOCTYPE html> (HTML5) 解决验证问题。

十四、HTML 视频

使用 <embed> 标签
<embed> 标签的作用是在 HTML 页面中嵌入多媒体元素。
下面的 HTML 代码显示嵌入网页的 Flash 视频：

实例

<embed src="movie.swf" height="200" width="200"/>

问题
HTML4 无法识别 <embed> 标签。您的页面无法通过验证。
如果浏览器不支持 Flash，那么视频将无法播放
iPad 和 iPhone 不能显示 Flash 视频。
如果您将视频转换为其他格式，那么它仍然不能在所有浏览器中播放。

使用 <object> 标签
<object> 标签的作用是在 HTML 页面中嵌入多媒体元素。
下面的 HTML 片段显示嵌入网页的一段 Flash 视频：

实例

<object data="movie.swf" height="200" width="200"/>

问题
如果浏览器不支持 Flash，将无法播放视频。
iPad 和 iPhone 不能显示 Flash 视频。
如果您将视频转换为其他格式，那么它仍然不能在所有浏览器中播放

。
使用 <video> 标签
<video> 是 HTML 5 中的新标签。
<video> 标签的作用是在 HTML 页面中嵌入视频元素。
以下 HTML 片段会显示一段嵌入网页的 ogg、mp4 或 webm 格式的视频：

实例

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
Your browser does not support the video tag.
</video>

问题
您必须把视频转换为很多不同的格式。
<video> 元素在老式浏览器中无效。
<video> 元素无法通过 HTML 4 和 XHTML 验证。
最好的 HTML 解决方法
HTML 5 + <object> + <embed>

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

上例中使用了 4 中不同的视频格式。HTML 5 <video> 元素会尝试播放以 mp4、ogg 或 webm 格式中的一种来播放视频。如果均失败，则回退到 <embed> 元素。

问题
您必须把视频转换为很多不同的格式
<video> 元素无法通过 HTML 4 和 XHTML 验证。
<embed> 元素无法通过 HTML 4 和 XHTML 验证。
**注释：**使用 <!DOCTYPE html> (HTML5) 解决验证问题。

css的学习

一、css使用方法

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 外部样式 -->
<!-- 2-通过head标签里的link标签引入外部css样式文件来写样式---推荐使用----兼容性很强 --
>
<!-- <link rel="stylesheet"声明引入文件为css样式文件 href=""引入css样式文件地址> --
>
<!-- <link rel="stylesheet" href="day03-css外部样式.css"> -->
<link rel="stylesheet" href="day03-css外部样式.css">
<!-- 内部样式 -->
<!-- 1-通过head标签里的style标签来写 -->
<style>
/* 外部样式引入1----部分浏览器，或者老版本浏览器不支持
-----------------需要放在选择器样式前填写/只写这一条
*/
/* @import url("day03-css外部样式.css"); */
h1{
/* 设置内部文字的颜色 */
color: green;
/* 设置内部文字靠右 */
/* text-align: right; */
}
</style>
</head>
<body>
<!-- css----给我们的页面结构穿衣服----页面样式----层叠样式表cascading style sheets
css语法规范
样式属性:样式属性值
如果说css样式写在外部
必须通过以下样式规范来写
选择器{
每一条声明语句----结构----`属性: 属性值;`
每一条声明语句换行写，并且对齐
样式属性:样式属性值
}
-->
<!-- css样式使用的位置 -->
二、常用的选择器
<!-- 对h1标签进行文字居中+颜色 -->
<!-- 内联样式----在标签内部设置样式------写在标签内，通过style属性来设置
不同的样式，通过`;`分割
小缺点：1.只会对其中一个标签生效---style写在哪个标签内部，就只对这一个标签生效
2.开发中不推荐使用该方法：会影响页面生成的速率
3.如果样式多了，采用此方法就会影响代码结构，不方便修改
-->
<!-- <h1 style="text-align: center;color: brown;">这里是h1标签</h1> -->
<!-- <h1 style="color: red;">这里是h1标签</h1> -->
<h1>这里是h1标签</h1>
<h1>这里是h1标签</h1>
<h2>这是h2标签</h2>
<!-- 1-肯定是推荐使用---外部样式---代码量多----link标签
如果需要对某一个标签单独设置特别的样式，并且不需要太多的代码量，就使用内联样式---style
属性
2-样式的优先级---如果有重复的样式---首先使用内联样式
行内/内联样式 > 内部样式 > 外部样式
3-样式写法规定-----
a.外部样式，最先写，页面加载时，link会同时被加载出来，里面的样式最先读取
b.内部样式第二写
c.最后补充写内联样式
-->
</body>
</html>
h1{
color: blueviolet;
}
h2{
color: blue;
}

二、常用的选择器

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入外部样式 -->
<link rel="stylesheet" href="day03-css选择器样式.css">
</head>
<body>
<!-- 分别对h1标签设置不同的字体颜色
分类
-->
<!-- 常用的选择器 -->
<!-- id选择器---必须！唯一！--指在后面JS操作中会产生的影响，
或者需要对a标签进行锚点跳转时会有影响---会进行就近原则
用法：在样式中写选择器的位置,通过以下格式
#设置的样式名{
样式属性: 样式属性值;
}
-->
<!-- <a href="#tit1">这是尝试进行锚点跳转</a>
<h1 id="tit1">这是第1个h1标签</h1>
<h1 id="tit1">这是第2个h1标签</h1>
<h1 id="tit1">这是第2个h1标签</h1>
<h1 id="tit1">这是第2个h1标签</h1>
<h1 id="tit1">这是第2个h1标签</h1>
<h1 id="tit1">这是第2个h1标签</h1>
<h1 id="tit1">这是第2个h1标签</h1>
<h1 id="tit1">这是第2个h1标签</h1>
<h1 id="tit1">这是第2个h1标签</h1>
<h1 id="tit1">这是第2个h1标签</h1>
<h1 id="tit1">这是第2个h1标签</h1>
<h1 id="tit1">这是第2个h1标签</h1>
<h1 id="tit1">这是第2个h1标签</h1>
<h1 id="tit1">这是第2个h1标签</h1>
<h1 id="tit1">这是第2个h1标签</h1>
<h1 id="tit1">这是第2个h1标签</h1>
<h1 id="tit1">这是第2个h1标签</h1>
<h1 id="tit1">这是第2个h1标签</h1> -->
<!-- 嵌套---格式 内部要注意缩进
补充：样式选择器命名---见名思意
-->
<!-- <div id="box">
<div id="tit-box">
</div>
</div> -->
<!-- class选择器----针对拥有相同样式!的某一类小团体进行样式设置
用法：
1.需要设置相同样式的标签中添加class属性名---通过class="xxx第一个自定义样式名"
如果要添加多个/需要再对其添加某一个单独设置的样式，就在自定义样式名后，通过空格分
割
-----例如
class="set-color set-align"
2.在样式文件中通过以下结构来写样式
.clss属性名{
样式属性: 样式属性值;
}
-->
<!-- 两个标签字体颜色都为蓝色 -->
<!-- <h1 id="tit1">这是第1个h1标签</h1>
<h2 id="tit2">这是第1个h2标签</h2> -->
<h1 class="set-color set-align">这是第1个h1标签</h1>
<h2 class="set-color">这是第1个h2标签</h2>
<!-- 元素/标签选择器----如果说整个页面中！只有一个标签！需要对其设置样式， 那么就可以使用
这个选择器
用法：
1.通过以下格式来设置样式
标签选择器h3{
样式属性: 样式属性值;
}
2.如果说有多个相同的标签，那么不推荐使用该选择器，因为他会选择页面中所有！对应的！标
签！
-->
<h3>这是唯一一个h3标签</h3>
<!-- 通配符选择器----选择所有元素
用法：通过以下格式来设置样式
*{
样式属性: 样式属性值;
}
-->
<!-- 作业的提醒
1-标签成对出现
2-单标签 在最末尾加上/ 表示结束
3-用&nbsp; 表示一个空格键的间距
补充：&ensp; 半角空格，半角输入法下面的空格，所占的位置就代表了1个中文字符宽度
的1/2
&emsp; 全角空格，全角输入法下面的空格，所占的位置就代表1个中文字符的宽度
4-缩进
-->
<p>2022-11-09&emsp;11:07:13</p>
<!-- <p class="set-text">
。
</p> -->
<p>
三、复合选择器
&emsp;&emsp;过几年铁蹄我今天人看过看<br/>额我让就是若干个不能接问题不收费九二
</p>
</body>
</html>
/* #tit1{
color: blue;
}
#tit2{
color: blue;
} */
/* .set-color{
color: blue;
}
.set-align{
text-align: center;
}
h3{
color: green;
text-align: right;
} */
/* *{
color: blueviolet;
text-align: center;
} */
.set-text{
/* 设置文本缩进 em相对单位，1em=1个文字的大小 */
text-indent: 2em;
}

三、复合选择器

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="day03-css复合选择器样式.css">
</head>
<body>
<!-- 复合选择器
四、关系选择器
交集选择器----需要 满足所有 条件
----------用法:选择器紧挨着
选择器1选择器2{
color: blue;
}
并集选择器------满足 一个条件 即可
----------用法：选择器通过 逗号 分隔
----------------选择器1,选择器2{
color: blue;
}
-->
<h1 class="tit1">这是第1个h1标签</h1>
<h1 class="tit2">这是第2个h1标签</h1>
<h2> 这是h2标签</h2>
<h3> 这是h3标签</h3>
<p class="p1">
这是第1个p标签
</p>
<p class="p2">
这是第2个p标签
</p>
</body>
</html>
/* 对h1标签且满足class属性为tit1————设置color */
/* 需要 满足所有 条件 */
/* 交集选择器 */
h1.tit1{
color: blue;
}
/* 满足 一个条件 即可 */
/* 并集选择器 */
p,.p1{
color: blue;
}

四、关系选择器

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入外部样式 -->
<link rel="stylesheet" href="day03-css关系选择器样式.css">
</head>
<body>
<div class="box-outer">
<p>box-outer里的第1个p元素儿子</p>
<p>box-outer里的第2个p元素儿子</p>
<span>box-outer里的第1个span元素儿子</span>
<span>box-outer里的第2个span元素儿子</span>
<span>box-outer里的第3个span元素儿子</span>
<div class="box-inner">
<p>box-inner里的p元素</p>
</div>
</div>
</body>
</html>
/* 关系选择器 */
/* 后代选择器 */
/* 父选择器 子选择器----父亲后面的所有相同类型子元素都选择 */
/* 选择box-outer里的p元素 */
/* .box-outer p{
color: brown;
} */
/* 子代选择器 */
/* 父选择器>子选择器----父亲的直接子元素选择 */
/* 选择box-outer里的第一个p元素 */
/* .box-outer>p{
color: brown;
font-size: 30px;
} */
/* 兄弟选择器 */
/* 前面的一个选择器+下一个选择器
选择临近的一个兄弟
紧挨着的兄弟关系 */
/* p+span{
color: red;
font-size: 50px;
} */
/* 哥哥后面的所有弟弟
前面的一个选择器~下一个相同类型的所有选择器
选择后面同类型的所有选择器
*/
p~span{
color: blue;
font-size: 50px;
}

五、动态伪类

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="day03-css伪类选择器样式.css">
</head>
<body>
<!-- 动态伪类 -->
<!-- 超链接
未点击的一个字体样式：蓝色
通过以下格式修改样式
标签:link{
color:green;
}
····改为绿色
点击时字体样式：红色
通过以下格式修改样式
标签:active{
color:blue;
}
····改为蓝色
点击后字体颜色：紫色
通过以下格式修改样式
标签:visited{
color:black;
}
····改为黑色
鼠标移入标签上，就会更改颜色
通过
标签:hover{
color:orange;
}
-->
<a href="https://www.baidu.com/">百度一下，你就知道</a>
<ul>
<li>这是列表1</li>
</ul>
</body>
</html>
a:link{
color:green;
}
a:active{
color: blue;
}
a:visited{
color: black;
}
a:hover{
color: orange;
}
li:hover{
color: orange;
}

六、结构伪类

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="day04结构伪类样式.css">
</head>
<body>
<!-- 结构伪类
---------父元素中的第一个子元素
父元素总体！子元素中的第一个
子标签:first-child
父元素中同类型！子元素中的第一个
子标签:first-of-type
-------父元素中的最后一个子元素
父元素总体！子元素中的最后一个
子标签:last-child
父元素中同类型！子元素中的最后一个
子标签:last-of-type
----------父元素中的第2、n、2n+1（奇数）、odd（奇数）、2n（偶数）、even（偶数）个子元素
父元素总体！子元素中的第2个
子标签:nth-child(2)
父元素中同类型！子元素中的第2个
子标签:nth-of-type(2)
---------排除元素
子标签:not(你要排除的元素)
-->
<div class="box">
<p>这是盒子内部的第1个p</p>
<p>这是盒子内部的第2个p</p>
<p>这是盒子内部的第3个p</p>
<span>这是盒子内部的第1个span</span>
<span>这是盒子内部的第2个span</span>
<span>这是盒子内部的第3个span</span>
<h1>这是盒子内部的第1个h1</h1>
</div>
</body>
</html>
/* 获取到第一个p */
/* p:first-child{
color: blue;
font-size: large;
} */
/* p:first-of-type{
color: brown;
font-size: large;
} */
/* 获取到第一个span */
/* 这个没有反应 */
/* span:first-child{
color: green;
font-size: larger;
font-weight: bold;
} */
/* span:first-of-type{
color: green;
font-size: larger;
font-weight: bold;
} */
/* 获取到最后一个p */
/* 这个没有反应 */
/* p:last-child{
color: blue;
font-size: large;
} */
/* h1:last-child{
color: blue;
} */
/* p:last-of-type{
color: green;
font-size: larger;
font-weight: bold;
} */
/* 获取第2个p */
/* p:nth-child(2){
color: blue;
} */
/* p:nth-of-type(2){
color: green;
font-size: larger;
二、伪元素1
font-weight: bold;
} */
/* 获取第2个span */
/* span:nth-child(2){
color: blue;
} */
/* span:nth-of-type(2){
color: green;
font-size: larger;
font-weight: bold;
} */
/* 除了第3个span，其他span都选 */
/* span:not(span:nth-of-type(3)){
color: green;
font-size: larger;
font-weight: bold;
} */
/* span:not(:last-of-type){
color: red;
font-size: larger;
font-weight: bold;
} */

七、伪元素1

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="day04伪元素样式.css">
</head>
<body>
<!-- 伪元素---伪装成子元素---表示页面中一些不时真实存在的元素，又有位置，又可以显示
在需要添加伪装子元素的元素上添加
-----类似与span元素，为行内！元素，不能设置宽高
------如果说要设置宽、高，必须要进行元素转换！
标签::before 在元素内容！的前面！创建子伪元素的内容！
--------用法如下
p::before{
里面必须要有content属性，值可以为文字""/图片url("图片地址")
content: "这是添加在前面的伪元素内容";
color: white;
background-color: blueviolet;
这种情况下，不能设置宽高
width:100px;
height:100px;
}
标签::after 在元素内容！的后面！创建子伪元素的内容！
--------用法如下
p::after{
里面必须要有content属性，值可以为文字""/图片url("图片地址")
content: "这是添加在前面的伪元素内容";
color: white;
background-color: blueviolet;
/* 因为需要设置宽高，所以需要进行元素转换，转换成行内快元素 */
display: inline-block;
width: 100px;
height: 100px;
}
补充：元素分类
块元素----block-----独占一行，可以设置宽高------div、h、p--------
行内元素----inline----不会独占一行，不可以设置宽高，根据内容来显示的宽度--------span、
img（但是img可以设置宽高）
行内块元素----inline-block----不会独占一行，但是可以设置宽高--------为了转换
-->
<p>
这是需要添加伪元素的p
</p>
</body>
</html>
/* 在p元素前面添加一个伪元素内容 */
p::before{
/* content: url("./images/置顶.png"); */
/* 如果需要对伪元素添加图片，并且想让图片随着伪元素的宽、高设置样式大小，最好把图片放在背景
图里 */
content: "";
background-image: url("./images/置顶.png");
/* 调整内部背景图的填充样式 */
background-size: contain;
/* 因为需要设置宽高，所以需要进行元素转换，转换成行内快元素 */
display: inline-block;
width: 100px;
height: 100px;
}
三、伪元素2
/* span{
color: white;
background-color: blueviolet;
} */
/* 在p元素后面添加一个伪元素内容 */
p::after{
content: "这是在p元素后面添加一个伪元素内容";
color: blue;
background-color: aquamarine;
/* 因为需要设置宽高，所以需要进行元素转换，转换成行内快元素 */
display: inline-block;
width: 100px;
height: 100px;
}

八、伪元素2

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="day04伪元素2样式.css">
</head>
<body>
<!-- 选择第一个！字符
必须只能是块！级元素
-->
<!-- 标签::first-letter{
} -->
<!-- 选择第一行！文字
必须只能是块！级元素
-->
<!-- 标签::first-line{
} -->
<!-- 对选中的文字进行修改样式
修改文本颜色
-->
<!-- 标签::selection{
color:yellow;
} -->
<p>
四、属性选择器
这是p段落1111111111111111111
这是p段落122222222222222222
这是p段落23333333333333333333333
这是p段落4444444444444444
这是p段落5555555555555555555
这是p段落666666666666666666
这是p段落7777777777777777
</p>
</body>
</html>
p::first-letter{
color:green;
font-size: large;
font-weight: bold;
}
p::first-line{
color:blueviolet;
font-size: large;
font-weight: bold;
}
p::selection{
color:yellow;
}

九、属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="day04属性选择器样式.css">
</head>
<body>
<!-- 根据元素的属性来选 -->
<!-- 选择拥有该XXX属性名的标签
标签[XXX属性名]{
}
-->
<!-- 以下几个必须要满足两个条件 -->
<!-- 选择属性为XXX,值为yyy的标签
标签[XXX属性名="yyy值"]{
}
-->
<!-- 选择属性为XXX,值为yyy开头!的标签
标签[XXX属性名^="yyy值"]{
}
-->
<!-- 选择属性为XXX,值为yyy结尾!的标签
标签[XXX属性名$="yyy值"]{
}
-->
<!-- 选择属性为XXX,值包含！yyy的标签
标签[XXX属性名*="yyy值"]{
}
-->
<div>
<p class="ax-p1-bba">这是第1个p元素</p>
<p class="ay-p2-bab">这是第2个p元素<</p>
<p class="az-p3-aab">这是第3个p元素<</p>
<p id="a-p4-bbab">这是第4个p元素<</p>
<p id="ab-p5-aabb">这是第5个p元素<</p>
</div>
</body>
</html>
/* 选择属性为class的p标签 */
p[class]{
color: blue;
font-size: large;
font-weight: bold;
}
/* 选择属性为class,值为p1的p标签 */
/* p[class="p1"]{ */
p[class=p1]{
color: red;
font-size: large;
font-weight: bold;
}
五、常用单位
/* 选择属性为id,值为a开头的p标签 */
p[id^=a]{
color: blueviolet;
font-size: large;
font-weight: bold;
}
/* 选择属性为id,值为b结尾的p标签 */
p[id$=b]{
color: orange;
font-size: large;
font-weight: bold;
}
/* 选择属性为class,值包含a的p标签 */
p[class*=a]{
color: green;
font-size: large;
font-weight: bold;
}

十、常用单位

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
font-size: 5rem;
}
.box1{
width: 100px;
height: 100px;
background-color: blue;
}
.box2{
width: 80%;
height: 60%;
background-color: brown;
}
</style>
</head>
<body>
<!-- 1.长度单位
px---像素单位，比较常用，绝对单位
-----像素越小，屏幕显示就越清晰
六、常用样式
rpx-----在移动端常用，在iPhone6机型下为标准，1rpx = 0.5px 1px = 2rpx
375px = 750rpx
em-----相对单位，相对于父元素，根据父font-size的大小为基准
rem----相对单位，相对于根元素，根据根font-size的大小为基准
-------1rem=20px
vh\vm----相对单位，相对于窗口----存在兼容性问题，对于移动端使用----不常用
------------1vm=窗口1%
1vh=窗口1%
2.百分比单位----多种情况可以使用-----根据父元素调整
3.颜色单位------颜色的英文（也不太常用，单词量问题）
-------0~255
0~255 0~255 0~1
-------------·······--rgb/rgba-----r:红,g:绿色,b：蓝色,a：透明度-----
rgb(255,255,255,1)
-----
---------0:全透
-----
---------1：不透
-------------·······---十六进制-------#FFFFFF（每两位代表 红00~FF 绿00~FF
蓝00~FF）
hsl/hsla------h：色相0~360 s:饱和度0~100% l：
亮度0~100% a：透明度
4.取色器/qq截图/百度
-->
<p>这是p标签</p>
<div class="box1">
<div class="box2">
内部div
</div>
</div>
</body>
</html>

十一、常用样式

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
/* 块级元素 */
/* 设置宽高 */
width: 100px;
height: 100px;
/* 背景颜色 */
background-color: green;
/* 字体颜色 */
/* color: ; */
/* 字体样式 */
/* 微软雅黑、宋体、楷体 */
/* font-family: "微软雅黑"; */
/* font-size: ;
font-weight: ; */
/* 字体呈现样式
normal 正常情况（默认）
italic 斜体
*/
/* font-style: italic; */
/* 英文字母/文字 字的间距 */
/* letter-spacing: 10px; */
/* 行高 */
/* line-height: 100px; */
/* 文字水平位置 */
/* text-align: center; */
/* 文字装饰 */
/* line-through删除线
overline上划线
underline 下划线
*/
/* text-decoration:overline; */
/* 列表 */
/* 去除列表原有的样式 */
/* list-style: none; */
/* 设置整体的透明度 */
/* opacity: 0.5; */
/* 盒子的阴影部分 */
/* box-shadow: 10px 0 100px red; */
/* border: 2px solid red; */
/* 边框宽度 */
border-width: 10px;
/* 边框样式 dashed虚线 dotted小点 double双框 inset嵌入*/
border-style: inset;
/* 边框颜色 */
border-color: royalblue red orange green;
/* 边框四个角的弧度 */
border-radius: 10px 20px 30px 40px;
/* 外边距 */
margin: 20px;
/* 内边距 */
padding: 20px;
}
</style>
</head>
<body>
<div>
这是用来展示的盒子23456apple
</div>
</body>
</html>
埃菲尔上de铁塔梦
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

埃菲尔上de铁塔梦

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值