1. 文本格式化标签
语义 | 标签 |
---|---|
加粗 | strong 或 b |
倾斜 | em 或 i |
删除线 | del 或 s |
下划线 | ins 或 u |
2. div与span的区别
- 相同点:都是盒子,都是用来放内容的。
- div用来布局,一行只能放一个div,是大盒子。
- span用来布局,一行可以放多个,是小盒子。
代码举例:
<body>
<div>这是一个div</div>123
<span>span1</span><span>span2</span>
<div>div2</div>
</body>
3. img标签的alt和title属性的区别
- alt 替换文本,图像显示不出来的时候用问题替换;
- title 提示文本,鼠标放到图片上的时候提示文字;
4. 相对路径
相对路径分类 | 符号 |
---|---|
同一级路径 | |
下一级路径 | / |
上一级路径 | …/ |
5.a标签的href和target属性
属性 | 作用 |
---|---|
href | 用于指定链接目标的url地址,(必须属性),当为标签应用href属性时,它就具有了超链接的功能 |
target | 用于指定链接页面的打开方式,self_为默认值,_blank为在新窗口中打开 |
6. html中的特殊字符
主要记住空格、大于号、小于号就行。
7. 合并单元格
- 先确定跨行还是跨列;
- 找到目标单元格,写上合并方式=合并单元格数量。
- 删除多余的单元格。
代码举例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
td {
width: 100px;
height: 50px;
border: solid 1px #000;
}
</style>
</head>
<body>
<table>
<tr>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td rowspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
结果:
8.自定义列表
9.表单标签
9.1 表单的组成
- 表单域
- 表单控件(也称为表单元素)
- 提示信息
9.2 表单域
用form标签定义表单域
常用属性如下:
属性 | 属性值及其作用 |
---|---|
action | url地址,用于指定接收并处理表单数据的服务器程序的url地址。 |
method | get/post,设置表单数据的提交方式 |
name | 名称,指定表单的名称,以区分同一个页面中的多个表单域 |
9.3 input表单元素的type属性值
9.4 input表单元素的其他属性
9.5 label标签
- 为input元素定义标注(标签);
- 用于绑定一个表单元素,当点击label标签内的文本时,浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上。
例如:点击“男”的文本字样,会自动选中男前面的单选框。
综合表单元素,代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<form action="#">
用户名:<input type="text" value="请输入用户名" /><br />
密码:<input type="password" /><br />
性别:<label for="nan">男</label
><input type="radio" id="nan" name="sex" /><label for="nv">女</label
><input type="radio" id="nv" name="sex" /><br>
爱好:吃饭<input type="checkbox" name="hobby"></input>睡觉<input type="checkbox" name="hobby"></input>打豆豆<input type="checkbox" name="hobby" checked="checked"></input><br>
<input type="submit" value="免费注册"><input type="reset" value="重新填写"><input type="button" value="获取短信验证码"><br>
上传头像:<input type="file" value="选择文件">
</form>
</body>
</html>
结果: