html5

在线文档

HTML语法规范

基本语法概述

 1. HTML 标签是由尖括号包围的关键词，例如 <html>。
2. HTML 标签通常是成对出现的，例如 <html> 和 </html> ，我们称为双标签。 标签对中的第一个标签是
开始标签，第二个标签是结束标签。
3. 有些特殊的标签必须是单个标签（极少情况），例如 <br />，我们称为单标签。

HTML基本结构

标签名	定义	说明
`<html></html>`	HTML标签	页面中最大的标签，称为根标签
`<head></head>`	文档的头部	注意在head标签中我们必须要设置的标签是title
`<title></title>`	文档的标题	让页面拥有一个属于自己的网页标题
`<body></body>`	文档的主体	元素包含文档的所有内容，页面内容基本都是放到body里面

HTML 文档的的后缀名必须是 .html 或 .htm ，浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。

 <html>
    <!--网页头部-->
    <head>
        <title>我的第一个网页</title>
    </head>
    <!--主体部分-->
    <body>
        我的第一个网页
    </body>
</html>

 <!DOCTYPE html>  <!--DOCTYPE：告诉浏览器，这个页面采取html5版本来显示页面-->
<html lang="en">  <!--lang：用来定义当前文档显示的语言；en定义语言为英语；zh-CN定义语言为中文-->
<head>  <!--head标签代表网页头部-->
    
    <!--meta描述性标签，它用来描述我们网站的一些信息-->
    <meta charset="UTF-8"> <!--字符集charset 常用的值有：GB2312 、BIG5 、GBK 和 UTF-8-->
    <meta name="keywords" content="学习前端">
    <meta name="description" content="html基础学习">
    
    <title>我的第一个网页</title>  <!--title标签代表网页标题-->
</head>
<body>  <!--body标签代表网页主体-->
 
</body>
</html>

网页基本标签

标题标签

HTML 提供了 6 个等级的网页标题，即<h1> - <h6> 。

特点

加了标题的文字会变的加粗，字号也会依次变大。

一个标题独占一行。

 <!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

段落标签

在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。在 HTML 标签中，<p>标签用于定义段落，它可以将整个网页分为若干个段落。

特点

文本在一个段落中会根据浏览器窗口的大小自动换行

段落和段落之间保有空隙

 <!--段落标签-->
<p>两只老虎，跑得快。</p>
<p>     跑得快。</p>
<p>     跑得快。</p>

换行标签

在 HTML 中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。如果希望
某段文本强制换行显示，就需要使用换行标签<br />。

特点

<br /> 是个单标签

<br /> 标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距

 <!--换行标签,自闭合标签-->
两只老虎跑的快<br/>
跑得快<br/>
跑得快<br/>

文本格式化标签

在网页中，有时需要为文字设置粗体、斜体或下划线等效果，这时就需要用到 HTML 中的文本格式化标签，使文字以特殊的方式显示。

语义	标签	说明
加粗	`<strong></strong>`或者`<b></b>`	更推荐使用`<strong>`标签加粗，语义更强烈
倾斜	`<em></em>`或者`<i></i>`	更推荐`<em>`标签，语义更强烈
删除线	`<del></del>`或者`<s></s>`	更推荐使用`<del>`标签，语义更强烈
下划线	`<ins></ins>`或者`<u></u>`	更推荐使用`<ins>`标签，语义更强烈

水平线标签

 <!--水平线标签-->
<hr/>

注释

如果需要在 HTML 文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。
HTML中的注释以结束。快捷键: ctrl + /

 <!-- 注释语句 -->

特殊符号

在 HTML 页面中，一些特殊的符号很难或者不方便直接使用，此时可以使用下面的字符来替代。

特殊字符	描述	字符的代码
	空格符	` `
