前端入门01 -- 前言，HTML，HTML标签
2021-12-05 本文已影响0人
YanZi_33
网页
- 网站：是指在因特网上根据一定规则，使用HTML等制作的用于展示特定内容相关的网页集合；
- 网页：是网站中一页，通常是HTML格式的文件，它通过浏览器来阅读；
- 网页是构成网站的基本元素，它通常由图片，链接，文字，声音，视频等元素组成，通常我们看到的网页常见以
.htm或.html后缀结尾的文件，因此将其俗称为HTML文件；
HTML
- HTML：是
超文本标记语言，它是用来制作网页的一门语言； - HTML不是一种编程语言，而是一种
标记语言； - 标记语言是一套标记标签；
- 所谓超文本的含义如下：
- 它可以加入图片，声音，动画，多媒体等内容，
超越了文本的限制； - 它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接(超级链接文本)；
- 它可以加入图片，声音，动画，多媒体等内容，
- 网页是由网页元素组成的，这些元素是利用HTML标签描述出来，然后通过浏览器解析来显示给用户的；
image.png
浏览器
- 浏览器是网页显示，运行的平台，常用的浏览器有IE，火狐，谷歌，Safari，Opera等五大浏览器；
- 浏览器内核：即渲染引擎，负责读取网页内容，整理讯息，计算网页的显示方式并显示页面；
image.png
- 目前国内一般浏览器都会采用
Webkit/Blink内核，例如360，UC，QQ，搜狗等等；
Web标准
- Web标准：是由W3C组织和其他标准化组织执行的一系列标准的集合，W3C(万维网联盟)是国际最著名的标准化组织；
- 使用Web标准的原因：
- 让Web的开发发展前景更广阔；
- 内容能被更广泛的设备访问；
- 更容易被搜寻引擎搜索；
- 降低网站流量费用；
- 使网站更易维护；
- 提高网页的浏览速度；
- Web标准的构成：主要包括
结构，表现和行为三个方面，如下所示：
image.png
- Web标准提出的最佳体验方案：
结构，样式，行为三者分离，简单理解就是结构写到HTML文件中，样式写到CSS文件中，行为写到JavaScript文件中；
HTML语法规范
- HTML标签是由尖括号包围的关键词，例如<html>；
- HTML标签通常是成对出现的，例如<html>和</html> 称为
双标签，标签对中的第一个标签是开始标签，第二个标签是结束标签； - 有些特殊的标签必须是单标签(极少情况)，例如<br />，称为
单标签； - 标签关系有如下：
- 包含关系：相当于父子关系；
- 并列关系：相当于兄弟关系；
<html>
<head> </head>
<body> </body>
</html>
- html与head是包含关系，head与body是并列关系；
HTML基本结构标签
- 每一个网页都会有一个基本结构标签(也称为骨架标签)，页面内容也是在这个基本标签上书写；
image.png
- 新建一个html文件，必须以.html结尾，然后使用浏览打开；
开发工具
- 开发工具有Sublime Text，VS Code，WebStorm，HBuilder等等，这里我使用的VS Code开发工具，下载官方网址为：https://code.visualstudio.com/
- 利用VS Code创建一个html文件
03_vscode创建页面.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>利用vscode创建的第一个页面</title>
</head>
<body>
写代码是一件非常好的事情！！！
</body>
</html>
- 安装
open in browser插件，如下所示：
image.png
- 然后在html文件的编辑区域，右击选择
Open In Defalut Browser在默认浏览器中显示刚刚编写的html文件； - 常用快捷键：针对Mac电脑的；
-
command + 加号：代码字号放大； -
command + 减号： 代码字号缩小； -
command + N：新建文件； -
command + S：保存文件到指定路径，主要文件格式为html； - 输入
!按下Tab键：生成html文件的页面骨架结构； -
control + G：定位代码行；
-
- 其他插件有如下：
- 中文显示：
Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code - 每次保存，都会自动格式化js，css，html代码：
JS-CSS-HTML Formatter - 自动重命名配对的HTML标签：
Auto Rename Tag - 追踪至样式：
CSS Peek
- 中文显示：
- VS Code安装的插件如下所示：
image.png
- 输入
!按下Tab键，生成html文件的页面骨架结构，下面针对生称的内容进行介绍一下； -
<!DOCTYPE html>：是文档类型声明标签，作用就是告诉浏览器使用哪种HTML版本来显示网页，此标签的意思是：当前页面采用的是HTML5版本来显示网页；- <!DOCTYPE html>声明位于文档中的最前面的位置，处于<html>标签之前；
- <!DOCTYPE html>不是一个html标签，它是文档类型声明标签；
-
<html lang="en">：定义当前文档显示的语言；-
en表示英文； -
zh-CN表示中文； - 简单来说定义为en就是英文网页，定义为zh-CN就是中文网页；
-
-
<meta charset="UTF-8">：设置字符集用来规定HTML文件使用的字符编码，UTF-8字符集基本包含了全世界所有国家用到的字符；
HTML标签
h标签 -- 标题标签
- 为了是网页更具有语义化，在网页中使用标题标签，HTML提供了6个等级的网页标题标签，即
<h1> - <h6>； - 标签语义：作为标题使用，并且依据重要性递减，其特点如下：
- 加了标题的文字会加粗，字号也会依次变大；
- 一个标题独占一行；
- 注意⚠️：书写标签时，从左往右依次写；
<!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>
<h1>标题标签</h1>
<h2> 燕子1 </h2>
<h3> 燕子2 </h3>
<h4> 燕子3 </h4>
<h5> 燕子4 </h5>
<h6> 燕子5 </h6>
</body>
</html>
p标签 -- 段落标签
-
<p>标签用于定义段落，它可以将整个网页分为若干个段落； - 标签语义：可以将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>
<p>是在http协议中非常重要的角色。http是无状态协议，也就是说http不会根据之前的访问情况来处理下次请求。在很多涉及账号的网页中，需要根据账号来显示相应的内容， 为了避免每次访问都需要登录，可以在第一次登录完成后将登录信息写入cookie，添加到之后的请求中，这样就解决了http不能记录状态的问题。从开发者层面来说，cookie本质是包含了一系列key-value的数组。</p>
<p>NSHTTPCookie类封装了一个cookie。 该类还提供了将 HTTP cookie 标头转换为NSHTTPCookie实例，并将NSHTTPCookie实例转换为适用于NSURLRequest对象的标头的方法。除非请求指定不发送cookie，否则URL加载系统会自动发送适用于NSURLRequest对象的任何存储的cookie。同样，根据当前的Cookie接受策略接受在NSURLResponse对象中返回的Cookie。</p>
</body>
</html>
br标签 -- 换行标签
- 在HTML中,一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行，若希望某段文本强制换行显示，就可使用
换行标签<br />； - 标签语义：强制换行，其特点如下：
- <br /> 是一个
单标签； - <br />标签只是简单的开始新的一行，与段落标签不一样，段落之间会插入一些垂直的间隙；
- <br /> 是一个
- <br />可以不加反斜杠，即
<br>； - 在VSCode编辑器中，文本太长，可设置多行显示
View->Word Wrap；
<!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>
<p>是在http协议中非常重要的角色。<br /> http是无状态协议，也就是说http不会根据之前的访问情况来处理下次请求。在很多涉及账号的网页中，需要根据账号来显示相应的内容， 为了避免每次访问都需要登录，可以在第一次登录完成后将登录信息写入cookie，添加到之后的请求中，这样就解决了http不能记录状态的问题。从开发者层面来说，cookie本质是包含了一系列key-value的数组。</p>
<p>NSHTTPCookie类封装了一个cookie。 该类还提供了将 HTTP cookie 标头转换为NSHTTPCookie实例，并将NSHTTPCookie实例转换为适用于NSURLRequest对象的标头的方法。除非请求指定不发送cookie，否则URL加载系统会自动发送适用于NSURLRequest对象的任何存储的cookie。同样，根据当前的Cookie接受策略接受在NSURLResponse对象中返回的Cookie。</p>
</body>
</html>
文本格式化标签
- 在网页中，有时需要为文字
设置粗体，斜体或下划线效果，这时就需要用到HTML中的文本格式化标签； - 标签语义：突出重要性，比普通文字更重要；
image.png
<!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>
我是<strong>加粗</strong>的文字
<br /> 我是<b>加粗</b>的文字
<br />我是<em>倾斜</em>的文字
<br />我是<i>倾斜</i>的文字
<br />我是<del>删除线</del>的文字
<br />我是<s>删除线</s>的文字
<br />我是<ins>下划线</ins>的文字
<br />我是<u>下划线</u>的文字
</body>
</html>
div与span标签
- div与span标签是没有语义的，就是一个盒子，用来装内容的；
- 标签特点如下：
- div标签用来布局，但是现在
一行只能放一个div标签，大盒子； - span标签用来布局，
一行上可以放多个span标签，小盒子；
- div标签用来布局，但是现在
<!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>
<div>我是一个div标签我一个人单独占据一行</div>
<div>我是一个div标签我一个人单独占据一行</div>
<span>百度</span>
<span>新浪</span>
<span>搜狐</span>
</body>
</html>
- 浏览器显示效果：
image.png
img标签 -- 图像标签
- 在HTML标签中，img标签用于定义HTML页面中图像；
-
src是<img>标签的必须属性，它用于指定图像文件的路径和文件名，其属性如下所示：
image.png
<!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>
<h4>图像标签的使用:</h4>
<img src="180.png" />
<h4> alt 替换文本 图像显示不出来的时候用文字替换:</h4>
<img src="1801.png" alt="我是你爹" />
<h4> title 提示文本 鼠标放到图像上，提示文字:</h4>
<img src="180.png" alt="我是你爹" title="我真是你爹" />
<h4> width 给图像设置宽度:</h4>
<img src="180.png" alt="我是你爹" title="我真是你爹" width="200" />
<h4> width height 给图像设置宽高:</h4>
<img src="180.png" alt="我是你爹" title="我真是你爹" width="200" height="100" />
<h4> border 给图像设置边框:</h4>
<img src="180.png" alt="我是你爹" title="我真是你爹" width="200" border="15" />
</body>
</html>
- 图片文件必须放在HTML文件所在的文件路径下，与HTML文件平级才会显示出来；
- 图像标签可以拥有多个属性，必须写在标签名的后面；
- 属性之间不分先后顺序，标签名与属性，属性与属性之间均以空格分开；
- 属性采用键值对的格式，即key=value；
- 图像标签的src属性是必须要书写的，属于单标签，后面的反斜杠可以省略；
- 在实际工作中，我们的文件是不能随便乱放的，否则使用起来会很难快速找到它们，因此我们需要一个文件夹来管理它们；
-
目录文件夹：就是普通文件夹，里面只不过存放了我们页面所需要的相关素材，比如html文件，图片等等； -
根目录：打开目录文件夹的第一层就是根目录； - VSCode可以直接打开目录文件夹， 如下所示：
image.png
- 也可以直接将目录文件夹拖进VSCode，然后自动打开；
- 如果HTML页面中图片非常多，通常我们会创建一个文件夹来专门存放这些图片文件，那么再来查找图片时，就需要采用
路径的方式来指定图片文件的位置； - 路径可分为以下两种：
-
相对路径：以引用文件所在位置为参考基础，而建立出的文件路径，简单来说，图片相对于HTML页面的文件路径；
-
image.png
<!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="../180.png" /></body>
</html>
- 绝对路径：是指目录下的绝对位置，直接到达目标位置，通常从盘符开始的路径，例如
/Users/liyanyan33/Desktop/前端/180.png；
<!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="/Users/liyanyan33/Desktop/前端/180.png" />
</body>
</html>
a标签 -- 超链接标签
- 在HTML标签种，a标签用于定义
超链接，作用是从一个页面链接到另一个页面，其有两个重要属性如下：
image.png
- 链接的分类：
-
外部链接：外部网站的链接； -
内部链接：网站内部页面之间的相互链接，直接链接内部页面的名称即可； -
空链接：如果没有确定链接目标时，可使用#表示空链接； -
下载链接：如果href里面的地址是一个文件或者压缩包，会下载这个文件； -
网页元素链接：在网页中的各种网页元素，如文本，图像，表格，音频，视频等都可以添加超链接的； -
锚点链接：点击链接时，可以快速定位到页面中的目标标签； - 针对锚点首先在链接文本的href属性中，设置属性值为
#名字的形式； - 然后找到目标标签，里面添加一个
id属性 = 刚才设置的名字；
-
<!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>
<h4>1.外部链接</h4>
<a href="https://www.qq.com" target="_self">腾讯</a>
<a href="https://www.baidu.com" target="blank">百度</a>
<h4>2.内部链接</h4>
<a href="02_demo.html" target="blank">demo页面</a>
<h4>3.空链接</h4>
<a href="#">公司地址</a>
<h4>4.下载链接</h4>
<a href="images.zip">下载文件</a>
<h4>5.网页元素链接</h4>
<a href="https://www.baidu.com" target="blank"><img src="222.png" /></a>
</body>
</html>
- target="_self"：在当前页面打开网页；
- target="blank"：在新的页面打开网页；
注释标签
- 如果在HTML文档中，添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签；
- 快捷键为
command + /；
<!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>
<!--注释： 我要学习前端 -->
</body>
</html>
特殊字符标签
- 在HTML页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来代替；
image.png
- 其中
空格，大于，小于这三个字符使用频率最高； - 注意以分号结尾；
<!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>
验 证 <br> < p >
</body>
</html>
table标签 -- 表格标签
- 表格是用来展示数据的；
- 语法格式：
<table>
<tr>
<td>单元格内的文字</td>
</tr>
</table>
-
<table></table>：用于定义表格的标签； -
<tr></tr>：定义表格中的行，必须嵌套在<table></table>标签中； -
<td></td>：定义表格中的单元格，必须嵌套在<tr></tr>标签中； -
<td>data</td>：data数据就是单元格中数据内容； -
<th></th>：表头单元格，一般位于表格的第一行或第一列，单元格中文本内容加粗居中显示； - 表格属性：本身属性不常用，主要是通过CSS来设置；
image.png
<!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 align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="250">
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>进入搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td>往下</td>
<td>456</td>
<td>123</td>
<td>
<a href="# ">贴吧</a>
<a href="# ">图片</a>
<a href="# ">百度</a>
</td>
</tr>
<tr>
<td>2</td>
<td>西游记</td>
<td>往下</td>
<td>45346</td>
<td>1223</td>
<td>
<a href="# ">贴吧</a>
<a href="# ">图片</a>
<a href="# ">百度</a>
</td>
</tr>
<tr>
<td>3</td>
<td>东游记</td>
<td>往下</td>
<td>3456</td>
<td>432</td>
<td>
<a href="# ">贴吧</a>
<a href="# ">图片</a>
<a href="# ">百度</a>
</td>
</tr>
<tr>
<td>4</td>
<td>西游记后传</td>
<td>往下</td>
<td>45623</td>
<td>113</td>
<td>
<a href="# ">贴吧</a>
<a href="# ">图片</a>
<a href="# ">百度</a>
</td>
</tr>
<tr>
<td>5</td>
<td>连城诀</td>
<td>往下</td>
<td>5645</td>
<td>768</td>
<td>
<a href="# ">贴吧</a>
<a href="# ">图片</a>
<a href="# ">百度</a>
</td>
</tr>
<tr>
<td>6</td>
<td>仙剑奇侠传</td>
<td>往下</td>
<td>12</td>
<td>567</td>
<td>
<a href="# ">贴吧</a>
<a href="# ">图片</a>
<a href="# ">百度</a>
</td>
</tr>
<tr>
<td>7</td>
<td>神雕侠侣</td>
<td>往下</td>
<td>6576</td>
<td>675</td>
<td>
<a href="# ">贴吧</a>
<a href="# ">图片</a>
<a href="# ">百度</a>
</td>
</tr>
</table>
</body>
</html>
- 显示结果如下：
image.png
表格结构标签
- 由于表格很长，可将表格分割成表格头部和表格主体两大部分；
-
<thead></thead>：表格头部； -
<tbody></tbody>：表格主体； - 上述标签都是放于
<table></table>标签中；
<!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 align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="250">
<thead>
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>进入搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
</thead>
<tbody>
<td>1</td>
<td>鬼吹灯</td>
<td>往下</td>
<td>456</td>
<td>123</td>
<td>
<a href="# ">贴吧</a>
<a href="# ">图片</a>
<a href="# ">百度</a>
</td>
</tr>
<tr>
<td>2</td>
<td>西游记</td>
<td>往下</td>
<td>45346</td>
<td>1223</td>
<td>
<a href="# ">贴吧</a>
<a href="# ">图片</a>
<a href="# ">百度</a>
</td>
</tr>
<tr>
<td>3</td>
<td>东游记</td>
<td>往下</td>
<td>3456</td>
<td>432</td>
<td>
<a href="# ">贴吧</a>
<a href="# ">图片</a>
<a href="# ">百度</a>
</td>
</tr>
<tr>
<td>4</td>
<td>西游记后传</td>
<td>往下</td>
<td>45623</td>
<td>113</td>
<td>
<a href="# ">贴吧</a>
<a href="# ">图片</a>
<a href="# ">百度</a>
</td>
</tr>
<tr>
<td>5</td>
<td>连城诀</td>
<td>往下</td>
<td>5645</td>
<td>768</td>
<td>
<a href="# ">贴吧</a>
<a href="# ">图片</a>
<a href="# ">百度</a>
</td>
</tr>
<tr>
<td>6</td>
<td>仙剑奇侠传</td>
<td>往下</td>
<td>12</td>
<td>567</td>
<td>
<a href="# ">贴吧</a>
<a href="# ">图片</a>
<a href="# ">百度</a>
</td>
</tr>
<tr>
<td>7</td>
<td>神雕侠侣</td>
<td>往下</td>
<td>6576</td>
<td>675</td>
<td>
<a href="# ">贴吧</a>
<a href="# ">图片</a>
<a href="# ">百度</a>
</td>
</tr>
</tbody>
</table>
</body>
</html>
合并单元格
- 将多个单元格合并为一个单元格，简称合并单元格；
-
目标单元格：写合并代码的单元格； - 合并单元格的方式：
- 跨行合并：rowspan = "单元格个数" ，最上侧的单元格为目标单元格；
- 跨列合并：colspan = "单元格个数"，最左侧的单元格为目标单元格；
- 合并单元格的步骤：
- 首先确定是跨行还是跨列；
- 找到目标单元格，书写合并方式=合并数量；
- 删除多余的单元格；
image.png
ul，ol，dl标签 -- 列表标签
- 列表标签是用来布局的；
- 列表分为：无序列表，有序列表，自定义列表；
-
无序列表：无排列顺序的列表，通过<ul></ul>标签来显示；- ul中只能
嵌套li标签； - li之间相当于一个
容器，可以容纳所有元素；
- ul中只能
<!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>
<h4>你喜欢的食物</h4>
<ul>
<li>榴莲</li>
<li>臭豆腐</li>
<li>鲫鱼</li>
</ul>
</body>
</html>
- 显示如下：
image.png
-
有序列表：有排列顺序的列表，通过<ol></ol>标签来显示；- ol中只能
嵌套li标签； - li之间相当于一个
容器，可以容纳所有元素；
- ol中只能
<!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>
<h4>你喜欢的食物</h4>
<ol>
<li>榴莲</li>
<li>臭豆腐</li>
<li>鲫鱼</li>
</ol>
</body>
</html>
- 显示如下：
image.png
-
自定义列表：通过<dl></dl>标签来显示；- 只会包含
<dt></dt>与<dd></dd>标签； -
<dt></dt>表示头部名称，<dd></dd>表示内容； -
<dt></dt>与<dd></dd>可包含任何标签；
- 只会包含
<!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>
<h4>你喜欢的食物</h4>
<dl>
<dt>关注我们</dt>
<dd>新浪微博</dd>
<dd>微信</dd>
<dd>联系我们</dd>
</dl>
</body>
</html>
form标签 -- 表单标签
- 使用表单，可收集用户信息；
- 表单的组成部分：
-
表单域：包含表单元素的区域，使用<form></form>标签表示，可将收集的信息提交到服务端； - 表单控件：也叫表单元素；
- 提示信息；
-
<form action="url地址" method="提交方式" name="表单域名称">
</form>
image.png
表单控件 -- input表单元素
-input表单元素，有个type属性，其取值有如下类型：
- 属于单标签；
image.png
- 其他属性如下所示：
- 当type值为
radio时：属于单选按钮，name属性值必须一致，才能实现单选的效果； - 当type值为
checkbox时：属于多选按钮； - name域value属性值，主要是给后台开发人员使用的；
<!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>
<form action="login" method="post" name="name">
用户名:
<input type="text" name="name" value="请输入用户名" maxlength="6"> <br> 密码:
<input type="password" name="password" value="请输入密码" maxlength="8"><br> 性别:男
<input type="radio" name="sex" value="男" checked="checked"> 性别:女
<input type="radio" name="sex" value="女"><br>爱好:吃饭
<input type="checkbox" name="hobby" value="吃饭">睡觉
<input type="checkbox" name="hobby" value="睡觉">打游戏
<input type="checkbox" name="hobby" value="打游戏" checked="checked"> <br>
<input type="submit" value="免费注册"><br>
<input type="reset" value="重新设置"><br>
<input type="button" value="获取验证码"><br> 上传头像:
<input type="file">
</form>
</body>
</html>
- 显示效果如下：
image.png
label标签
-
<label></label>用于绑定一个表单元素，当点击label标签内的文本时，浏览器就会自动将焦点转到或者选择对应的表单元素上，用来增加用户体验；
<!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>
<form action="login" method="post" name="name">
<label for="text"> 用户名:</label> <input id="text" type="text" name="name" maxlength="6"> <br>
<input type="radio" id="nan" name="sex"><label for="nan">男</label>
<input type="radio" id="nv" name="sex"><label for="nv">女</label>
</form>
</body>
</html>
- label标签的for属性与相关元素的id属性相同；
表单控件之下拉表单<select></select>
- 若存在多个选项，且节约页面空间时，可以使用下拉表单
<select></select>； -
<select></select>中至少包含一个<option>标签； - 可通过<option>标签的
selected属性，设置默认选项；
<!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>
<form action="login" method="post" name="name">
籍贯:
<select>
<option>山东</option>
<option>山西</option>
<option>安徽</option>
<option>上海</option>
<option>湖南</option>
<option>湖北</option>
<option>河南</option>
<option>河北</option>
<option>江苏</option>
<option selected="selected">江西</option>
</select>
</form>
</body>
</html>
表单控件之文本域元素textarea
- 可输入多行文本；
- 属性
cols：表示每行字符数； - 属性
rows：表示显示行数；
<!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>
<form action="login" method="post" name="name">
今日反馈:
<textarea cols="100" rows="5">干你妹</textarea>
</form>
</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>
<h4>青春常在 青春美好</h4>
<table width="600">
<!-- 第一行-->
<tr>
<td>性别:</td>
<td>
<input type="radio" name="sex" id="nan"><label for="nan">男</label>
<input type="radio" name="sex" id="nv"><label for="nv">女</label>
</td>
</tr>
<!-- 第二行 -->
<tr>
<td>生日:</td>
<td>
<select>
<option>--请选择年份--</option>
<option>1990</option>
<option>1991</option>
<option>1993</option>
<option>1994</option>
</select>
<select>
<option>--请选择月份--</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
</select>
<select>
<option>--请选择日--</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
</select>
</td>
</tr>
<!-- 第三行 -->
<tr>
<td>所在地区</td>
<td>
<input type="text" value="江苏省南京市江宁区">
</td>
</tr>
<!-- 第四行 -->
<tr>
<td>婚姻状况</td>
<td>
<input type="radio" name="marry" id="weihun" checked="checked"><label for="weihun">未婚</label>
<input type="radio" name="marry" id="yihun"><label for="yihun">已婚</label>
<input type="radio" name="marry" id="lihun"><label for="lihun">离婚</label>
</td>
</tr>
<!-- 第五行 -->
<tr>
<td>学历</td>
<td>
<input type="text" value="硕士研究生">
</td>
</tr>
<!-- 第六行 -->
<tr>
<td>喜欢的类型</td>
<td>
<input type="checkBox" name="love" id="wumei"><label for="wumei">妩媚的</label>
<input type="checkBox" name="love" id="cute"><label for="cute">可爱的</label>
<input type="checkBox" name="love" id="fm" checked="checked"><label for="fm">丰满的</label>
<input type="checkBox" name="love" id="mt"><label for="mt">苗条的</label>
<input type="checkBox" name="love" id="dh"><label for="dh">荡货的</label>
</td>
</tr>
<!-- 第七行 -->
<tr>
<td>个人介绍</td>
<td>
<textarea>自我介绍</textarea>
</td>
</tr>
<!-- 第八行 -->
<tr>
<td></td>
<td>
<input type="submit" value="免费注册">
</td>
</tr>
<!-- 第九行 -->
<tr>
<td></td>
<td>
<input type="checkbox" checked="checked">我同意注册条款和会员加入标准
</td>
</tr>
<!-- 第十行 -->
<tr>
<td></td>
<td>
<a href="#">我是会员，立即登录</a>
</tr>
<!-- 第十一行 -->
<tr>
<td></td>
<td>
<h5>我承诺</h5>
<ul>
<li>年满18岁，单身</li>
<li>态度严肃</li>
<li>活力四射</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
- 显示效果如下：
image.png
