一. HTML-列表元素
列表元素
-
有序列表：ol、li
- ol（ordered list）有序列表，直接子元素只能是li
- li（list item）列表中的每一项
-
无序列表：ul、li
- ul（unordered list）无序列表，直接子元素只能是li
- li（list item）列表中的每一项
li一定要是ul或者ol的直接子元素
-
定义列表：dl、dt、dd
- dl（definition list）定义列表，直接子元素只能是dt、dd
- dt（definition term）列表中每一项的项目名
- dd（definition description）列表中每一项的具体描述，是对 dt 的描述、解释、补充
dt和dd是兄弟元素
- 一个dt后面一般紧跟着1个或者多个dd
- dt、dd常见的组合
事物的名称、事物的描述
问题、答案
类别名、归属于这类的各种事物
元素CSS属性
列表相关的常见CSS属性有4个：list-style-type、list-style-image、list-style-position、list-style，它们都可以继承，所以设置给ol、ul元素，默认也会应用到li元素
- list-style-type：设置li元素前面标记的样式（很少用到）
- disc：实心圆、circle：空心圆、square：实心方块
- none：什么也没有（用得最多）
- list-style-image：设置某张图片为li元素前面的标记，会覆盖list-style-type的设置（很少用到）
- list-style-position：设置li元素前面标记的位置，可以取outside、inside2个值
- 前面标记的样式是算在内容内还是内容外
- list-style: none（用得最多）缩写属性
二. HTML-表格元素
table常见的元素
- table
- 属性（很少用到）
- tr 表格中的行 -> table row
- 属性
- td 行中的单元格 -> table description
- 属性
单元格边框的合并：细线表格（很常用）
- 合并单元格的边框
table{ border-collapse: collapse } - 表格居中：margin auto
其他元素（很少用到）
- caption
- tbody
- thead
- th
- tfoot
单元格的合并
- 合并要领
- 合并方向是向右、向下
- 删掉被覆盖掉的td元素
- colspan
- rowspan
border-spacing
- border-spacing用于设置单元格之间的水平、垂直间距，比如
table {border-spacing: 10px 20px }- 2个值分别是cell之间的水平、垂直间距
如果只设置1个值，同时代表水平、垂直间距
三. HTML-表单元素
form表单常用元素
- form表单 一般情况下，其他表单相关元素都是它的后代元素
- input 单行文本输入框、单选框、复选框、按钮等元素
- textarea 多行文本框
- select、option 下拉选择框
- button 按钮
- label 表单元素的标题
- fieldset 表单元素组
- legend fieldset的标题
input的常用属性
input是一个行内替换元素（和img一样），基本上所有替换元素都是行内元素
input是一个单标签
input的type属性：
-
1 单行文本输入框
- text：文本输入框（明文输入）
- password：文本输入框（密文输入）
-
2 单选复选框
- radio：单选框
男<input type="radio" name="sex" value="1" title="男" checked> 女<input type="radio" name="sex" value="2" title="女"> <!-- 具有相同name值的radio input会实现互斥效果 -->- checkbox：复选框
-
3 button 按钮 重置 提交
-
- 普通按钮（type=button）：使用value属性设置按钮文字
按钮的两种实现方法：
-
用
<button>标签（比较少用） -
用
<input>标签，type为button（常用）<input type="button" value="获取验证码" tabindex="-1">
-
- 重置按钮（type=reset）：重置它所属form的所有表单元素（包括input、textarea、select）
<form> <fieldset> <legend>必填信息</legend> </fieldset> <fieldset> <legend>选填信息</legend> </fieldset> <div> <input type="reset" value="重置" tabindex="-1"> <input type="submit" value="注册" tabindex="-1"> </div> </form>- 前提1：type必须是reset类型 （value值可以不写，默认是“重置”）
- 前提2：所有的内容都必须在同一个表单中
<form>
-
- 提交按钮（type=submit）：提交它所属form的表单数据给服务器（包括input、textarea、select）
-
-
4 file：文件上传
input的其他属性
- 注意：【当属性名和值相等的时候可以只写属性名】，例：
<input type="text" readonly="readonly">，可以简写为：<input type="text" readonly>
- maxlength：允许输入的最大字数
- placeholder：占位文字
<input id="pwd" type="password" name="pwd" placeholder="请输入密码">
- readonly：只读（很少用到）
- disabled：禁用
- 例如禁用获取验证码
<input type="button" value="获取验证码" disabled>
- checked：默认被选中
- 只有当type为radio或checkbox时可用
男<input type="radio" name="sex" value="1" title="男" checked tabindex="-1">
- autofocus：当页面加载时，自动聚焦
- 通常给第一个输入框添加autofocus
- name：名字
- 在提交数据给服务器时，可用于区分数据类型（作为key）
- 单选框互斥必须设置name
- value：取值
- button不设置name，不会上传value
- form：设置所属的form元素（填写form元素的id）（很少用到）
- 一旦使用了此属性，input元素即使不写在form元素内部，它的数据也能够提交给服务器
textarea 多行文本输入框
- textarea的常用属性
- cols：列数
- rows：（显示的）行数
- 缩放的CSS设置
- 禁止缩放：resize: none;
- 水平缩放：resize: horizontal;
- 垂直缩放：resize: vertical;
- 水平垂直缩放：resize: both;
select、option 下拉选择框
- option是select的子元素，一个option代表一个选项
<select name="edu" title="学历">
<option value="1">小学</option>
<option value="2">初中</option>
<option value="3" selected>高中</option>
</select>
- select常用属性
- multiple：可以多选
- size：显示多少项
- option常用属性
- selected：默认被选中
- value：上传到服务器的键
fieldset和legend 域方框和域标题
- fieldset：表单元素组（一个专门的div，把表单包裹起来）
- legend：fieldset的标题
四. 补充要点
布尔属性（boolean attributes）
布尔属性可以没有属性值，写上属性名就代表使用这个属性
常见的布尔属性有disabled、checked、readonly、multiple、autofocus、selected
如果要给布尔属性设值，值就是属性名本身
按钮的两种标签的实现
-
用input元素实现：
-
普通按钮（type=button）：使用value属性设置按钮文字
-
重置按钮（type=reset）：重置它所属form的所有表单元素（包括input、textarea、select）
-
提交按钮（type=submit）：提交它所属form的表单数据给服务器（包括input、textarea、select）
-
-
button元素：使用button元素也能实现按钮，功能效果跟input一样
- button默认的type是submit
input和label
label元素一般跟input配合使用，用来表示input的标题
labe可以跟某个input绑定，点击label就可以激活对应的input
input的外边框outline
通常会设置为none，然后自定义border
input :focus { 1px solid blue }
五. 表单提交：form常用属性
- 传统的表单提交
- 1 将所有的input包裹到一个form中，要上传的input需要有name和value
- 2 form设置action
- input/button类型是submit
- action：用于提交表单数据的请求URL
- method：请求方法（get和post），默认是get
- target：在什么地方打开URL（参考a元素的target）
- enctype：规定了在向服务器发送表单数据之前如何对数据进行编码，取值有3种：
- application/x-www-form-urlencoded：默认的编码方式
- multipart/form-data：文件上传时必须为这个值，并且method必须是post
- text/plain：普通文本传输
- accept-charset：规定表单提交时使用的字符编码
get和post
提交表单数据时，浏览器发送的是http请求，有2种请求方法可以选择
-
get
- 在请求URL后面以?的形式跟上发给服务器的参数，多个参数之间用&隔开，比如
http://ww.test.com/login?phone=123&password=234&sex=1 - 由于浏览器和服务器对URL长度有限制，因此在URL后面附带的参数是有限制的，通常不能超过1KB
- 在请求URL后面以?的形式跟上发给服务器的参数，多个参数之间用&隔开，比如
-
post
- 发给服务器的参数全部放在请求体中
- 理论上，post传递的数据量没有限制（具体还得看服务器的处理能力）
网友评论