<	小于号	`<`
>	大于号	`>`
&	和号	`&`
¥	人民币	`¥`
©	版权符号	`©`
®	注册商标	`®`
º	摄氏度	`°`
±	正负号	`±`
×	乘号	`×`
÷	除号	`÷`
²	平方2（上标2）	`²`
³	立方3（上标3）	`³`

 <!--特殊符号记忆方式：
先输入&
再输入任意字母，例如a
即可看到对应符号
分号;结束
-->

div和span标签

<div> 和 <span> 是没有语义的，它们就是一个盒子，用来装内容的。

特点

<div> 标签用来布局，但是现在一行只能放一个<div> 大盒子

<span> 标签用来布局，一行上可以多个 <span> 小盒子

 <div> 这是头部 </div>    
<span> 今日价格 </span>

图片标签

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

常见的图像格式：

 JPG、GIF、PNG、BMP(位图)...

 <img src"图像URL" alt="text" title="text" width="x" height="y"/>

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

所谓属性：简单理解就是属于这个图像标签的特性。

图像标签的其他属性：

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

图像标签注意点：

1.图像标签可以拥有多个属性，必须写在标签名的后面。
2.属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
3.属性采取键值对的格式，即 key=“value" 的格式，属性 =“属性值”。

路径：

分为相对路径和绝对路径：
相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。

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

特点：

相对路径是从代码所在的这个文件出发，去寻找目标文件的，而我们这里所说的上一级、下一级和同一级就是图片相对于 HTML 页面的位置。

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

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签</title>
</head>
<body>
	<img src="../resources/imags/264933.jpg" alt="小太阳" title="小太阳" width="1920px" height="1080px"/>
</body>
</html>

链接标签

 <a href="跳转目标" target="目标窗口位置">链接文本或图像（可以将图片标签嵌入进来）</a>

属性：

属性	说明
href	用于指定链接目标的url地址
target	用于指定链接页面的打开方式`_self`当前窗口打开(默认值) ，`_blank`新窗口打开
#	空链接

链接分类：

1.外部链接：例如 < a href="http:// www.baidu.com "> 百度</a >
2.内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可，例如 < a href="index.html"> 首页 </a >
3.空链接：如果当时没有确定链接目标时，< a href="#"> 首页。
4.下载链接：如果 href 里面地址是一个文件或者压缩包，会下载这个文件。
5.网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接
6.锚点链接：点我们点击链接,可以快速定位到页面中的某个位置

页面间链接

从一个页面链接到另一个页面

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>
<!--a标签：
href：必填，表示要跳转到哪个页面
target：表示窗口在哪里打开
       _blank: 在新标签页打开     blank /blæŋk/ 空白的
       _self：在当前页面打开
 
-->
<a href="html02.html">点击跳转</a>
<a href="https://www.baidu.com">点击跳转到百度</a>
<br/>
 
<!--图片超链接-->
<a href="html04.html">
    <img src="../resources/imags/264933.jpg" alt="小太阳">
</a>
</body>
</html>

锚链接

在链接文本的 href 属性中，设置属性值为 #名字的形式，如<a href="#two"> 第2集 </a>

找到目标位置标签，里面添加一个 id 属性 = 刚才的名字，如：<h3 id="two">第2集介绍</h3>

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>
 
<!--锚标记-->
<a name="top">顶部</a>
 
<p>
    <img src="../resources/imags/264933.jpg" alt="小太阳" title="小太阳" width="500px" height="500px">
</p>
 
<p>
    <img src="../resources/imags/264933.jpg" alt="小太阳" title="小太阳" width="500px" height="500px">
</p>
 
<p>
    <img src="../resources/imags/264933.jpg" alt="小太阳" title="小太阳" width="500px" height="500px">
</p>
 
<p>
    <img src="../resources/imags/264933.jpg" alt="小太阳" title="小太阳" width="500px" height="500px">
</p>
 
<p>
    <img src="../resources/imags/264933.jpg" alt="小太阳" title="小太阳" width="500px" height="500px">
</p>
 
