列表表格及表单美化

￡神魔★判官ぃ 2022-04-18 04:12 359阅读 0赞

## 列表，表格与表单 ##

## 有序列表 ##

<ol>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    </ol>
    //1.ol应用场景：当一个列表是按顺序排列的就用有序列表
    //2.ol属性：type：A（A~Z）
      // 1（按数字排序）
    //开发中最好不要用type

## 无序列表 ##

//1.<ul>标签定义无序列表，当一组列表没有按顺序进行排序的时候，用无序列表
    //2.无序列表属性：type： circle（空心圆点）
      //disc（实心圆点）
    //square（实心正方形）
    //ul、ol中只能放li标签，不能放其他标签

## 列表样式 ##

list-style-type:定义列表前符号  
list-style:none;去掉li的默认样式  
List-style-image:url(…)在列表前插入自定义的图标  
List-style-position:定义图标位置

## 自定义列表 ##

<dl>
    <dt></dt>
    <dd></dd>
    </dl>
    //dl中只能嵌套dt、dd
    //dd中的内容是对dt中的内容做一个解释说明

## 表格 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTUzOTM4_size_16_color_FFFFFF_t_70]

## table属性 ##

align=“center” 不建议使用 ，建议使用外部样式  
border=‘1’ 1px的边框  
width="…" 表格的宽度100px/100% 根据父级的宽度自适应  
tr 行  
th 标题单元格  
td 内容单元格  
单元格会根据内容去自适应宽度  
border-collapse; 规定是否合并表格边框

## 表格的合并 ##

colspan:number 横向合并单元格 **跨列**  
rowspan：number 纵向合并单元格 **跨行**  
合并完成后去掉多余的单元格  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTUzOTM4_size_16_color_FFFFFF_t_70 1]

## 表单的基本结构 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTUzOTM4_size_16_color_FFFFFF_t_70 2]

## 表单的元素 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTUzOTM4_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTUzOTM4_size_16_color_FFFFFF_t_70 4]

## 表单的作用 ##

登录、注册、采集用户信息
    		
    	表单的基本结构	
    		form 
    			action="test.html" ——提交的地址 当前页面数据提交的地址
    			method="get" ——提交方式  get/post js的时候在讲区别（安全）
    	表单的基本类型	(表单元素都是行内块元素)
    		input
    			type="text"  定义了当前input的类型
    				text单行文本框
    			value="" 默认值、存储值
    			name="username" 相当于class、id，后台会根据name名称获取当前的输入的值
    			
    		type="text" text单行文本框
    		type="password"密码框
    		type="submit"提交按钮
    		type="checkbox"多选框
    		type="radio"单选 *name名称要一致*
    		type="file"上传
    		type="image" 不常用 按钮（插入图片） src="图片地址"
    		type="reset" 不常用 按钮（清空表单数据）
    		type="button" 按钮（没有功能）
    		type="submit" 按钮（提交功能）
    	
    	input属性
    		maxlength="10" 规定了表单输入的字符长度， 当前长度是10
    			只能应用在类型是：text、password
    		checked="checked" 设置默认选中项	
    		readonly="readonly" 只读 不能写
    		disabled="disabled" 禁用
    		type="hidden" 隐藏域 存储的数据不想让用户看到
    	------------------------------------------------
    		select 下拉列表
    			<select anme="name" size="行数" >
    					size="行数" 规定下拉列表中可见选项的数目 
    								*不常用*
    			<option value="北京" >北京</option>
    			.....
    		</select>
    			<option selected="selected" value="广州">杭州</option>
    			selected="selected" 设置当前默认值
    	-----------------------------------------------------
    	textarea 文本域 /*了解不推荐使用*/
    		cols="number" 规定文本区内的可见宽度。
    		rows="number" 规定文本区内的可见行数。
    		
    		fieldset元素可将表单内的相关元素分组
    		<legend> 标签为 fieldset 元素定义标题。
    		<label> 标签为 input 元素定义标注（标记）。
    
    label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
    
    <label> 标签的 for 属性应当与相关元素的 id 属性相同

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTUzOTM4_size_16_color_FFFFFF_t_70]: /images/20220418/732a4ca8e4334fd895d999120979e0bd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTUzOTM4_size_16_color_FFFFFF_t_70 1]: /images/20220418/1dde2fe81fe848c8bf64e964014a9ab5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTUzOTM4_size_16_color_FFFFFF_t_70 2]: /images/20220418/679037559ab643ed847c772cef33885a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTUzOTM4_size_16_color_FFFFFF_t_70 3]: /images/20220418/c02d9a1f93a14496b84c0e2dad9b5731.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTUzOTM4_size_16_color_FFFFFF_t_70 4]: /images/20220418/4795359308964cb48eba348aca3ed4ff.png