I.HTML页面基础标签定义
<!-- DOCTYPE表明的是HTML版本，该代码必须写在第一行，DOCTYPE并非是HTML标签，而是文档类型的声明标签 -->
<!-- DOCTYPE属于文档类型的声明标签，通过空一格输入HTML令文档识别该标签为HTML -->
<!DOCTYPE html>
<!-- 文档的头部标签 -->
<!-- 文档头部标签一般包含引入的CSS样式文件表，或者引入外部JS文件链接使用 -->
<!-- charset是字符集的寓意，字符集是多个字符的集合，以便计算机能存储和识别各类文字，UTF-8为万国码 -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 网页标题/文档标题 -->
<!-- 切记title是包含在head内部的标题标签，用于显示网页标题或者文档标题使用 -->
<title>Document</title>
II.表格标签记录和学习
<table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="300">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
这一块的table标签内样式定义可以忽略，但是要重点关注cellpadding和cellspacing属性
1.cellpadding属性：设置了文字和单元格之间的距离
2.cellspacing属性：设置了单元格和单元格之间的距离
<tr>
<!-- thead是表格的头部区域 -->
<thead>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>今日搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
</thead>
<!-- tbody是表格的主体区域 -->
<tbody>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img
src="https://timgsa.baidu.com/timg?b833.jpg">
</td>
<td>今日搜索</td>
<td>最近七日</td>
<td><a href="https://tieba.baidu.com/p/1068461?see_lz=1&red_tag=3121524665">相关链接</a></td>
</tr>
<table align="center" border="1" cellpadding="20" cellspacing="0" width="600" height="300">
<thead>
<tr>
<th></th>
<th colspan="2"></th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
II.关于列表标签的必知事项
<!-- <ul>标签表示html页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用<li>标签定义 -->
<!-- 无序列表是没有顺序的，可以理解为列表项属于并列的 -->
<!-- <ul>标签里面只能出现<li>标签，其他绝对不允许存在 -->
<!-- <li>是一个容器，可以存放任何元素,故可以解决上面的问题 -->
<!-- 无序列表是有自己的样式属性的，但是实际使用中会使用css解决样式问题 -->
<h4>您喜欢的食物是什么？</h4>
<ul>
<li>榴莲</li>
<li>臭豆腐</li>
<li>鲱鱼罐头</li>
<li>
<p>123</p>
</li>
</ul>
1.切记，
-
标签和
- 里面只能出现
- 标签，严禁出现其他人和标签
2. - 标签在后续开发之中大有用途，其兼容性和可容纳性极其丰富，可以存放各种各样的丰富元素，后续开发经常以
- 作为容器使用
3.这两类列表标签的使用，常常搭配css样式表里面的list-style:none;(设置列表项目样式里面不使用项目符号)
4.第三种自定义列表的使用方式为-
里面包含
- 和 ，通常是一个 对应多个
- ，但是这两个标签属于并列的兄弟关系，而且定义列表的列表项没有任何项目符号
III.表单域
<form action="url地址" method="提交方式" name="表单域名称">
各种表单元素控件
</form>
1.首先注意一点，表单不同于表格
2.表单域的核心思想为实现用户信息的收集和传递
3.form表单会将其范围内的表单元素信息发送给服务器
4.form action用于指定接收并处理表单数据的服务器，其内部的填写内容为服务器的url地址
5.method为将参数传递给服务器的请求方式(post/get)
6.name则是表单域的名称，用于服务器识别相关表单域，可以理解为表单的ID
7,aciton,method,name都是写在form表单表头标签的内部，以键值对的形式进行赋值，切记需要用双引号包裹对应内容
III*I.标签
<!-- input标签用于收集用户信息，是一个单标签 -->
<!-- <input type=""> -->
<!-- 通过type里面的值不同，决定输入的表单空间以什么类型来显示 -->
<!-- name定义了表单元素的名字，这里的性别单选按钮必须拥有相同的名字，才能实现多选一 -->
<!-- value是给后台程序人员使用的，由用户自定义，效果是规定了input元素的值 -->
<!-- name和value是每个表单元素要有的属性值，主要给后台人员使用，由用户自定义 -->
<form action="xxx.php" method="get">
<!-- maxLength标签是可输入的最大上限字符,规定了输入字符的最大长度 -->
<!-- text是文本框，用户可以在里面输入任何文字 -->
用户名：<input type="text" name="username" value="请输入用户名" maxlength="6"> <br>
<!-- password是密码框，该字段中的字符被掩码 -->
密码：<input type="password" name="password"> <br>
<!-- 单选按钮和复选框可以设置checked属性，当页面打开时可以默认选中该按钮 -->
<!-- radio是单选按钮 可以实现多选一 -->
<!-- 不加name是不能实现多选一的，单选框和复选框要拥有相同的name -->
性别：男<input type="radio" name="sex" value="男"> 女<input type="radio" name="sex" value="女" checked="checked">
保密<input type="radio" name="sex" value="保密"> <br>
<!-- checkbox 复选框 可以实现多选 -->
爱好：吃饭<input type="checkbox" name="hobby" value="吃饭" checked="checked"> 打代码<input type="checkbox" name="hobby"
value="打代码"><br>
<!-- submit是提交按钮，value写的是对应名称 -->
<!-- 点击了提交按钮，可以把表单域form里面表单元素里面的值，提交给后台服务器(注意你在form标签内的属性值要填写对应的后台服务器地址和提交方式) -->
<!-- 重置按钮可以还原表单元素初始的默认状态 -->
<input type="submit" value="免费注册">
<input type="reset" value="重新填写">
<!-- 普通按钮button，用于JS框架 -->
<input type="button" value="获得短信验证码"><br>
<!-- file用于上传文件使用，属于文件域 -->
上传头像<input type="file">
</form>
1.该标签的核心作用是为了收集用户的信息，并通过后续扩展将其传递给服务器使用
2.内部的赋值决定了Input标签里面要收集的是哪种属性以及相关的属性值，input标签会根据输入的属性类型自动生成对应的功能属性
3.input标签内部的基本三大类：type,name,value，name和value默认为每个表单元素应该带有的属性值。
4.value一般用于给后台人员进行辨识的，由用户自行定义，在text类型的标签内部用于生成选框的默认显示数值（或者字符串），而在radio或者checkbox这一类选择框功能属性里面则是告知后台人员具体定义功能的对应属性名称，在button里面则是按键按钮的名称。
6.在text标签内部，可以设置maxlength="" 这个属性值来设置最大输入长度
7.radio属于单选按钮属性，checkbox属于多选按钮属性。
8.radio属性是为了实现“多选一”功能而出现的功能属性，但是！如果radio属性不加name是不能实现多选一效果的，而且多个选项的name属性值必须相同，才能实现多选一，这是统一识别为同一种选择范围的默认要求。
9.选择功能属性最好要让name统一为相同的名称
10.submit属性值的功能是直接上传数据给服务器，区别于button属性
12.button属性值为万金油型按钮，常常搭配使用
11.reset按钮为重置表单域form里面表单元素的值，还原表单元素初始的默认状态。
12.file功能属性为上传文件，属于文件域的功能
13*.标签用input元素定义标注，但是其功能并非是标注那么简单，其标签的核心功能是为了增加用户体验。
标签里面的值必须为相关表单元素的ID值，而且label标签一般写在输入的后面（其实写前面也行，看使用习惯），为其增加标注的同时，在鼠标单击lable标签内容之时，浏览器会自动将焦点转移到对应的表单元素里面。
lable标签元素可以嵌套各类内容标签，比如文本，图片标签等等
III*II.标签
<form>
籍贯：
<select>
<option>
山东
</option>
<option selected="selected">
火星
</option>
<option>
广东
</option>
<option>
北京
</option>
</select>
</form>
1.标签为form表单元素的内部标签，其内部嵌套了option标签用于定义选项栏，为定义默认选项的功能
III*III.标签
<!-- textarea用于大量书写内容的场景 -->
<!-- textare标签是用于定义多行文本的控件 -->
<form>
今日反馈:
<textarea cols="50" rows="5">我知道这个反馈留言是用text area来写的</textarea>
</form>
1.用于大量书写内容场景，内部嵌套cols和rows来定义行数和列数
161
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