<p>
    <img src="../resources/imags/264933.jpg" alt="小太阳" title="小太阳" width="500px" height="500px">
</p>
 
<!--锚链接（返回到顶部）
1.需要一个锚标记
    <a name="top">顶部</a>
2.跳转到标记
    href="#:通过井号跳转到标记"
-->
<a href="#top">回到顶部</a>
 
<!--跳转到其他页面的标记处-->
<a href="html03.html#down">跳转到html03.html页面的down标记处</a>
 
</body>
</html>

功能性链接

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>
 
<!--功能性链接
    邮件链接：href="mailto:邮件地址"
    QQ链接：搜索QQ推广，登录，推广工具
-->
    
<!--邮件链接-->
<a href="mailto:ssh2613@163.com">点击联系我</a>
 
<!--QQ推广链接-->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"><img border="0" src="../resources/imags/counseling_style_53.png" alt="你好，加我。领取小电影！" title="你好，加我。领取小电影！"/></a>
 
</body>
</html>

列表

列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便。
根据使用情景不同，列表可以分为三大类：无序列表、有序列表和自定义列表。

标签名	定义	说明
`<ul></ul>`	无序标签	里面只能包含`li`，没有顺序，使用较多。`li`里面可以包含任何标签。
`<ol></ol>`	有序标签	里面只能包含`li`，有顺序，使用相对较少。`li`里面可以包含任何标签。
`<dl></dl>`	自定义列表	里面只能包含`dt`和`dd`。`dt`和`dd`里面可以放任何标签。

无序列表

<ul> 标签表示 HTML 页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用 <li> 标签定义。

无序列表的基本语法格式如下：

 <ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    ...
</ul>

1.无序列表的各个列表项之间没有顺序级别之分，是并列的。

2.<ul></ul> 中只能嵌套 <li></li>，直接在 <ul></ul> 标签中输入其他标签或者文字的做法是不被允许的。

3.<li> 与 </li> 之间相当于一个容器，可以容纳所有元素。

4.无序列表会带有自己的样式属性，但在实际使用时，我们会使用 CSS 来设置。

 <!--无序列表
    应用范围：导航，侧边栏
-->
<ul>
    <li>java</li>
    <li>c</li>
    <li>c++</li>
    <li>python</li>
</ul>

有序列表

有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列定义。

在 HTML 标签中，<ol> 标签用于定义有序列表，列表排序以数字来显示，并且使用 <li> 标签来定义列表项。

有序列表的基本语法格式如下：

 <ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    ...
</ol>

<ol></ol>中只能嵌套<li></li>，直接在<ol></ol>标签中输入其他标签或者文字的做法是不被允许的。

<li> 与 </li>之间相当于一个容器，可以容纳所有元素。

有序列表会带有自己样式属性，但在实际使用时，我们会使用 CSS 来设置。

 <!--有序列表
    应用范围：试卷，问答
-->
<ol>
    <li>java</li>
    <li>c</li>
    <li>c++</li>
    <li>python</li>
</ol>

自定义列表

自定义列表的使用场景:

自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。

在 HTML 标签中，<dl> 标签用于定义描述列表（或定义列表），该标签会与 <dt>（定义项目/名字）和
<dd>（描述每一个项目/名字）一起使用。

基本语法如下：

 <dl>
    <dt>名词1</dt>
    <dd>名词1解释1</dd>
    <dd>名词1解释2</dd>
</dl>

1.<dl></dl> 里面只能包含 <dt> 和 <dd>。

2.<dt> 和 <dd>个数没有限制，经常是一个<dt> 对应多个<dd>。

 <!--自定义列表
    dl：标签
    dt：列表名称
    dd：列表内容
 
    应用范围：公司网页底部
-->
<dl>
    <dt>学科</dt>
    <dd>java</dd>
    <dd>c</dd>
    <dd>c++</dd>
 
    <dt>位置</dt>
    <dd>杭州</dd>
    <dd>重庆</dd>
