WEB前端开发
创建Web页面或app等前端界面呈现给用户的过程 核心技术：HTML、CSS、Javascript以及衍生出的各种技术、框架等。
客户端（Client）
- 也叫用户端，指的是普通用户使用的终端，客户端有多种形式，比如常用的就是浏览器、app等，而web开发最主要的客户端形式还是浏览器
浏览器（Browser）
- 是一种用户上网搜索、查看信息资源的应用程序。
- 功能：用于发送HTTP请求到服务器，接收服务器发回的HTTP响应，渲染HTML页面。
主流浏览器
- 微软的IE和Microsoft Edge、Mozilla 的 Firefox 、苹果公司的 Safari 、Google 的 Chrome 、Opera 软件公司的 Opera
| 浏览器 | 内核 |
|---|---|
| IE/Edge | Trident |
| Firefox | Cecko |
| Safari | Webkit |
| Chrome | Webkit→Blink |
| Opera | Presto→Webkit→Blink |
- 推荐使用Chrome（渲染效果好、市场占有率高、自带开发者调试工具）
HTTP 协议
- Hypertext Transfer Protocol:超文本传输协议。
- HTTP 请求(request)
- HTTP 响应(response)
HTML
HTML 概念
1. 纯文本格式
- 没有任何文本修饰，只保存文本，不保存其格式设置。
| 纯文本格式 | 富文本格式 |
|---|---|
| 类似.txt | 类似.doc |
| 文件小，更易于传输 | |
| 可以通过直接更改扩展名的方式更改保存格式 | |
| 可以使用任意的纯文本编辑器进行查看和编辑 |
- html、css、js 文件都是纯文本格式文件
2. HTML
- Hypertext Markup Language：超文本标记语言。是用来制作网页的一种标记语言。
- HTML 呈现效果包含了文字以外的内容。
重要概念
| 超文本 | 标记 |
|---|---|
| 超文本就是用于链接另一个文本或多媒体内容的文本 | 标签（HTML Tag）在编辑器中可以编辑和查看，在浏览器中不显示。 |
HTML 的功能
利用标记给普通的文本添加语义、描述超文本内容，搭建网页的基本结构。
HTML 语义化
- 语义化网页的优势
- 方便代码的阅读和后期维护
- 便于浏览器或是网络爬虫更好地解析网站内容
- 使用语义化标签有利于SEO搜索引擎优化，提高网站的搜索排名
HTML基本语法
HTML规范版本
- W3C：万物网联盟。专门发布和维护互联网的规范和标准。
| 版本 | 发布时间 | 备注 |
|---|---|---|
| HTML1.0 | 1993.06 | 互联网工程小组发布的工作草案 |
| HTML4.0 | 1997.12.18 | W3C推荐标准。引入了样式表css，实现了结构和样式分离 |
| XHTML1.0 | 2000.01.20 | 升级扩展和严格化 |
| HTML5 | 2008.1.22 | 2012年已形成了稳定的版本 |
- 多用HTML5
HTML标签
- 语法
- 表签名必须书在<>内
<html></html> - 单标签，双标签
<p></p> <br/> - XHTML结束标签必须写关闭符号 /
在HTML5中，单标签可以不写标记符号。
- 表签名必须书在<>内
- 标签级别
- 容器级：标签内部可以存放任意内容，h1，div等
- 文本级：只能存放文集或类似文字的内容，图片、表单元素等，p等。
HTML元素
- HTML元素的特性
- 元素间对空格、换行、缩进等形成的空白不敏感
- 空白折叠现象：元素内容之间对空格、换行、缩进形成的空白，会出现空白折叠现象。
- 元素与元素之间，元素中间的内容区别。
HTML属性
- HTML属性规范
- 书写位置：必须写在开始标签或者单标签之内，与标签名之间用空格分开。
- 属性值包含：属性名（key）、属性值（value）。键值对写法。XTML属性值必须在双引号内部。
<p k="v"></p>- 一个便签内可以设置多个属性，属性之间必须用空格分割。
<p k="v" k="v" k="v"></p>- 部分标签属性可以设置多个属性值，属性值必须写在同一对双引号内，多个属性值之间用空格分割。
<p k="v1 v2 v3"></p>
编辑器
VS Code编辑器
- 微软公司研发的一款非常方便使用的编辑器
- 拥有超级丰富的插件扩展，（扩展插件库）
插件扩展
打开安装插件快捷键：Ctrl + Shift + X
| Chinese | 中文界面 |
|---|---|
| Auto Rename Tag | 修改html标签，自动完成尾部闭合标签的同步更改 |
| open on browser | 右键设置在默认浏览器打开网页 |
| Mithril Emmet | 快速编写工具(可以不必安装) |
快捷键
| 快捷键 | 功能 |
|---|---|
| 标签名*n→tab | 自动生成n个相同的标签 |
| h$*n→tab | h1到hn的标签 |
| ctrl + shift + K/ctrl + x | 删除光标所在的行、所选的内容 |
| alt + ↑ | 将光标所在行上移一行 |
| alt + ↓ | 将光标所在行下移一行 |
| 按住鼠标滚轮拖动/shift + alt | 同时选中多个光标，同时操作 |
| ctrl+z | 无限后退一步 |
| ctrl + shift + z | 无限还原一步 |
| ctrl + enter | 在任意位置直接换行 |
HTML 基本结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
基本骨架
- 基本骨架：
<html>、<head>、<title>、<body>
<html>
<head>
<title>网页的标题</title>
</head>
<body>
网页的主体
</body>
</html>
- html 作用：定义HTML文件的根元素，所有标签要书写在html标签内部
- head 作用：用于存放title,meta,base,style,script,link。用于对网页的设置，除了title内部的文字，其他标签都不显示在浏览器上。
head标签中必须要设置的标签是title。
-
title 页面标题 提高SEO搜索引擎优化 搜索结果的标题 浏览器收藏默认的标题 建议网页必须添加title标签内部内容，内容尽量精简，提取网页的关键字。
-
body 作用：定义网页的主体部分，显示内容标签p，h1，div，a等。 body内部的元素内容会显示在浏览器的窗口中。
DTD
- 文档定义类型：DocType Definition 文档声明类型：DocType Declaration
- 作用：告知浏览器该页面使用的是哪个版本的HTML规范
<!DOCTYPE html>
命名空间
- xml：可扩展标记语言，使用在传输过程中的规范。
- xmlns：XML NameSpace，NameSpace叫做命名空间。
- <html>命名空间遵循统一标准。
-
语言
- lang="en" 表示所有标签元素内容的语言都是英文，对搜索引擎和浏览器是有帮助的。
- lang="zh-cn"表示中文（中国）
<html lang="en">
字符集
-
<head>内部<meta>标签页面使用的字符编码。
-
char：character，字符。 set：集合。
-
HTML5版本
<meta charset="UTF-8"> -
常用字符集编码 国际通用字库： UTF-8（所有人类的语言）一个汉字3个字节大小。 中文国标字库： gb2312 gbk：一个汉字为2个字节大小。
-
常见问题（使用）
- 没有网页加载速度的要求。制作的是外文网站。使用UTF-8.
- 含有大量的中文汉字的网站，而且要求网页加载速度快。使用gbk。
- meta标签声明的字库，必须和编辑器软件默认编译字库相同，否则会出现两个字库不匹配，浏览器加载时出现乱码。
HTML常用标签
注释
快捷键：ctrl + /
<!-- -->
- 用途
- 在源代码中添加描述性的提示信息，便于我们阅读代码。
- 纠错，通过注释某一行HTMl代码，检索错误的位置。
- 便于后期恢复代码。
标题
快捷键：h$*6
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
-
h1是最大的标题 h6最小的标题
-
双标签，容器级标签。
-
作用
- 给标签内部元素内容添加对应级别标题的语义，不负责样式。样式是由CSS设定的。
-
标题标签之间不能互相嵌套，是同级关系。
-
h1在整个HTML中的权重非常高
-
一个页面中只能出现一个h1
段落
<p></p>
- 双标签，文本级标签。
- 内部只能放置文本、图片、表单元素，
- 作用是添加一个完整段落的语义，不负责自动换行的样式。
换行标签
<br/>
- 单标签
- 强制换行
文本格式化
- HTML部分标签是用来对文字进行格式化显示设置的，粗体和斜体等。
- 文本格式化的标签均为双标签，且为文本级标签，内部只能书写文字。
| 标签 | 描述 | |
|---|---|---|
| b | 加粗 | |
| *strong | 加粗 | |
| i | 斜体 | |
| *em | 斜体 | 26 |
| u | 下划线 | 3 |
| sub | 下标 | |
| sup | 上标 |
图像
<img>
- 单标签，本身相当于一个特殊的文本。
- 作用是在指定的位置插入一张图片
- 常用图片类型：jpg、png、gif。
- 标签属性
| 属性名 | 描述 |
|---|---|
| src | 图片的路径 |
| width | 宽度 |
| height | 高度 |
| border | 边框 |
| title | 提示文本 |
| alt | 图像没有找到时候的替换文本 |
src
-
img标签必须设置src路径
-
相对路径：
- 同级查找
<img src="xxx.jpg">- 子级查找
<img src="images/xxx.jpg"> <img src="images/tupian/xxx.jpg">- 上级查找 跳出文件夹到上一层
<img src="../xxx.jpg">- 综合上级查找和子集
<img src="../img/xxx.jpg"> -
绝对路径
- 盘符查找
<img src="F:/A03-194/c01/images/c0100-000-1s@2x.png">- 网址形式
<img src="网址"> -
缺点 ①盘符出发的路径不可移植，不可移动。 ②盘符出发的路径容易出现中文字符，中文路径容易出现错误。
-
实际应用 ①建议多使用相对路径，网址形式的绝对路径 ②使用相对路径必须将图片或文件与HTML同时上传，而且需要保持相对位置不变。
width height
- 属性值：以px为单位，或者省略。
- 如果不设置属性，会以图片的原始尺寸加载。
- 如果设置属性：只设置其中一个，另一个会等比例变换；都设置，按照设置值加载。
<img src="images/xxx.jpg" width="100px"> <img src="images/xxx.jpg" width="100px" height="200" >
border
- 属性值：数值
<img src="images/xxx.jpg" border="20">- border属性可以使用css设置，有更多的设置效果。
title
- 设置鼠标悬停时的提示文本。
- 属性值：自定义提示文字内容。
<img src="images/xxx.jpg" title="点击查看原网站">
alt
- 设置的图片查找错误时，出现的替换文本。 如果能找到图片，替换文本是不显示的。
- 属性值：自定义的替换内容
<img src="images/xxx.jpg" alt="图片内容">
总结
- 最重要的属性src,尽量使用alt进行图片说明（有利于SEO搜索引擎优化）
<img src="" alt="">
音频
<audio src=""></audio>
-
双标签
-
src属性查找路径
-
音频文件支持的格式：mp3、ogg、wav
-
音频控制条属性：controls="controls"
<audio src="media/xxx.mp3" controls="controls"></audio>
视频
<video src=""></video>
-
双标签
-
src属性查找路径
-
视频文件支持的格式：mp4、ogg、webm
-
视频控制条属性：controls="controls"
<video src="media/xxx.mp3" controls="controls"></video>
超级链接
<a></a>
- anchor：锚
- 双标签
- 作用：在指定的位置添加超级链接，提供用户进行点击和跳转。
- 两种跳转：跨页面跳转、页面内跳转。
href属性
-
hypertext reference，超文本引用，链接的目标地址
-
属性值：链接目标的路径地址。
<a href="http://www.lagou.com">跳转到拉勾</a>
target属性
-
被链接的文档在何处跳转显示
-
属性值： _self：默认值，表示跳转的页面在当前窗口打开，不会打开新的窗口。 _blank：空白的，表示跳转的页面在新窗口打开。
<a href="http://www.baidu.com" target="_blank">跳转百度</a>
title属性
- 鼠标悬停时的提示文本
- 属性值：自定义的文字内容。
- 该属性用于给用户进行提示，提高用户的体验。
<a href="images.html" title="点击查看源网页"><img src="img/01.png" alt=""></a>
两种特殊的锚点跳转方法
页面内锚点跳转
-
从某个位置跳转到同页面的另一个位置
-
制作步骤：设置锚点、添加链接
-
设置锚点（跳转目标的位置） ①在目标位置找到任意一个标签，给它添加id属性，id的属性值必须是唯一的。（规则：必须以字母开头，后面可以有字母、数字、下划线和横线，区分大小写）
<h2 id="target">目标位置</h2>
②在目标位置添加一个空的a标签，设置一个name属性，属性值设置方式与id相同。
```html <a name="target"></a> ```-
添加链接 ①在需要点击的位置设置a标签，给a的href属性设置属性值为#id属性值；#加a的name属性值。
<a href="#target">点击位置</a>
-
页面内锚点跳转
- 制作步骤：设置锚点、添加链接
- 设置锚点同上
- 添加链接（href属性值需要更改）
<a href="xxx.html#target">跨页面锚点跳转</a>
列表
- 列表用于制作HTML中的一系列项目
- 将内容相关、结构相似、样式相近的内容使用列表结构进行搭建
- 根据项目的内容不同，有三种语义的列表结构：无序列表、有序列表、定义列表
无序列表
快捷键：ul>li
<ul>
<li></li>
</ul>
li*4
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
- 两个标签参与：ul和li
- ul：unordered list，无序列表的大结构
- li：list item，列表项，无序列表中的某一项
- ul和li是嵌套关系
- 一个列表中可以有任意个列标签
-
注意事项
①ul内部只能嵌套li，li标签不能脱离ul单独书写
<h2>四大名著</h2> <ul> <li>西游记</li> <li>三国演义</li> <li>水浒传</li> <li>红楼梦</li> </ul>②li标签是一个经典的容器级标签，内部可以放置任意内容甚至可以放一组ul>li无序列表
<h2>四大名著</h2> <ul> <li> <h4>西游记</h4> <ul> <li>唐僧</li> <li>孙悟空</li> <li>猪八戒</li> </ul> </li> <li>三国演义</li> <li>水浒传</li> <li>红楼梦</li> </ul>③li之间没有顺序的先后之分，重要程度相同没有区别 ④作用只是搭建列表结构，没有添加样式前缀的功能，样式由css负责
有序列表
快捷键：ol>li
<ol>
<li></li>
</ol>
li*4
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
- 两个标签参与：ol和li
- ol：ordered list，有序列表的大结构
- li：list item，列表项，无序列表中的某一项
- ol和li是嵌套关系
- 一个列表中可以有任意个列标签
-
注意事项
①ol内部只能嵌套li，li标签不能脱离ol单独书写
<h2>国土面积排行</h2> <ol> <li>俄罗斯</li> <li>加拿大</li> <li>中国</li> </ol>②li标签是一个经典的容器级标签，内部可以放置任意内容甚至可以放一组ol>li有序列表
<h2>国土面积排行</h2> <ol> <li> <h3>中国</h3> <ol> <li>新疆</li> <li>西藏</li> <li>内蒙古</li> </ol> </li> <li>俄罗斯</li> <li>加拿大</li> </ol>③li之间存在顺序先后之分，根据内容调整书写位置
④作用只是搭建列表结构，没有添加样式前缀的功能，样式由css负责
定义列表
快捷键：dl>dt+dd
<dl>
<dt></dt>
<dd></dd>
</dl>
- 自定义列表不仅仅是一列项目，而是项目及其注释的组合。
- 标签：dl、dt和dd
- dl：definition list，自定义列表的大结构
- dt：definition term，自定义列表中的一个主题或者术语
- dd：definition description，表示描述和解释前面的定义主题
- 嵌套关系：dl内部只能嵌套dt和dd，dt与dd是同级关系
<dl>
<dt>主题</dt>
<dd>解释项</dd>
</dl>
-
注意事项
①dl内部只能嵌套dt和dd，dt与dd不能脱离dl单独写
②dl内部可以嵌套多个dt、dd，dd解释前面最近的dt
<dl> <dt>张三</dt> <dd>北京</dd> <dt>李四</dt> <dd>上海</dd> </dl>③每个dt后可以有多个dd，dd解释都是前面最近的dt
<dl> <dt>张三</dt> <dd>北京</dd> <dd>年龄：22</dd> <dt>李四</dt> <dd>上海</dd> <dd>年龄：33</dd> <dd>北京大学</dd> <dt>王五</dt> </dl>④dt和dd标签是容器级标签，内部可以放置任何内容
<dl> <dt>张三</dt> <dd> <p>北京</p> <p>年龄：22</p> </dd> <dt>李四</dt> <dd> <p>上海</p> <p>年龄：33</p> <p>北京大学</p> </dd> <dt>王五</dt> </dl>⑤列表中的缩进样式由CSS负责
⑥最好每个dl中只添加一组dt和dd，便于后期管理
<dl> <dt>张三</dt> <dd> <p>北京</p> <p>年龄：22</p> </dd> </dl> <dl> <dt>李四</dt> <dd> <p>上海</p> <p>年龄：33</p> <p>北京大学</p> </dd> </dl> <dl> <dt>王五</dt> </dl>
常用布局标签
- 常用布局工具，盒子
div
- div：division，分割、区域、跨度的意思。大盒子
- 双标签，容器级标签，内部可以放置任何内容
- 作用：多用于划分网页区域，结构布局。
span
- 小区域、小跨度。小盒子
- 双标签，容器级标签
- 作用：在不改变整体效果的情况下，局部调整
表格
<table>
<tr>
<td>第一行，第一列</td>
<td>第一行，第二列</td>
</tr>
<tr>
<td>第二行，第一列</td>
<td>第二行，第二列</td>
</tr>
</table>
表格制作基础
- 表格至少有三个标签组成：table、tr、td table：表格的大结构
tr：table rows，行
td：table data，单元格
- 三者关系：table>tr>td
- table标签属性 border边框属性：属性值（数字）——border="1"
单元格之间的空隙：属性style属性值（border-collapse: collapse;）边框塌陷—— style="border-collapse: collapse;"
- 表头单元格
- th（table head data，表头单元格）
- th 默认css样式，文字加粗居中
<table>
<tr>
<th>1</th>
<th>2</th>
</tr>
<tr>
<td>第一行，第一列</td>
<td>第一行，第二列</td>
</tr>
<tr>
<td>第二行，第一列</td>
<td>第二行，第二列</td>
</tr>
</table>
合并单元格
- 通过th和td的两个属性进行合并设置。
- rowspan：跨行合并。上下的合并。
- colspan：跨列合并。左右的合并。
- 属性值：数字
- 制作技巧
- 先列出所有行的tr，以最小单元格为标准
- 再添加每一行的td或th单元格
- 顶边对齐的属于同一行
- 将所有的行和列写完后，再查看哪个单元格有跨行或者跨列，属性值的个数要参考最小的单元格
<style>
.example{
border-collapse:collapse;
}
.example td{
width: 80px;
border: 1px solid;
}
</style>
<table class="example">
<tr>
<td colspan="2">1</td>
<td rowspan="2">2</td>
<td colspan="2">3</td>
</tr>
<tr>
<td>4</td>
<td rowspan="2">5</td>
<td>6</td>
<td rowspan="2">7</td>
</tr>
<tr>
<td rowspan="2">8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td colspan="2">12</td>
<td>13</td>
</tr>
</table>
效果图：
表格分区
- 表格分为四大区域：表格标题、表格头部、表格主体、表格页脚
- 四个分区标签
- caption：表格的标题
- thead：table head，表格的头部。内部嵌套tr>th
- tbody：table body，表格的主体。内部嵌套tr>td
- tfoot：table foot，表格的页脚。内部嵌套tr>td
- 四个分区可以选择性的进行组合
- 不论书写如何颠倒，浏览器的加载顺序都是自动按照：caption、thead、tbody、tfoot执行
- 制作技巧
- 先书写大分区标签结构
- 填充每个分区的内容
- 如果有合并单元格内容，进行单元格合并
<table border="1" style="border-collapse: collapse;">
<caption>各地区资产投资</caption>
<thead>
<tr>
<th rowspan="2">1</th>
<th colspan="2">2</th>
<th colspan="2">3</th>
</tr>
<tr>
<th>2(1)</th>
<th>2(2)</th>
<th>3(3)</th>
<th>4(4)</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</tbody>
</table>
表单
收集用户输入信息。
- 表单的组成
- 表单元素就是网页中提供用户进行输入或点击的小控件
- 一个完成的表单由：表单域、提示文本和表单控件（表单元素）3个部分组成。
- 表单域：用来容纳所有的表单控件和提示信息。如果不定义表单域，表单中的数据就无法传送到后台服务器。
- 提示文本：说明性文字，提示用户进行填写和操作。
- 表单控件：具体的表单功能项，单行文本输入框、密码输入框、复选框、提交按钮、重置按钮。
表单域 form
<form action=""></form>
- form标签是一个功能性标签，填写的表单信息要想正确的提交到后台服务器，必须放在一个form标签之内。
- 双标签，容器级标签
- 属性
| 属性名 | 属性值 | 描述 |
|---|---|---|
| action | url | 指定接收并处理表单数据的服务器程序的url地址 |
| method | get/post | 用于设置表单数据的提交方式 |
| name | 自定义名称 | 表单的名称 |
<form action="data.php" method="get" name="first"></form>
input
- 最重要的表单元素
- 单标签，相当于一个特殊的文本
- 通过标签属性实现各种功能
| 属性名 | 属性值 | 描述 |
|---|---|---|
| type | text | 单行文本输入框 |
| password | 密码输入框 | |
| radio | 单选框 | |
| checkbox | 复选框 | |
| button | 普通按钮 | |
| reset | 重置按钮 | |
| submit | 提交按钮 | |
| image | 图像形式的按钮 | |
| file | 定义输入字段和“浏览”按钮，供文件上传 | |
| name | 自定义 | 定义控件的名称 |
| value | 自定义 | 定义控件的默认文本值 |
-
type属性：属性值text
<form action="data.php" method="get" name="first"> <p> 用户名：<input type="text"> </p> </form>- value属性：自定义（单行文本输入框默认文字）
<form action="data.php" method="get" name="first"> <p> 用户名：<input type="text" value="请输入用户名"> </p> </form> -
type：password（密码输入框）
- 显示的字符会被做掩码处理（显示为星号或实心圆）
<form action="data.php" method="get" name="first">
<p>
密码：<input type="password">
</p>
</form>
- type:radio（单选框）
- 点击选择
- 一般成组出现
- 同一组单项框选项必须是互斥的关系，设置同一个name属性
<form action="data.php" method="get" name="first">
<p>
性别：
<input type="radio" name="sex">男
<input type="radio" name="sex">女
</p>
</form>
- type：checkbox（复选框）
- 点击选择多选框
- 在选项中选择0~n个选项
- 同一组复选框最好也设置相同的name属性
<form action="data.php" method="get" name="first">
<p>
爱好：
<input type="checkbox" name="hobby">跑步
<input type="checkbox" name="hobby">游泳
<input type="checkbox" name="hobby">瑜伽
</p>
</form>
- 默认选中设置
- 单选框和复选框都可以设置
- checked属性：checked
<form action="data.php" method="get" name="first">
<p>
性别：<input type="radio" name="sex" checked="checked">男
<input type="radio" name="sex">女
</p>
</form>
- 按钮
| type | 名称 | 特点 |
|---|---|---|
| button | 普通按钮 | 没有特殊功能 |
| reset | 重置按钮 | 填写的表单内容清空，恢复成默认 |
| submit | 提交按钮 | 提交到服务器，并重置填写的内容 |
| image | 图片按钮 | 与提交按钮效果相同，src属性 |
<form action="data.php" method="get" name="first">
<p>提交表单</p>
<p>
按钮
<input type="button" value="普通按钮">
<input type="reset" value="重置按钮">
<input type="submit" value="提交按钮">
<input type="image" src="img/01.png">
</p>
</form>
- file 文件上传
- 上传文件到服务器
<input type="file">- multiple属性(是否可以选择上传多个文件)
<input type="file">
文本域 textarea
- 制作可以输入多行文本的区域
- 双标签，相当于一个特殊的文字
- 可以设置默认输入文字
- 属性
- rows：行（显示的最大行数）
- cols：列（出现滚动条之后，每一行显示的最大字数（一个汉字按2字节计算））
<textarea rows="5" cols="30">书写200字自我介绍</textarea>
- 单行文本可以选择input，多行文本可以选择textarea
下拉菜单
- 标签：至少需要两个标签完成
- select：选择（下拉菜单的整体结构）
- option：选项（下拉菜单的每一项）
- 双标签，文本级标签
- select>option
- 默认选中项：selected
<form action="data.php" method="get" name="first">
<select>
<option>北京</option>
<option>上海</option>
<option selected="selected">深圳</option>
<option>杭州</option>
</select>
</form>
- 分组管理
- optgroup
- 双标签
- 关系：select>optgroup>option
- 属性：label ，组名
<form action="data.php" method="get" name="first">
<select>
<optgroup label="国内">
<option>北京</option>
<option>上海</option>
<option selected="selected">深圳</option>
<option>杭州</option>
</optgroup>
<optgroup label="国外">
<option>纽约</option>
<option>巴黎</option>
<option>法国</option>
</optgroup>
</select>
</form>
label 标签
- 绑定方法一
- 给表单元素添加id属性
- 需要绑定的内容用label标签包裹
- 给label标签设置for属性，属性值为绑定的表单元素id属性值
<input type="radio" name="sex" id="man"><label for="man">男</label>
- 适用于距离比较远的
- 绑定方法二
- 绑定内容和表单元素在一起，用label标签嵌套表单元素
<label><input type="radio" name="sex">女</label>
字符实体
-
HTML ISO-8859-1 参考手册
-
字符实体和实体编号：以&开头;结束
-
区分大小写
