7月26日前端学习笔记

今日内容： html常用标签   简单的css样式

---

重点：

合并单元格

        合并单元格 一般保留前面的格子

        colspan="2"；合并水平两格

        rowspan="2"；合并垂直两格

<table>
			<tr>
				<td>1-1</td>
				<td colspan="2">1-2</td>
				<!--合并单元格  一般保留前面的-->
				<!-- <td>1-3</td> -->
				<td>1-4</td>
			</tr>
			<tr>
				<td rowspan="2">2-1</td>
				<td>2-2</td>
				<td>2-3</td>
				<td>2-4</td>
			</tr>
			<tr>
				<!--<td>3-1</td>-->
				<td>3-2</td>
				<td>3-3</td>
				<td>3-4</td>
			</tr>
			<tr>
				<td>4-1</td>
				<td>4-2</td>
				<td>4-3</td>
				<td>4-4</td>
			</tr>
			
		</table>

    

合并水平2格垂直两格

<table>
			<tr>
				<td>1-1</td>
				<td>1-2</td>
				<td>1-3</td>
				<td>1-4</td>
			</tr>
			<tr>
				<td>2-1</td>
				<td>2-2</td>
				<td>2-3</td>
				<td>2-4</td>
			</tr>
			<tr>
				<td>3-1</td>
				<td>3-2</td>
				<td colspan="2" rowspan="2">3-3</td>
				<!-- <td>3-4</td> -->
			</tr>
			<tr>
				<td>4-1</td>
				<td>4-2</td>
				<!-- <td>4-3</td> -->
				<!-- <td>4-4</td> -->
			</tr>
			
		</table>

列表

        有序列表和无序列表   区别就是有无序号

        <ol>
			<li>香蕉</li>
			<li>橘子</li>
			<li>苹果</li>
		</ol>
		
		<ul>
			<li>香蕉</li>
			<li>橘子</li>
			<li>苹果</li>
		</ul>

表单

        注意：select和input标签的id属性和label的for属性一样时两者有关联关系；标签有value则提交value值，没有就是标签内的值；button要写在表单里才能起作用，submit：提交按钮、button:普通按钮、reset：重置按钮

<form action="提交表单的地址" method="提交的方式 get/post">
			<!-- 表单中的组件 -->
			<!-- name是key 输入的内容是value -->
			<input type="text" name="username" />
			
			<p></p>
			<!-- 密码框 -->
			<input type="password" name="userpass"/>
			<!-- readonly 只读 -->
			<input type="text" readonly value="202111070625" name="code"/>
			<!-- 隐藏阈 -->
			<input type="hidden" vulue="1001" name="id"/>
			
			
			<!-- 单选框 -->
			<div>
				<!-- name值一样的具有互斥性 -->
				<!-- checked 默认选择 -->
				<input checked type="radio" value="m" name="sex" id="sexman"/><label for="sexman">男</label>
				<input type="radio" value="w" name="sex" id="sexwoman"/><label for="sexwoman">女</label>
			</div>
			
			<div>
				<!-- 复选框 -->
				<input type="checkbox" name="hoppy" id="sing" value="sing"/><label for="sing">唱</label>
				<!-- disabled 不可选择 -->
				<input disabled type="checkbox" name="hoppy" id="dance" value="dance"/><label for="dance">跳</label>
				<input type="checkbox" name="hoppy" id="rap" value="rap"/><label for="rap">rap</label>
			</div>
			
			<div>
				<!-- 下拉框 -->
				<label for="province">省份</label>
				<select name="province" id="province">
					<option value="SDS">山东省</option>
					<!-- selected 默认选择 -->
					<option value="SXS" selected>山西省</option>
					<option value="YNS">云南省</option>
					<option value="AHS">安徽省</option>
					<option value="XJ">新疆自治区</option>
				</select>
			</div>
			<div>
				<!-- 文本域   多行文本框 没有value  两个标签里的内容就是它的值  不要回车 回车的内容就是value了-->
				<textarea></textarea>
			</div>
			<!-- 默认submit 写在表单上才能起作用-->
			<button type="submit">提交按钮</button>
			<button type="button">普通按钮</button>
			<button type="reset">重置按钮</button>
			<input type="button" value="普通按钮input"/>
			<input type="submit" value="提交按钮input"/>
			<input type="reset" value="重置按钮input"/>
		</form>

简单的css样式

选择器：写在head的style标签内部

/* ID选择器  id=""*/
			#boxa{
				height: 100px;
				width: 100px;
				background-color: aqua;
				/* 字体颜色 */
				color: cadetblue;
				font-size: 30px;
				text-align: center;
				/* 单行文本垂直居中 行高=容器高度*/
				line-height: 100px;
				font-weight: bold;
				
			}
			/* 标签选择器  元素选择器*/
			div{
				height: 100px;
			}
			/* 类选择器  class="bgred" */
			.bgrad{
				background-color: darkred;
				width: 1000px;
				height: 500px;
				background-image: url('image/back.webp');
				background-size: 1000px 500px;

				/* 不加载 */
				/* display: none; */
			}