HTML基础1:https://developer.aliyun.com/article/1580117
3.2.2 select标签
下拉菜单（省、市、区选择）
<!-- select标签表示下拉菜单的容器 1.添加multiple属性，设置此下拉菜单多选（ctrl） 2.size属性，设置下拉列表中可见选项的数量 option子标签表示下拉菜单的选项 1.option标签中的标签文本用于指定选项显示的文字 2.option标签需要提供value属性，当选择此菜单式提交到后台 --> <select multiple size="3"> <option value="BeiJing">北京</option> <option value="ShangHai">上海</option> <option value="GuangZhou">广州</option> <option value="ShenZhen">深圳</option> <option value="WuHan">武汉</option> </select>
3.2.3 textarea标签
文本域、多行文本框
<!-- 多行输入框 textarea标签： 1、rows属性用于指定多行文本框显示的行数 2、cols属性用于设置多行文本输入框每行显示的字符个数（考虑浏览器兼容性） 3、输入框（文本输入框、密码输入框）是通过value属性来设置默认值的，textarea通过标签文本设置默认值 --> <textarea rows="5" cols="30">这是文本域的默认值</textarea>
3.2.4 表单标签共有属性
对于表单标签，他们有一些共有属性
id属性，不仅是表单标签共有的属性，几乎所有的HTML标签都可以有这个属性，它表示此标签在当前网页文件中的唯一表示，便于我们定位标签进行操作；在一个网页中标签的ID属性值要保持唯一性。
name属性，用于将数据提交（同步提交）到后端时，在后端接收数据。required属性，设置此输入框必须输入数据，否则不能提交。
<form> <input type="text" required="required"/> <input type="submit" /> </form>
placeholder属性，用于设置输入框空值提示信息。readonly属性，表示设置此输入框，只能显示数据，不能点击输入。disabled属性，设置输入组件禁用（输入框不能输入、按钮不能点击、下拉菜单不能选择）。
value属性，表示当前输入框的值、下拉菜单选中的选项的值。
3.2.5 form标签
form标签，在页面中没有显示效果，它用于将用户在输入视图中输入的数据提交到后台
<!-- form标签：用于提交数据的表单 作用：当点击form标签中的提交按钮时，可以将form标签中输入视图中的数据提交到action属性指定的url 注意：1.提交form表单的按钮必须是提交按钮（type=submit，type=image） 2.form表单中的输入标签需要提供name属性，否则输入标签中的值不会被提交 3.form标签的method属性，指定表单提交数据的方式（get显式提交 post隐藏提交；其他区别暂不关注） method属性默认值是get，也就是说如果不写method属性，则get方式提交 4.enctype属性，用于设置表单提交时数据的编码方式 重置按钮： 必须在form表单中使用，用于重置表单中输入框的值（让输入框的值回到默认状态 ≠ 清空） 提交按钮： 必须用在form表单中，用于提交表单 --> <form action="https://www.baidu.com" method="post" enctype=""> <input type="text" placeholder="请输入帐号" name="userName" value="123"/><br/> <input type="password" placeholder="请输入密码" name="userPwd"/><br/> <input type="reset" /><br/> <input type="submit" value="登录"/> </form>
在HTML5规范中，提交按钮也可以写在form外面,但是要通过form属性指定表单id
<form id="form1"> <input type="text" placeholder="请输入帐号" name="userName" value="123"/><br/> <input type="password" placeholder="请输入密码" name="userPwd"/><br/> <input type="reset" /><br/> </form> <!--对于同一个form，可以使用不同的提交按钮，提交到不同的URL--> <input type="submit" value="登录1" form="form1" formaction="https://www.baidu.com" formmethod="get"/><br/> <input type="submit" value="登录2" form="form1" formaction="http://www.qfedu.com" formmethod="post"/><br/>
3.3 布局标签
用于对网页中的视图组件进行排版
3.3.1 标题
h标签提供了默认的标题样式,HTML中提供了 h1~h6 用于表示6级标题
<h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6>
3.3.2 段落
p标签： HTML可以将文档分割成多个段落
hr标签： 水平分割线
br标签：换行
<hr/> <p> 枫桥夜泊<br/> 张继<br/> 月落乌啼霜满天，<br/> 江枫渔火对愁眠；<br/> 姑苏城外寒山寺，<br/> 夜半钟声到客船。<br/> </p> <p> 静夜思<br/> 李白<br/> 床前明月光，<br/> 疑是地上霜；<br/> 举头望明月，<br/> 低头思故乡。<br/> </p>
3.3.3 列表
将相关联的多行文本以列表的形式进行展示
1.有序列表
水龙头接水的步骤： <!-- ol标签表示有序列表，li子标签表示列表项 --> <!-- type属性用于指定序号的类型 1 A a I i--> <ol type="i"> <li>放置水桶</li> <li>打开水龙头</li> <li>等待放水</li> <li>关闭水龙头</li> <li>提走水桶</li> </ol>
2.无序列表
水果列表 <!-- ul标签表示无序列表，li子标签表示列表项 --> <!-- type属性用于指定图标的类型 disc实心圆 circle空心圆 square方形实心 --> <ul type="square"> <li>苹果</li> <li>菠萝</li> <li>西瓜</li> <li>火龙果</li> <li>香蕉</li> </ul>
3.自定义列表
自定义列表 <dl> <dt>分组1</dt> <dd>1-1</dd> <dd>1-2</dd> <dt>分组2</dt> <dd>2-1</dd> <dd>2-2</dd> </dl>
3.3.4 表格
在网页中显示一个表格，通过将页面的HTML元素存放在表格的不同单元格，以达到设置元素布局的效果
<!-- table标签：用于在网页中定义一个表格 ，表格是由若干行组成，行被分割成多个单元格--> <!-- 表格（table）:table中的属性设置的是整个表格的属性 border属性：设置表格的边框宽度（同时设置表格外边框，以及每个单元格的边框） cellspacing属性：设置单元格空隙 cellpadding属性：设置当前表格中单元格的内边距 width、height属性：设置当前表格的宽度、高度 align属性：设置当前表格在网页中的水平位置（left|center|right） bgcolor属性：设置表格的背景颜色 background属性：设置当前表格的背景图片 行（tr）：用在table标签里面，一对tr标签就表示表格中的一行 ，tr的属性设置影响当前行 height属性：设置当前行的高度，如果不设置行高，则平均分配 bgcolor属性：设置当前行的背景颜色 单元格（td）：写在tr标签，一对td标签就表示当前行中的一个单元格 ,每一行的对应列都会自动对齐 width属性：设置当前单元格的宽度，设置某一行的单元格宽度，其他行对应单元格宽度同步修改 bgcolor属性：设置当前单元格的背景颜色 valign属性：设置当前单元格中的内容在当前单元格中的垂直位置（middle、top、bottom） align属性：设置当前单元格中的内容在当前单元格中的水平位置（left、center、right） colspan属性：横向合并单元格（设置当前单元格占用几个单元格的宽度） rowspan属性：纵向合并单元格（设置当前单元格占用几行的高度） --> <table border="1" cellspacing="0" cellpadding="0" width="300" height="300" align="center" bgcolor="orange"> <tr height="50" bgcolor="aqua"> <td colspan="2">1-1</td> <td width="50" rowspan="2">1-3</td> </tr> <tr> <td width="50" rowspan="2">2-1</td> <td valign="bottom" align="right">2-2</td> </tr> <tr height="50"> <td colspan="2">3-2</td> </tr> </table>
3.3.5 div层
区块元素（标签），在浏览器中进行显示的时候，通常会有换行 （例如：段落p、表格table…）
内联元素（标签），在浏览器中进行显示的时候，不会进行换行（例如：label img）
<!-- div标签：层，一个HTML标签的容器 1.如果不设置宽度，则默认宽度为父容器的宽度（如下：body就是div的父容器） 2.如果不设置高度，则DIV的高度默认与其中存放的元素高度相同 3.div中可以包含HTML标签，我通过对DIV标签的设置可以实现HTML标签的层叠 --> <!-- <img src="imgs/img01.png" height="100"/> <img src="imgs/img02.png" height="100"/> <img src="imgs/img03.png" height="100"/> --> <div style=" width: 83px; height: 100px; border: 1px solid red; position: absolute; left: 0px; top:0px"> <img src="imgs/img01.png" height="100"/> </div> <div style=" width: 83px; height: 100px; border: 1px solid green; position: absolute; left: 50px; top:50px"> <img src="imgs/img02.png" height="100"/> </div> <div style=" width: 83px; height: 100px; border: 1px solid blue; position: absolute;left: 100px; top: 100px;"> <img src="imgs/img03.png" height="100"/> </div>
3.3.6 fieldset字段集
<!-- fieldset标签：网页中的模块，也是一个容器，默认带有边框,有内边距 --> <!-- legend子标签：用于设置当前模块区域的标题 --> <fieldset style="width: 300px; height: 100px;"> <legend>🏀管理员登录</legend> <p>帐号：<input type="text"/></p> <p>密码：<input type="password"/></p> </fieldset>
3.4 功能标签
功能标签，在网页中没有对应的视图效果，但是可以实现特定的功能
- form表单，用于提交用户输入数据的
- a超链接
3.4.1 form表单
参考3.2.5
3.4.2 a 标签
超链接 激活文本可点击，当点击这个特定的文本之后，链接到对应的地址
<!-- a标签（超链接）：激活文本/图片连接 href 属性指定当前文本/图片链接的地址--> 学Java开发就来<a href="http://www.qfedu.com">千锋教育</a> <br/> <a href="https://www.baidu.com/s?wd=张韶涵"><img src="imgs/img01.png" height="50"/></a>
锚点 用于当前页面不同位置的跳转
<hr/> <a href="#aaa">div1</a><!-- 跳转到锚点 --> <a href="#bbb">div2</a> <a href="#ccc">div3</a> <a href="#ddd">div4</a> <hr/> <a id="aaa"></a><!-- 定义锚点 --> <div style="height: 1000px; background-color: aquamarine;">div1</div> <a id="bbb"></a><!-- 定义锚点 --> <div style="height: 1000px; background-color: lawngreen;">div2</div> <a id="ccc"></a><!-- 定义锚点 --> <div style="height: 1000px; background-color: palevioletred;">div3</div> <a id="ddd"></a><!-- 定义锚点 --> <div style="height: 1000px; background-color: peru;">div4</div>
3.5 框架标签-iframe
框架标签，实现页面的模块化
- frameset frame 不建议使用
- iframe
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <table width="100%" height="880" cellpadding="0" cellspacing="0" > <tr height="80" bgcolor="lightblue"> <td align="center"> <label style="font-size: 40px;">QQMail</label> </td> <td align="right" valign="top"> 二狗，欢迎你！[<a href="#">退出</a>] </td> </tr> <tr> <td width="200" bgcolor="lightgray" valign="top"> <ul> <li><a href="page02-表单标签.html" target="mainFrame">新邮件</a></li> <li><a href="https://www.taobao.com" target="mainFrame">淘宝</a></li> <li><a href="http://www.qfedu.com" target="mainFrame">千锋</a></li> </ul> </td> <td> <!-- iframe标签，表示一个页面的容器,通过name属性可以设置点击超链接以后，将页面显示到当前容器 1.给iframe标签设置name属性 2.给超链接a标签设置target等于iframe的name属性值 --> <iframe name="mainFrame" width="100%" height="800" frameborder="0"></iframe> </td> </tr> </table> </body> </html>
3.6 其他标签
3.6.1 文本修饰
<b>粗体</b> <i>斜体</i> <u>下划线</u> <del>删除线</del> <strong>加重语气</strong> <em>强调</em> <small>小号文本</small> 10<sup>上标</sup> 4<sub>下标</sub>
3.6.2 计算机输出相关
<!-- 计算机输出标签，除了字体有所改变之外，更多的是语义上的设定 --> <code>System.out.println("计算机代码!");</code> <kbd>Ctrl+L</kbd> <var>程序变量</var> <pre>预定义</pre>
3.6.3 引用标签
<address>湖北省武汉市江夏区</address> 跟着涛哥一起学习<abbr title="Java DataBase Conectivity">JDBC</abbr>技术 <bdo dir="rtl">定义文字方向</bdo> 毛泽东同志说：<blockquote>生的伟大，死的光荣！</blockquote>
四、HTML页面设计案例
案例：使用HTML标签，完成华为商城的登录页面的设计
4.1 模仿页面分析
4.2 按照分析进行网页设计
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>华为商城欢迎您</title> </head> <body> <table border="0" cellspacing="0" cellpadding="0" width="100%" height="960"> <tr height="40" bgcolor="#eeeeee"> <td width="355"</td> <td> <img src="imgs/logo.jpg" height="30"/>|千锋商城 </td> <td></td> <td width="355"></td> </tr> <tr height="150"> <td></td> <td colspan="2" align="center"> <label style="font-size: 30px;">华为帐号登录</label> </td> <td></td> </tr> <tr> <td></td> <td align="center" width="30%"> <img src="imgs/qrcode.png" width="200" height="200" /> <br/> <br/> <br/> <label style="font-size: 10px; color: lightgray;">若您使用华为手机，请进入“设置”>“华为帐号”扫码登录。</label> </td> <td width="30%"> <table height="320" width="400"> <tr> <td align="center"><input type="text" placeholder="手机号/邮箱地址/账号名"/></td> </tr> <tr> <td align="center"> <input type="password" placeholder="密码"/> <br/> <a href="#">短信验证码登录</a> </td> </tr> <tr> <td align="center"><input type="submit" value="登录"/></td> </tr> <tr> <td align="center"> <a href="#">注册</a> <a href="#">忘记密码</a> <a href="#">遇到问题</a> </td> </tr> <tr> <td align="center"> <img src="imgs/qq.png" /> <img src="imgs/zfb.png" /> <img src="imgs/wx.png" /> </td> </tr> </table> </td> <td></td> </tr> <tr height="150"> <td></td> <td></td> <td></td> <td></td> </tr> <tr height="100" bgcolor="#eeeeee"> <td></td> <td colspan="2" align="center" valign="middle"> <a href="#">华为帐号用户协议</a> | <a href="#">关于华为帐号与隐私的声明</a> | <a href="#">常见问题</a> | <a href="#">Cookies</a> <br/> 华为帐号 版权所有 © 2011-2021 </td> <td></td> </tr> </table> </body> </html>
</body>
```
| 案例运行效果图 |