</dl>

表格

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

表格不是用来布局页面的,而是用来展示数据的。

标签	说明
`<table> </table>`	用于定义表格的标签
`<tr> </tr>`	用于定义表格中的行，必须嵌套在 `<table> </table>`标签中
`<td> </td>`	用于定义表格中的单元格，必须嵌套在`<tr></tr>`标签中

表格的基本语法

 <table>
    <tr>
    	<td>单元格内的文字</td>
    	...
    </tr>
    ...
</table>

表头单元格标签

一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示。

<th> 标签表示 HTML 表格的表头部分(table head 的缩写)

 <table>
    <tr>
    	<th>姓名</th>
    </tr>
</table>

表格属性

使用在<table>标签上。

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

表格结构标签

使用场景：因为表格可能很长，为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分。
在表格标签中，分别用：<thead>标签表格的头部区域、`标签表格的主体区域。这样可以更好的分清表格结构。

标签	说明
`<thead></thead>`	用于定义表格的头部。 `<thead>` 内部必须拥有 `<tr>` 标签。一般是位于第一行。
`<tbody></tbody>`	用于定义表格的主体，主要用于放数据本体。

以上标签都是放在 <table></table> 标签中

合并单元格

特殊情况下，可以把多个单元格合并为一个单元格。

合并单元格方式：

合并方式	说明
跨行合并	`rowspan="合并单元格的个数"`
跨列合并	`colspan="合并单元格的个数"`

合并单元格三步曲：

先确定是跨行还是跨列合并。

找到目标单元格，写上合并方式 = 合并的单元格数量。比如：<td colspan="2"></td>。删除多余的单元格。

跨行：最上侧单元格为目标单元格, 写合并代码

跨列：最左侧单元格为目标单元格, 写合并代码

举个🌰

 <table border="1px">
    <tr>
        <td>id</td>
        <td>name</td>
        <td>password</td>
    </tr>
    <tr>
        <td>1</td>
        <td>zhangsan</td>
        <td>0000</td>
    </tr>
 
    <tr>
        <!--跨列colspan="跨的列数"-->
        <td colspan="4">员工信息</td>
    </tr>
    <tr>
        <!--跨行rowspan="跨的行数"-->
        <td rowspan="3">部门</td>
        <td>id</td>
        <td>name</td>
        <td>password</td>
    </tr>
    <tr>
        <td>1</td>
        <td>zhangsan</td>
        <td>0000</td>
    </tr>
</table>

表单

表单的组成

在 HTML 中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和提示信息3个部分构成。

表单域

表单域是一个包含表单元素的区域。
在 HTML 标签中， <form> 标签用于定义表单域，以实现用户信息的收集和传递。

<form> 会把它范围内的表单元素信息提交给服务器

 <form action=“url地址” method=“提交方式” name=“表单域名称">
	各种表单元素控件
</form>

表单域的常用属性

属性	属性值	作用
action	url地址	用于指定接收并处理表单数据的服务器程序的url地址
method	get/post	用于设置表单数据的提交方式，其取值为get或post
name	名称	用于指定表单的名称，以区分同一个页面中的多个表单域

表单控件(表单元素)

在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件。

`input` 表单元素

在英文单词中，input 是输入的意思，而在表单元素中 <input> 标签用于收集用户信息。

在 <input> 标签中，包含一个 type 属性，根据不同的 type 属性值，输入字段拥有很多种形式（可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等）。

 <input type="属性值" />

<input /> 标签为单标签

type 属性设置不同的属性值用来指定不同的控件类型

type 属性的属性值及其描述

属性值	描述
button	普通按钮，定义可点击按钮（多数情况下，用于通过JavaScript启动脚本）
checkbox	复选框
file	文件上传，定义输入字段和"浏览"按钮，供文件上传
hidden	隐藏域，定义隐藏的输入字段
image	图片按钮，定义图像形式的提交按钮
password	密码框，定义密码字段，该字段中的字符被掩码
radio	单选框按钮
reset	重置按钮，重置按钮会清除表单中的所有数据
submit	提交按钮，提交按钮会把表单数据发送到服务器
text（默认）	文本框，定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符

其他属性

除 type 属性外，<input>标签还有其他很多属性，其常用属性如下：

属性	属性值	描述
name	由用户自定义	定义input元素的名称
value	由用户自定义	规定input元素的值，type为radio时必须指定一个值
checked	checked	type为radio或checkbox时，规定此input元素首次加载时应当被选中
maxlength	正整数	type为text或password时，规定输入字段中的字符的最大长度
size	正整数	指定表单元素的初始宽度，当type为text或password时，表单元素的大小以字符为单位，对于其他类型，宽度以像素为单位

name 和value 是每个表单元素都有的属性值，主要给后台人员使用

name 表单元素的名字，要求单选按钮和复选框要有相同的name值

checked属性主要针对于单选按钮和复选框，主要作用一打开页面，就要可以默认选中某个表单元素

maxlength 是用户可以在表单元素输入的最大字符数，一般较少使用

举个🌰

有些表单元素想刚打开页面就默认显示几个文字怎么做?

可以给这些表单元素设置 value 属性=“值”

 用户名: <input type="text" value="请输入用户名" />

页面中的表单元素很多，如何区别不同的表单元素?

name 属性：当前 input 表单的名字，后台可以通过这个 name 属性找到这个表单。页面中的表单很多，
name 的主要作用就是用于区别不同的表单。

 用户名: <input type="text" value="请输入用户名" name="username" />

name 属性后面的值，是自定义的。

radio (或者checkbox）如果是一组，我们必须给他们命名相同的名字

 <input type="radio" name="sex" />男
<input type="radio" name="sex" />女

如果页面一打开就让某个单选按钮或者复选框是选中状态?

checked 属性：表示默认选中状态。用于单选按钮和复选按钮。

 性 别:
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女

如何让input表单元素展示不同的形态? 比如单选按钮或者文本框

type属性：type属性可以让input表单元素设置不同的形态

 <input type="radio" name="sex" value="男" checked="checked" />男
<input type="text" value=“请输入用户名”>

`label` 标签

<label> 标签为 input 元素定义标注（标签）。

<label> 标签用于绑定一个表单元素，当点击<label> 标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上，用来增加用户体验。

 <label for="sex">男</label>
<input type="radio" name="sex" id="sex" />

<label> 标签的 for 属性应当与相关元素的 id 属性相同。

`select` 表单元素

使用场景：在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用<select>标签控件定义下拉列表。

 <select>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
    ...
</select>

<select>中至少包含一对<option>。

在<option> 中定义 selected ="selected" 时，当前项即为默认选中项。

`textarea` 表单元素

使用场景：当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用 <textarea> 标签。

在表单元素中，<textarea> 标签是用于定义多行文本输入的控件。

使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论。

 <textarea rows="3" cols="20">
	文本内容
</textarea>

通过 <textarea> 标签可以轻松地创建多行文本输入框。

cols=“每行中的字符数” ，rows=“显示的行数”，我们在实际开发中不会使用，都是用 CSS 来改变大小。

表单元素总结

表单元素我们学习了三大组：

input 输入表单元素
select 下拉表单元素
textarea 文本域表单元素

这三组表单元素都应该包含在form表单域里面，并且有 name 属性。

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--表单form
        action:表单提交的位置，可以是网站，也可以是一个请求处理地址
        method：
            get：我们可以在url中看到我们提交的信息，不安全，高效
            post：比较安全，传输大文件
    -->
    <form action="html07.html" method="get">
        <!--文本输入框：input type="text"-->
        <p>名字：<input name="name" type="text"></p>
        <!--密码框：input type="passsword"-->
        <p>密码：<input name="pass" type="password"></p>
        <p>
            <input type="submit" name="Button" value="提交"/>
            <input type="reset" name="Reset" value="重置"/>
        </p>
    </form>
</body>
</html>

 <form action="html07.html" method="get">
    <!--文本输入框：input type="text"
    size:文本框长度
    value:默认初始值
    maxlength:最长能写几个字符
    -->
    <p>名字：<input name="name" type="text" value="用户名" size="3"></p>
    <!--密码框：input type="passsword"-->
    <p>密码：<input name="pass" type="password" value="密码" maxlength="6"></p>
 
    <!--单选框标签
    input type="radio"
    value:单选框的值
    name:表示组
    -->
    <p>
        <input type="radio" name="sex" value="0"/>男
        <input type="radio" name="sex" value="1"/>女
    </p>
</form>

 <form action="html07.html" method="get">   
<!--
    提交按钮：input type="submit"
    重置按钮：input type="reset"
    -->
    <p>
        <input type="submit" name="Button" value="提交"/>
        <input type="reset" name="Reset" value="重置"/>
    </p>
 
 
    <!--多选框
    input type="checkbox"
    -->
    <p>地址：
        <input type="checkbox" name="site" value="beijing">北京
        <input type="checkbox" name="site" value="shanghai">上海
        <input type="checkbox" name="site" value="hangzhou">杭州
    </p>
 
    <!--普通按钮
    input type="button"
    -->
    <p>
        <input type="button" name="确认" value="yes">点击按钮
    </p>
 
    <!--图片按钮
    input type="image"
    -->
    <p>
        <input type="image" name="yes" src="../resources/imags/264933.jpg">
    </p>
</form>

 <form action="html07.html" method="get">    
<!--下拉框
    select：标签
        option：选项
    selected：默认选中项
    -->
    <p>国家:
    <select name="guojia" id="">
        <option value="xuanxiang">选项</option>
        <option value="china" selected>中国</option>
        <option value="hg">韩国</option>
        <option value="***">新加坡</option>
    </select>
    </p>
 
    <!--文本域
        textarea
        cols：列
        rows：行
    -->
    <p>反馈：
        <textarea name="text" cols="10" rows="10"></textarea>
    </p>
 
    <!--文件域
        input type="file" name=""
    -->
    <p>
        <input type="file" name="file">
    </p>
</form>

 <form action="html07.html" method="get">   
	<!--邮箱验证
        input type="email" name=""
    -->
    <p>邮箱：
        <input type="email" name="email">
    </p>
 
    <!--url验证
        input type="url" name=""
    -->
    <p>url:
    <input type="url" name="url">
    </p>
 
    <!--数字验证
    input type="number" name=""
    max：最大值
    min：最小值
    step：每次增加的数量
    value：设置初始值
    -->
    <p>商品数量：
        <input type="number" name="number" max="10" min="1" step="2" value="0">
    </p>
 
    <!--滑块：
        input type="range" name=""
        应用范围：一般用于音量
        max：最大值
        min：最小值
        step：每次
    -->
    <p>音量：
        <input type="range" name="vol" max="100" min="0">
    </p>
 
    <!--搜索框
        input type="search" name=""     search  /sɜːtʃ/  搜索，搜寻
    -->
    <p>搜索：
        <input type="search" name="search">
    </p>
 
</form>

表单应用

隐藏域

 <!--
hidden:隐藏框内内容不显示，但实际的值是存在且可提交的
-->
<p>
   密码：<input name="pass" type="password" value="密码" maxlength="6" hidden>
</p>

只读

 <!--
readonly:设为只读，不能修改
-->
<p>
    名字：<input name="name" type="text" value="用户名" size="3" readonly>
</p>

禁用

 <!--
disabled:禁用，不能进行操作
-->
<input type="radio" name="sex" value="0" disabled/>男

增强鼠标可用性

     <!--
    label标签
    for：指定一个id，当点击“跳到”时，光标会跳到id所在的标签框内
    -->
    <label for="mian">跳到</label>
    <input type="text" id="mian" name="text">

常用方式

placeholder提示信息

 <!--
placeholder: 默认提示信息，当编辑新内容时，会被取代
应用在输入框中
-->
<input type="text" name="username" placeholder="请输入用户名">

required非空判断

 <!--
required: 非空判断，必须填写
应用在输入框中
-->
<input type="text" name="" placeholder="请输入用户名" required>

pattern正则表达式

 <!--
pattern: 正则表达式，使用正则表达式脚本规范验证
应用在输入框中
-->
<input type="text" name="" placeholder="请输入用户名" required pattern="/^[a-z0-9_-]{3,16}$/">

媒体元素

视频

 <!--音频和视频
	video /ˈvɪ di əʊ/ 视频，录像
    src：资源路径
    controls：控制条
    autoplay：自动播放
-->
<video src="../resources/video/202002241911.mp4" controls autoplay></video>

音频

 <!--音频和视频
	audio /ˈɔːdi əʊ/ 声音的，音频的
    src：资源路径
    controls：控制条
    autoplay：自动播放
-->
<audio src="../resources/audio" controls autoplay></audio>

页面结构分析

元素名	描述
header	标题头部区域的内容（用于页面或页面中的一块区域）
footer	标记脚部区域的内容（用于整个页面或页面的一块区域）
section	Web页面中的一块独立区域
article	独立的文章内容
aside	相关内容或应用（常用于侧边栏）
nav	导航类辅助内容

iframe内联框架

 在一个网页内嵌入另一个网页
<iframe src="path" name="mainFrame"></iframe>
 
src：引用页面地址
name：框架标识名

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--iframe内联框架
    src：地址
    width：宽度
    height：高度
 
将百度页面嵌入到当前框架内显示
src定义要嵌入网页的地址，会直接将要嵌入到网页嵌入在里面
-->
<iframe src="https:www.baidu.com" name="baidu" frameborder="0" width="1887px" height="900px"></iframe>
 
 
<iframe src="" name="hello" frameborder="0" width="1900px" height="900px"></iframe>
<!--
    点击跳转时，将html05.html嵌入到hello框架内显示
	a标签一定要写target="内联框架标识名：name数值"
-->
<a href="html05.html" target="hello">点击跳转</a>
 
</body>
</html>

上一篇css3

下一篇盒子模型

posted @ 2023-12-21 22:29 Lz_蚂蚱阅读(18) 评论(0) 编辑收藏举报

刷新页面返回顶部

（评论功能已被禁用）

	1. HTML 标签是由尖括号包围的关键词，例如 <html>。
	2. HTML 标签通常是成对出现的，例如 <html> 和 </html> ，我们称为双标签。标签对中的第一个标签是
	开始标签，第二个标签是结束标签。
	3. 有些特殊的标签必须是单个标签（极少情况），例如 <br />，我们称为单标签。

	<html>
	<!--网页头部-->
	<head>
	<title>我的第一个网页</title>
	</head>
	<!--主体部分-->
	<body>
	我的第一个网页
	</body>
	</html>

	<!DOCTYPE html> <!--DOCTYPE：告诉浏览器，这个页面采取html5版本来显示页面-->
	<html lang="en"> <!--lang：用来定义当前文档显示的语言；en定义语言为英语；zh-CN定义语言为中文-->
	<head> <!--head标签代表网页头部-->

	<!--meta描述性标签，它用来描述我们网站的一些信息-->
	<meta charset="UTF-8"> <!--字符集charset 常用的值有：GB2312 、BIG5 、GBK 和 UTF-8-->
	<meta name="keywords" content="学习前端">
	<meta name="description" content="html基础学习">

	<title>我的第一个网页</title> <!--title标签代表网页标题-->
	</head>
	<body> <!--body标签代表网页主体-->

	</body>
	</html>

	<!--标题标签-->
	<h1>一级标签</h1>
	<h2>二级标签</h2>
	<h3>三级标签</h3>
	<h4>四级标签</h4>
	<h5>五级标签</h5>
	<h6>六级标签</h6>

	<!--段落标签-->
	<p>两只老虎，跑得快。</p>
	<p> 跑得快。</p>
	<p> 跑得快。</p>

	<!--换行标签,自闭合标签-->
	两只老虎跑的快<br/>
	跑得快<br/>
	跑得快<br/>

特殊字符	描述	字符的代码
	空格符	` `
<	小于号	`<`
>	大于号	`>`
&	和号	`&`
¥	人民币	`¥`
©	版权符号	`©`
®	注册商标	`®`
º	摄氏度	`°`
±	正负号	`±`
×	乘号	`×`
÷	除号	`÷`
²	平方2（上标2）	`²`
³	立方3（上标3）	`³`

	<!--特殊符号记忆方式：
	先输入&
	再输入任意字母，例如a
	即可看到对应符号
	分号;结束
	-->

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>图像标签</title>
	</head>
	<body>
	<img src="../resources/imags/264933.jpg" alt="小太阳" title="小太阳" width="1920px" height="1080px"/>
	</body>
	</html>

	<ul>
	<li>列表项1</li>
	<li>列表项2</li>
	<li>列表项3</li>
	...
	</ul>

特殊字符	描述	字符的代码
	空格符	` `
<	小于号	`<`
>	大于号	`>`
&	和号	`&`
¥	人民币	`¥`
©	版权符号	`©`
®	注册商标	`®`
º	摄氏度	`°`
±	正负号	`±`
×	乘号	`×`
÷	除号	`÷`
²	平方2（上标2）	`²`
³	立方3（上标3）	`³`

	<!--无序列表
	应用范围：导航，侧边栏
	-->
	<ul>
	<li>java</li>
	<li>c</li>
	<li>c++</li>
	<li>python</li>
	</ul>

	<ol>
	<li>列表项1</li>
	<li>列表项2</li>
	<li>列表项3</li>
	...
	</ol>

	<!--有序列表
	应用范围：试卷，问答
	-->
	<ol>
	<li>java</li>
	<li>c</li>
	<li>c++</li>
	<li>python</li>
	</ol>

	<dl>
	<dt>名词1</dt>
	<dd>名词1解释1</dd>
	<dd>名词1解释2</dd>
	</dl>

	<!--自定义列表
	dl：标签
	dt：列表名称
	dd：列表内容

	应用范围：公司网页底部
	-->
	<dl>
	<dt>学科</dt>
	<dd>java</dd>
	<dd>c</dd>
	<dd>c++</dd>

	<dt>位置</dt>
	<dd>杭州</dd>
	<dd>重庆</dd>
	</dl>

	<table>
	<tr>
	<td>单元格内的文字</td>
	...
	</tr>
	...
	</table>

	<table border="1px">
	<tr>
	<td>id</td>
	<td>name</td>
	<td>password</td>
	</tr>
	<tr>
	<td>1</td>
	<td>zhangsan</td>
	<td>0000</td>
	</tr>

	<tr>
	<!--跨列colspan="跨的列数"-->
	<td colspan="4">员工信息</td>
	</tr>
	<tr>
	<!--跨行rowspan="跨的行数"-->
	<td rowspan="3">部门</td>
	<td>id</td>
	<td>name</td>
	<td>password</td>
	</tr>
	<tr>
	<td>1</td>
	<td>zhangsan</td>
	<td>0000</td>
	</tr>
	</table>

	<form action=“url地址” method=“提交方式” name=“表单域名称">
	各种表单元素控件
	</form>

	<input type="radio" name="sex" />男
	<input type="radio" name="sex" />女

Lz_蚂蚱