前端笔记 day1/5 标签回顾

块标签

可以独占一行 会自动换行

h开头标签

h1-h6 默认加粗

<h1>this is h1</h1>

p标签

用来写正文

<p>this is p</p>

div标签-盒子

块标签里最大的标签 可以作为外层标签

<div>this is div</div>

ul标签-列表标签

[无序列表]一个ul标签里可以包含多个li标签 默认每个li标签前有小黑点

<ul>
	<li>hello</li>
</ul>

ol标签-列表标签

[有序列表]一个ol标签里可以包含多个li标签 默认每个li标签前有数字

<ol>
	<li>hello</li>
</ol>

dl>dt+dd标签

图文标签

<dl>
	<dt><img src="..."></dt><!--通常用来放图片-->
	<dd>通常放文字</dd>
</dl>

行内标签

不会自动换行

span标签

可以写小注释

<span>hello</span>

b标签/strong标签

用来加粗

<b>加粗</b>
<strong>加粗</strong>

i标签/em标签

斜体

<i>斜体</i>

a标签

超链接标签

<a href="跳转地址"></a>
<a href="..."><div><img src="..."/></div></a>

img标签

图片标签 单标签
可以引用本地地址, 也可以引用线上地址
alt属性 title属性

<img src="图片地址" alt="错误代替文字" title="鼠标放置提示文字">

br标签

换行–行内标签可用 因为块标签自动换行
== 单标签==

<br/>

hr标签

水平线 用来分隔段落
单标签

<hr/>

特殊标签

表格标签

table标签

专门用来做表格

• 标题–caption标签 双标签
• 表头-- thead>tr>th标签双标签 tr是行,th是列,一般thead只有一个 表头里内容默认加粗
• 表身–tbody>tr>td
• 表尾/表脚–tfoot>tr>td 可以有也可以没有
• 合并表格–
  合并成行–cospan
  合并成列–rowspan

<table>
	<caption>统计学生情况</caption><!--标题-->
	<thead>
		<tr>
			<th>学号</th>
			<th>姓名</th>
			<th>性别</th>
			<th>年龄</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1001</td>
			<td>张三</td>
			<td>男</td>
			<td>20</td>
		</tr>
		<tr>
			<td>1002</td>
			<td>李四</td>
			<td>女</td>
			<td>19</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td cospan="4"></td><!--把这一行4个单元格打通-->
		</tr>
	</tfoot>
</table>

表单元素

input

input全是单标签

• text文本类型 输入框 可输入汉字字母数字等一切字符
• number数字类型 只能输入数字 其他类型打不上去 有一个独有的上下键 作为加一减一用
• password密码类型 用小圆点代替输入的字符 用于加密
• checkbox复选框类型 可以再点一次取消选择
• radio单选框 不能再点一次取消选择 用name属性分组
• 按钮–button普通按钮/submit提交/reset重置

<input type="text">
<input type="radio" name="location">西安
<input type="radio" name="location">南京
<input type="radio" name="location">苏州
<input type="radio" name="location">上海

form表单标签

input所有元素都可以放在form表单里

• action
• method=“get/post发送”

<form>
	<input type="text" value="可修改可选中的默认值" placeholder="不可选中的输入框提示文字">
	<!--当输入框中有value时,不会显示placeholder中的数据,只有输入框是空的时候,才会显示placeholder中的数据-->
	<input type="button" value="按钮上的字">
</form>

select下拉标签

通过option中的value值确定用户选了哪一项

<select>
	<option value="op1">选项1内容</option>
	<option value="op2">选项2内容</option>
	<option value="op3">选项3内容</option>
</select>

textarea文本空间

多行文本

<textarea rows="3" cols="20"><!--3行20列默认大小-->
</textarea>