coderwhy–前端知识整合包–html/css04
1、列表元素（HTML）
有序列表：ol、li(块级元素两个块、一个数字一个内容)
无序列表：ul、li
定义列表：dl、dt、dd
dl定义列表直接子元素dt和dd、
dt：列表中每一项项目名、一个dt一般紧跟着多个dd
dd：列表中每一项具体描述对dt描述的补充
dt与dd常见组合：事务名称、描述，问题答案、类别名归属于这类的各种食物
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hjnq9gA3-1600922574133)(C:\Users\Prince\AppData\Roaming\Typora\typora-user-images\image-20200711153336748.png)]
列表相关属性
list-style-type：设置li前面标记的样式
disc、circle、square(ul跟ol就差一个属性值不一样 list-style-type：decimal)
一般设置为none，需要什么就自己调试（别忘了内边距padding设置为0，取消掉前面的符号数字点什么的）
ul{
list-style-type：decimal
}
<body>
<ul>
<li>456</li>
<li>4444</li>
<li>2222</li>
</ul>
</body>
list-style-image
设置图片一般不用这个
list-style-position
list-style:缩写属性（image、position、type）
一般直接设置none
list-style-image和list-style-type一班只存在一个
以上属性都会被继承所以设置给ol、ul也会被继承到li
2、表格Table元素（HTML）
基本元素
table表格、tr（table row）表格中的行、td行中单元格
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
属性（实际开发不常用，直接css）
border：边框宽度
cellpadding：单元格内部间距
cellspacing：单元格之间间距
width：表格宽度
align:表格水平对齐方式
表格tr与td属性设置
-
水平位置设置algin，竖直位置设置valign。放在tr就是设置整行td，放在td就单独设置td（整列会被变化如果设置width）
-
边框合并(细线表格)
<!--使用css的border-collapse属性--> table{ border-collapse: collapse; <!--我这里图省事直接在table使用border了--> } <table boder="1"> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>1</td> <td>2</td> </tr> </table> -
table居中显示
<!--使用css的border-collapse属性--> table{ border-collapse: collapse; margin ：0 auto; } table tr：nth-child（1）{ font-weight：100； } table tr:nth-child(2n){ background-color:blue; } <table boder="1"> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>1</td> <td>2</td> </tr> </table>
其他元素
tbody：表格内容主题一般不加的话浏览器会默认加载
<table boder="1">
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</tbody>
</table>
caption：表格标题
<table boder="1">
< caption> 44444444</caption>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</tbody>
</table>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cdPIGbft-1600922574138)(C:\Users\Prince\AppData\Roaming\Typora\typora-user-images\image-20200711164759653.png)]
thead:表头(第一行)，一般用th替代td(th默认加粗)
<table boder="1">
<caption> 44444444</caption>
<thead>
<tr>
<th>1</th>
<th>2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</tbody>
</table>
th表头元素，默认加粗
单元格合并（一般合并就是从左上角开始合并）
colspan：跨列合并、
rowspan：跨行合并、
<table>
<tr>
<td colspan="3">1</td>
</tr>
<tr>
<td rowspan="2">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<!-- <td>3</td> -->
</tr>
<tr>
<td rowspan="2">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<!-- <td>3</td> -->
</tr>
</table>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l8UlLheg-1600922574141)(C:\Users\Prince\AppData\Roaming\Typora\typora-user-images\image-20200711170620129.png)]
border-spacing:单元格之间属性：先左右后竖直
3、表单form元素（HTML）
form
一般情况下其他表单相关元素都算他后代元素
input元素
type属性：
- text文本类型
- password密码类型
- radio单选框
- checkbox复选框
- button按钮
- reset重置 必须放到一个form标签里才能生效
- submit提交表单数据到服务器
- file文件上传
**maxlength属性：**允许输入最大字数
placeholder：占位文字 <input type="text"placeholder=“请输入你的手机号”/>
**checked属性：**默认选中<input type="checkbox"name=“sss” checked/>
name属性：在提交数据给服务器，孔用于区分数据类型
value属性：
target属性：在什么地方打开url
**accept-charset属性:**规定表单提交的使用的字符编码
enctyped属性：规定在向服务器发送表单数据之前如何对数据进行编码
application/x-www-form-urlencoded：默认编码
multipart/form-data:文件上传type为file的专用
有些属性就是属性名本身就行
textarea元素多行文本输入框
禁止缩放属性resize:none;(如果不设置此属性，输入框是可以被用户自己缩放的)
resize:horizontal;水平缩放
resize:vertical；垂直缩放
resize:both;水平垂直缩放
textarea{
resize:none;
}
<div>
<span>introduce</span>
<textarea cols="20" rows="5" ></textarea>
<!--最多显示五行，每行最多20字符-->
</div>
select、option元素下拉选项框
boolean属性：multiple(直接显示全部下拉框属性) 与之匹配的属性size最多显示下拉框属性的个数
<div>
<span></span>
<select name="" id="" multiple size=“2”>
<option value="0">xiaouxe</option>
<option value="1">xiao</option>
<option value="2">444444</option>
</select>
</div>
label表单元素标题
fieldset表单元素组、legend( fieldset的标题)
<fieldset>
<legend>aaa</legend>
<div>
<span>手机：</span>
<input type="text">
</div>
<div>
<span>密码：</span>
<input type="password">
</div>
<div>
<span>验证码：</span>
<input type="text">
<input type="button" value="获取验证码"/>
</div>
</fieldset>
按钮实现方式（input和button）
button默认type为submit
<form action="https://www.baidu.com/s?">
<input type="text"
placeholder=""
name="search">
<input type="submit" value="百度一下">
</form>
input和label、及去除外边框
<div>
<label for="01">密码：</label>
<input type="text" id="01">
</div>
<!--实现点击 密码的文本 焦点聚焦到input上 id要与for名字一致（点击文字就能在input里输入）-->
<div>
<span>性别：</span>
<label for="01">男：</label>
<input type="radio" id="01" name="sex">
<label for="02">女：</label>
<input type="radio" id="02" name="sex">
</div>
<!--其他情况使用方法类似-->
input {
outline:none;
}
<!--取消浏览器外边框tab选中效果-->
input:focus{
border-color:#4791
}
<form action="https://www.baidu.com/s?">
<input type="text"
placeholder=""
name="search">
<input type="submit" value="百度一下">
</form>
4、form表单提交
传统表单提交
将所有input包裹到一个form中form设置action（服务器地址），在submit类型前提下，自动将所有数据提交到服务器。
弊端
- 会进行页面跳转意味着服务器必须提前将一个页面写好，并且将写好的页面返回给前端，前端直接展示这个页面**,属于服务器渲染**
- 不方便进行表单数据验证
前后端分离
- 通过javascript获取所有表单内容
- 通过正则表达式对表单进行验证
- 发送ajax请求将数据传递给服务器
- 验证成功后服务器会返回结果需要前端解析这个数据并且决定显示什么
5、元素类型分类
根据元素显示类型分类
（1）块级元素
独占父元素一行：p\pre\h1-6\ul\ol\li\dl\dt\dd\table\form\article、fotter、header、hgroup、main、nav、section、blockquote、hr
（2）行内级元素
多个行内级元素可以再父元素中显示：
a、img、span、strong、code、iframe、label、input、button、canvas、embed、object、audio
根据元素内容（是否浏览器会替换掉元素）类型分类
（1）替换元素
元素本身没有内容，浏览器根据元素类型和属性来决定显示内容
img、inout、iframe、video、embed、canvas、audio、object
（2）不可替换元素
和替换元素相反元素本身有实际内容浏览器会将其内容显示出来而不需要判断元素类型需要替换显示什么内容
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8LZ7aGra-1600922574145)(C:\Users\Prince\AppData\Roaming\Typora\typora-user-images\image-20200716101631707.png)]
附录
基本所有替换元素都算行内元素，所以替换元素也叫行内替换元素
因为是行内元素，所以会排在一行（在没有设置前提下）
布尔属性
常见boolean属性：disabled、checked、readonly、multiple（select元素）、autofocus、selected（select元素下的option元素表示选中）
、input、button、canvas、embed、object、audio
根据元素内容（是否浏览器会替换掉元素）类型分类
（1）替换元素
元素本身没有内容，浏览器根据元素类型和属性来决定显示内容
img、inout、iframe、video、embed、canvas、audio、object
（2）不可替换元素
和替换元素相反元素本身有实际内容浏览器会将其内容显示出来而不需要判断元素类型需要替换显示什么内容
[外链图片转存中…(img-8LZ7aGra-1600922574145)]
附录
基本所有替换元素都算行内元素，所以替换元素也叫行内替换元素
因为是行内元素，所以会排在一行（在没有设置前提下）
布尔属性
常见boolean属性：disabled、checked、readonly、multiple（select元素）、autofocus、selected（select元素下的option元素表示选中）
扫一扫
9万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
