前端html标签form，列表，及css总结

经过接触html发现其中很有趣，如果要想学好最好还是记住其中常用的标签

1. form 2个属性：action和method

控件1：input的属性type，name，value，required，placeholder
（1）type属性的属性值， text文本框，password密码框，submit提交按键， radio单选框，checkbox复选框，email邮箱， reset重置按钮，image图片提交，button按钮， hidden隐藏框，tel电话号码框，search搜索框，number数值框，range数值滑块，url路径，color颜色取框，data，datatime-local日期字段，file文件上传框
（2）readonly只读
（3）disabled不可操作的
控件2：select下拉框，下拉列表，option列表项，value提交后台服务器的值，optgroup列表分组，属性label给分组命名

<select name="" id="">
		<option value="-1">请选择你的出生年份</option>
        <optgroup label="90后">
		<option value="1998">1998</option>
	    <option value="1997">1999</option>
		</optgroup>
</select>

控件3： textarea文本域 都是只读 或者不可操作，常用属性cols和rows是来粗略计算文本域的宽度和高度，精确设置需要用style样式来设置

 <textarea name="" id="" style="widht:50px;height:20px">
			滚滚长江
</textarea>

控件4：datalist数据列表，和select很相似，通常和input一起使用

<form action="">
		  请选择你的专业：
		  <input type="text" id="datalist" list="list"/>
		  <datalist id="list">
			<option value="计算机科学与技术">计算机科学与技术</option>
			<option value="信息安全专业">信息安全专业</option>
			<option value="大数据专业">大数据专业</option>
		  </datalist>
</form>

2.列表（可以进行嵌套ol嵌套ul，ul嵌套表格table等等）

(1). 有序列表ol，li

   <!--ol有序列表，li-->
	      <h1>你喜欢吃什么水果？（有序列表）</h1>
	      <ol type="a">
		  <li>苹果</li>
		  <li>西瓜</li>
	</ol>

(2). 无序列表ul，li

<!--ul无序列表，li-->
		<h1>你喜欢吃什么水果？（无序列表）</h1>
		<ul>
		<!--<ul type="square">-->
			<li>苹果
				<ul>
					<li>红富士</li>
					<li>
						青苹果
						<ul>
							<li>真的</li>
							<li>假的</li>
							<li>
								<table>
									<tr>
										<td>1</td>
										<td>2</td>
									</tr>
									<tr>
										<td>1</td>
										<td>2</td>
									</tr>
								</table>
							</li>
						</ul>
					</li>
				</ul>
			</li>
			<li>西瓜</li>
		</ul>

(3). 自定义列表dl，dt，dd

 <dl>
	 <dt>
		语文
		<dd>interesting</dd>
		<dd>happiness</dd>
	  </dt>
	  <dt>
		数学
		<dd>interesting</dd>
		<dd>easy</dd>
	  </dt>
	</dl>

3.css:Cascading Style Sheet 层叠样式表，可以设置html中标签样式

html+css+js html：结构层+css：表现层（装饰）+js行为层（javascript）
css三大特征:层叠，冲突，继承

1. 行内引入：
   优点：优先级高
   缺点：使用范围小，作用于局部范围
   例如：<table align="center" cellspacing="20" cellpadding="0">

2. 内嵌引入:
   优点：可以作用于同一个页面的多个元素
   缺点：优先级不高
   格式：<style></style>

（1）id选择器：id="唯一值"   style #id值{样式}
		/*id选择器*/
		#div2{
		background-color: grey;
		}
（2）class选择器：类选择器可以有多个，.class值{样式}
       	/*class类选择器*/
		.div4{
			background-color: yellow;
		}
（3）层级选择器：">"表示直接后代    " "（空格）表示后代元素      "，"表示并列元素
		 /*层级选择器*/
		section div{
			background-color: red;
		}
（4）结构伪类选择器：以nth-child()为例
		/*nth-child选择器，2n+1->odd*/
		#table1 tr:nth-child(2n+1){
			background-color: aquamarine;
		}
		/*2n->even*/
		#table1 tr:nth-child(2n){
			background-color: pink;
		}
（5）标签选择器
        /*标签选择器*/
		div{
			background-color: red;
		}

3. 外联引入
   优点：可以作用于多个页面
   缺点：优先级低
   （1）先写出css文件：index.css
   （2）在html页面中写出：
   <link rel="stylesheet" href="index.css">(href中的是相对路径)
4. 比较：实际上，行内引入的优先级最高，其次内嵌和外联的优先顺序是根据引入顺序决定的。

总结的部分可能会有不全，有错误的话欢迎指出，大家一起学习，加油！