Collection
Collection
（一）、网页的基本结构和介绍
<!DOCTYPE html>声明文档的类型为html。
<html>，html文档开始，lang可以不写，lang="en"浏览器支持则对网页内容进行中文翻译。
<head>网页头部
<title>网页标题</title>
<meta charset="utf-8">（设置网页的编码格式）
<meta name="description" content="网页内容描述">
<meta name="keywords" content="网页关键字">
（二）、常用标签的介绍
p段落标签、h1~h6标题标签
图片:<a href="链接地址"><img src="图片地址" alt="描述文本" title="图片名称"></a>
无序列表ul>li>a
有序列表ol>li，
定义列表dl>dt>dd
<table> 定义 HTML 表格.
<thead> 定义表格的表头.
<tfoot> 定义表格的底部.
tr行 th列 td列
书写顺序 table-thead-tr-th-td-tfoot
（三）、表格标签详解
1、标签介绍
cellpadding="5"（表格元素内边距），cellspacing="0"（边框合并），border="1"（边框线为1）,align="center"（内容剧中），bgcolor="#4ea2d6"（背景色），rowspan（跨列合并），colspan（跨行合并）caption：表格标题。
2、给表格居中和设置宽度
只需要设置表格第一行th的宽度就可以，后面的宽度会自动生成匹配：<th width="40">价格</th>。
3、给表格整行加颜色
<tr bgcolor="#4ea2d6">表格内容</tr>
（四）、表单标签详解
1、form标签
用于包裹表单中的元素。
2、表单结构排序
form>p>label for>input>name>id，
label中for的值用于绑定input中的id，
<label> 标签为 input 元素定义标注（标记）。
3、type类型常见有以下几个
Username（用户名）password（密码）email（邮箱）number（数字）date（日期）。
3、关于表单的几个属性
placeholder：提供输入字段预期值的提示信息
autofocus：自动获得文本输入框焦点
requider：表单中必填选项
4、下拉选择框标签
标签排序：Form >p >label for>select>name>id>size>option
select：元素可创建单选或多选菜单。
Option：定义下拉列表中的一个选项。
selected：默认选择一个选项。
5、复选框标签
checkbox（文本框类型类型）、checked默认选项
<input type="checkbox" name="" id="" value="" checked><label for="volleyball">参考</label>
6、单选框标签
Radio：单选按钮，
举例
<input type="radio" name="sex" id="male" value="male"><label for="male">男</label>
7、文本输入框标签
textarea name=text
cols行宽度，rows列宽，maxlength最长文本，placeholder提示内容。
<textarea> 标签定义多行的文本输入控件。
8、按钮标签
提交按钮<input type="submit" name="submit" value="提交">
重置按钮<input type="reset" name="reset" value="重置">
普通按钮<input type="button" name="button" value="按钮">
（五）、iframe框架
1、iframe框架编写格式
<iframe srcdoc="" name="video" width="1080" height="720" frameborder="0"></iframe>
<a href="" target="video"></a>
备注：
target和name一定要数值相同，才能绑定哦，才能在里面的框架相同。
展示出来如果排列不***，可以采用浮动（float）。
（六）、样式
1、优先级
内部>内联>外部
Style>style type>link
id选择器>class选择器>tag标签选择器
关于id选择器：唯一性
class选择器：在里面，也就是行内，比如：<div class=“”>
tag标签选择器：有很多比如：span、p、div、a、img。
实例 <!--作业1. 默写HTML文档的基本结构--> <!DOCTYPE html> <html lang="en"> <!--lang属性是提醒翻译的--> <head> <meta charset="UTF-8"> <!--charset是编码集--> <title>文档的结构</title> <!--标题--> </head> <body> <h3>还记得我和你相爱的那个春天吗?</h3><br/> <h1>关于列表的使用方法</h2> <h1>无序列表</h1> <ul> <li>html学习</li> <li>ccs学习</li> <li>js学习</li> </ul> <h1>有序列表</h1> <ol> <li>框架学习</li> <li>织梦学习</li> <li>仿站学习</li> </ol> <h3>定义列表</h3> <dl> <dt>蔬菜</dt> <dd>青菜</dd> <dd>白菜</dd> </dl> <table border="1" cellpadding="5" cellspacing="0" width="500" align="left"> <!--表格标题--> <caption>清单数据</caption> <!--表头--> <thead> <tr bgcolor="aqua"> <th>编号</th> <th>商品名称</th> <th>单价</th> <th>数量</th> <th>金额</th> </tr> </thead> <tbody> <tr align="center"> <td width="50">1</td> <td width="200">有备无患的奔驰专用急用</td> <td width="70">800</td> <td width="50">1</td> <td width="80" rowspan="2">800</td> </tr> <tr align="center"> <td>1</td> <td>有备无患的奔驰专用急用</td> <td>800</td> <td>1</td> </tr> <tr align="center"> <td>1</td> <td>有备无患的奔驰专用急用</td> <td>800</td> <td>1</td> <td>800</td> </tr> </tbody> <tfoot> <tr align="center"> <td colspan="3">总计：</td> <!--<td></td>--> <!--<td></td>--> <td>5</td> <td>1100</td> </tr> </tfoot> <h3>注册信息填写事项</h3> <from action="" method="get" name="register"> <p> <label for="username">帐号：</label> <input type="text" id="username" name="username" placeholder="不超过5个字符"autofocus> </p> <p> <label for="password">帐号：</label> <input type="password" id="password" name="password" placeholder="不超过6-15个字符"> </p> <p> <label for="email">帐号：</label> <input type="email" id="email" name="email" placeholder="ecsemali.com" required> </p> <p> <label for="age">年龄：</label> <input type="number" id="age" name="age" min="16" max="70"> </p> <p> <label for="birthday">生日：</label> <input type="date" id="birthday" name="birthday" > </p> <p> <label for="course">节目</label> <select name="course" id="course" size="1"> <!--选择支持介绍--> <option value="0">拉丁舞</option> <option value="1">名族舞</option> <option value="2">爵士舞</option> <!--设置默认选项 --> <option value="3" selected>javascript</option> <option value="4">好运来</option> <option value="5">红火</option> <option value="6">再见我的爱</option> </select> </p> <p> <label for="programe">爱好</label> <!--点击爱好获取定位到撸代码选项--> <input type="checkbox" name="hobby" value="game" id="game"> <label for="game">打电动</label> <input type="checkbox" name="hobby" value="game" id="game"> <label for="game">看书</label> <input type="checkbox" name="hobby" value="game" id="movie"> <label for="game">看电影</label> </p> <p> <label for="male">是否离职</label> <!--点击性别获取到男生选项--> <input type="radio" name="gender" value="mele"><label for="male">没有</label></br> <input type="radio" name="gender" value="female"><label for="famale">有</label></br> <!--默认值--> <input type="radio" name="gender" value="secrecy" id="secrecy" checked><label for="secrecy">保密</label></br> <p> <label for ="comment">自我介绍</label><br/> <textarea name="comment" id ="comment" cols="60" rows="6" ></textarea> </p> <p> <input type="submit" name="submit" value="提交"> <input type="reset" name="reset" value="重置"> </p> </form> </from> </table> </body> <html>
点击 "运行实例" 按钮查看在线实例
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
