Collection
Collection
一、结构标签
1. <html></html>称为根标签，所有的网页标签都在<html></html>中。
2. <head> 标签用于定义文档的头部，它是所有头部元素的容器。
头部元素有：
<title></title>
<script></script>
<style></style>
<link></link>
<meta></meta>
3. 在<body>和</body>标签之间的内容是网页的主要内容。
二、文本格式化标签
1、字体
<b></b> 粗体
<big></big> 大字体
<em></em> 强调字
<i></i> 斜体
<small></small> 小字体
<strong></strong>加重语气
<br/> 换行
< pre>....< /pre> 按照代码格式进行输出
2、文本
align 定义水平对齐方式
align="center" 居中对齐内容。
align="left" 左对齐内容。
align="right" 右对齐内容。
align="justify" 对行进行伸展，这样每行都可以有相等的长度（就像在报纸和杂志中）。
style="font-family:verdana"
style 定义文档定义样式信息
style="font-family:verdana" font-family:定义字体
style="font-family:arial;color:red;font-size:20px;" color:red;定义字体，颜色，ont-size:字体大小
例：
<h1 align="center">This is heading 1</h1> <h1 style="font-family:verdana">A heading</h1> <p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
三、超连接
<a></a>
<a href="http://www.php.cn">php中文网</a> 定义一个 href=用来定义连接地址
<a href="http://www.php.cn"> <img src="图片路径"></a> 定义一个图片的超链接
target="_blank" 新建窗口打开超链接
title="提示内容" 给超链接添加提示
书签功能应用
<a href="#c1">点击按钮</a>
<a name="#c1">跳转目的地</a>
四、表格
<table> 表示表格
<tr> 行
<td></td> 列
</tr> 行结束
</table>
标签：< th>表头< /th>：设置表头
标签：< caption>标题< /caption>：设置表的标题
属性：cellpadding="..."设置单元格边距
属性：bgcolor="..."设置表格背景颜色
属性：background="..." 以某张图片作为表格背景
属性：border="1" 边框大小
<table> 定义表格
<caption> 定义表格标题。
<th> 定义表格的表头。
<tr> 定义表格的行。
<td> 定义表格单元。
<thead> 定义表格的页眉。
<tbody> 定义表格的主体。
<tfoot> 定义表格的页脚。
<col> 定义用于表格列的属性。
<colgroup> 定义表格列的组。
五、图片
1、背景图片
例子： <body background="./qwe.gif">
background 可以在body中添加背景图片
<img src="路径加文件名"> 插入图片
2、插入图片和图片属性
align 加入图片属性
例子：<img src="./julizi.png" align="left" >
bottom align的默认值 图片居于文字下方
middle 文字居于图片中间
top 图片居于文字并排右边
right，left 相对字体的左或右
3、调整图片尺寸
例子：<img src="图片路径" width="80" height="80">
width="" 宽度
height="" 高度
4、创建图像映象（选择一个点击区域）
例子：
<map name="lizi"> <area shape="rect" coords="50,10,100,60" href="http://baidu.com" target="_blank"> </map>
< map></ map> 创建映像
< area> 用来创建超连接区域
<area>属性包涵：
shape 属性值有：rect(矩形)、circle(圆形)、poly(多边形)和default(整个图像区域)。
coords coords属性对于矩形而言，coords有4个值，分别用逗号隔开，表示矩形区域左上角x坐标、左上角y坐标、右下角x坐标和右下角y坐标，这里获取坐标的方式，就用截图工具帮忙就好。
href 连接到指定的地址
六、列表
sybe 决定起始数字或者样式
<li><li> 列表内容
<ol></ol> 有序列表
<ul></ul> 无序列表
<dl></dl> 自定义列表 <dt></dt> 自定义列表标题 <dd></dd>自定义列表内容
七、表单
<form method="传送方式" action="服务器文件"></form>
1.<form> ：<form>标签是成对出现的，以<form>开始，以</form>结束。
2.action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。
3.method ： 数据传送的方式（get/post）。
get以明文的方式通过UTL提交数据，数据在url中可以看到，提交的数据最多不超过2KB,安全性低但效率要比post高，适合提交数据量不大安全性不高的数据，比如：搜索，查询功能post将用户提交的信息封装在HTML HEADER内，适合提交数据量大，安全性高的用户信息，比如：注册，修改，上传等功能
八、文本输入框，密码输入框
<form>
<input type="text/password" name="名称" value="文本" />
</form>
1、type：
当type="text"时，输入框为文本输入框; 显示具体内容
当type="password"时, 输入框为密码输入框。隐藏输入内容
2、name：为文本框命名，以备后台程序ASP 、PHP使用。
3、value：为文本输入框设置默认值。(一般起到提示作用)
九、文本域
例子：
<form method="post" action="save.php"> <label>联系我们</label> <textarea cols="50" rows="10" >在这里输入内容...</textarea> </form>
1、<textarea>标签是成对出现的，以<textarea>开始，以</textarea>结束。
2、cols ：多行输入域的列数。
3、rows ：多行输入域的行数。
4、在<textarea></textarea>标签之间可以输入默认值。
十、单选框、复选框
<input type="radio/checkbox" value="值" name="名称" checked="checked"/>
1、type:
当 type="radio" 时，控件为单选框
当 type="checkbox" 时，控件为复选框
2、value：提交数据到服务器的值（后台程序PHP使用）
3、name：为控件命名，以备后台程序 ASP、PHP 使用
4、checked：当设置 checked="checked" 时，该选项被默认选中
<form action="save.php" method="post" > <label>性别:</label> <label>男</label> <input type="radio" value="1" name="sex" /> <label>女</label> <input type="radio" value="2" name="sex" /> </br> 你的爱好是： <input type="checkbox" name="tiaowu" value="跳舞">跳舞 <input type="checkbox" name="paobu" value="跑步">跑步 <input type="checkbox" name="dianyin" value="电影">电影 </form>
注意:同一组的单选按钮，name 取值一定要一致，比如上面例子为同一个名称“sex”，这样同一组的单选按钮才可以起到单选的作用。
十一、下拉列表、提交按钮
例子：
<form action="save.php" method="post" > <label>爱好:</label> <select> <option value='看书'>看书</option> <option value='旅游' selected="selected">旅游</option> <option value='运动'>运动</option> <option value='购物'>购物</option> </select> </form>
<select> </select> 表明下拉列表
<option value="向服务器提交值">显示内容</option>
1、value=“提交值” 向服务提交值
2、selected="selected"：
设置selected="selected"属性，则该选项就被默认选中。
3、multiple="multiple" 下拉列表选择内容
例：
<select multiple="multiple"> <option value="哎呀妈呀，贼帅了！"selected>哎呀妈呀，贼帅了！</option> <option value="xxxx">xxxx</option> .... </select>
4、提交按钮
提交按钮
<input type="submit" value="提交">
type：只有当type值设置为submit时，按钮才有提交作用
value：按钮上显示的文字
重置按钮
<input type="reset" value="重置">
type：只有当type值设置为reset时，按钮才有重置作用
5、from表单中的label标签
<label for="控件id名称">
label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。
注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同
type:值
button 定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）。
checkbox 定义复选框。
file 定义输入字段和 "浏览"按钮，供文件上传。
hidden 定义隐藏的输入字段。
image 定义图像形式的提交按钮。
password 定义密码字段。该字段中的字符被掩码。
radio 定义单选按钮。
reset 定义重置按钮。重置按钮会清除表单中的所有数据。
submit 定义提交按钮。提交按钮会把表单数据发送到服务器。
text 定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
