一、标题字体
标签名称:h1~h6,h1到h6字体越来越小,加粗效果越来越弱
<!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>
你好
<h1>你好</h1>
<h2>你好</h2>
<h3>你好</h3>
<h4>你好</h4>
<h5>你好</h5>
<h6>你好</h6>
</body>
</html>
浏览器运行效果如下:
二、段落标签
标签名称:p,独占一行,默认有上下间距
<!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>
你好1 你好1
<p>你好2</p>
<p>你好2</p>
</body>
</html>
浏览器运行效果如下:
三、加粗和倾斜标签
1、加粗标签:b,strong
2、倾斜标签:i,em
<!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>
你好
<b>你好</b>
<strong>你好</strong>
<i>你好</i>
<em>你好</em>
</body>
</html>
浏览器运行效果如下:
四、下划线标签
标签名称:u,文本会有一个下划线
<!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>
你好
<u>你好</u>
</body>
</html>
浏览器运行效果如下:
五、常见单标签
1、hr,横线
2、br,换行
<!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>
<!-- hr的使用 -->
今天天气不错
<hr />
今天我们一起去爬山吧
<!-- br的使用 -->
<br />今天天气不错
<br />
今天我们一起去爬山吧
</body>
</html>
浏览器运行效果如下:
六、无序列表
两个双标签进行嵌套,ul嵌套li
<!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>
<ul>
<li>新闻1</li>
<li>新闻2</li>
<li>新闻3</li>
<li>新闻4</li>
<li>新闻5</li>
</ul>
</body>
</html>
浏览器运行效果如下:
七、有序列表
两个双标签进行嵌套,lo嵌套li
其中,属性type表示列表序号类型, 属性start表示序号从几开始
<!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>
<ol type="1" start="4">
<li>新闻1</li>
<li>新闻2</li>
<li>新闻3</li>
<li>新闻4</li>
<li>新闻5</li>
</ol>
</body>
</html>
浏览器运行效果如下:
八、自定义列表
标签dl嵌套dt和dd,dd默认有缩进
<!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>
<dl>
<dt>今日新闻</dt>
<dd>新闻内容</dd>
</dl>
</body>
</html>
浏览器运行效果如下:
九、超链接标签
1、标签名称:a
2、特点:有颜色,有下划线,点击会刷新
3、属性
- href 超链接跳转的地址
- title 提示文本
- target 控制窗口打开方式
- 默认值 _self 打开的窗口会覆盖原窗口
- _blank 打开新的标签页 不会覆盖原窗口
<!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>
<a href="https://www.baidu.com/" title="点击跳转百度">跳转百度首页</a>
</body>
</html>
浏览器运行效果如下:
十、图片标签
1、标签名称: img(单标签)
2、属性
- src 引入图片的地址
- alt 当图片加载失败时候的提示文本
- title 提示文本
- width/height 宽度/高度(图片会变形)
<!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>
<img
src="images/Curry.jpg"
alt="图片加载失败"
title="这是一张图片"
width="200"
height="200"
/>
</body>
</html>
浏览器运行效果如下:
十一、表格标签
1、标签名称
- 最外层 table 表格
- tr 表格中的行
- td 表格中的列 单元格
2、属性
- width/height 宽度和高度
- border 边框
- bordercolor/bgcolor 边框颜色/背景颜色
- cellspacing/cellpadding 单元格与单元格之间的间距/单元格与单元格中内容的间距
- cell 细胞、单元格
- space 空间
- padding 内边距
3、表格的水平和垂直方向的位置
- 水平方向 align:left、right、center
- table:控制整个表格在水平方向移动
- tr:控制表格中的一行文本在水平方向移动
- td:控制单个单元格内容在水平方向移动
- 垂直方向 valign:top、bottom、middle
- table:没有效果
- tr:控制表格中的一行文本在垂直方向移动
- td:控制单个单元格内容在垂直方向移动
4、行列合并
- colspan 列合并
- rowspan 行合并
十二、表单
1、表单框
标签名称: form
属性:
- action 后台地址
- name 表单框的名字
- method 方法 表示前端和后台的一种交互方式 get/post
2、表单控件
标签名称: input
属性:
- type表示类型 (很多,下面展开)
- vaule 表示在input表单控件中的提示文本
- name 表示表单控件的名字
- size 表示尺寸 在表单控件中可以表示表单控件的宽度(不建议用) 属性值是字符数
- maxlength 最大长度:用户的登陆注册
3、type类型
- text 文本输入框
- password 密码
- radio 单选按钮 有多个的时候会默认都会选择上 需要设置相同的name值就可以了
- checkbox 多选(默认选择 checked;禁止选择 disabled)
功能按钮:一定要放在form表单中才有作用
- submit 提交
- reset 重置
- button 空按钮 没有什么实际的作用 需要绑定js事件才可以
- type类型为button
- button标签
4、value属性
- 在type类型为text的时候 value是提示用户输入信息的文本 占位置 用户填写信息的时候需要手动删除
- 在type类型为password的时候 value不能使用了 可以使用html5中新增的属性placeholder
<!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="php.php">
<h2>个人信息登记表</h2>
姓名:<input type="text" placeholder="请输入您的姓名..." /> <br />
密码:<input type="password" placeholder="请输入您的密码..." /> <br />
性别:<input type="radio" name="gender" />男
<input type="radio" name="gender" />女 <br />
爱好:
<input type="checkbox" />吃饭 <input type="checkbox" />睡觉
<input type="checkbox" />唱跳rap篮球 <input type="checkbox" checked />喝酒
<br />
<input type="submit" value="点击提交表单" />
<input type="reset" value="重置输入" />
<input type="button" value="点击浏览器弹窗" onclick="alert('你好!')" />
<button onclick="alert('hello!')">点击</button>
</form>
</body>
</html>
浏览器运行效果如下: