- HTML：用于控制网页的内容
- CSS：用于控制网页的样式
- JavaScript：用于控制网页的行为
01常用的HTML标签
<!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>我的第一个网页</title>
</head>
<body>
1.注释标签
<!-- ctrl + / -->
2.标题标签
<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>
<h4>这是一个标题</h4>
<h5>这是一个标题</h5>
<h6>这是一个标题</h6>
3.段落标签
<h1>《我的作文》</h1>
<p>这是第一段</p>
<p>这是第二段</p>
<p>这是第三段</p>
<p>这是第四段</p>
4.无序列表 -> ul 列表元素 -> li
<ul>
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
<li>第四行</li>
</ul>
5.有序列表 -> ol 列表元素 -> li
<ol>
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
<li>第四行</li>
</ol>
6.超链接标签（锚点标签）
href是属性，用来进一步描述标签
<a href="http://baidu.com">跳转到百度</a>
7.图片标签
<img src="E:\mydesktop\tupian\coder.jpg" alt="图片加载失败">
8.div标签:无语义标签，用于实现网页布局，将网页划分为不同的区域。
9.span标签：和div差不多。
10.两个常用属性：id和class<br/>
<h1 id = "title1">111111</h1>
<h1 id = "title1">111111</h1>
<p class="hot">红</p>
<p class="hot">黄</p>
<p class="cool">蓝</p>
<p class="cool">绿</p>
</body>
</html>02表格容器
<!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>表格容器</title>
</head>
<body>
<!-- 表格元素的容器是table -->
<table border="1">
<!-- 表头：thead -->
<thead>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
</thead>
<!-- 表体：tbody -->
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>18</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>20</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>30</td>
</tr>
</tbody>
</table>
</body>
</html>03表格列的合并
<!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>
<!-- 表格元素的容器是table -->
<table border="1">
<td colspan="3">学生列表</td>
<tr>
<td>1</td>
<td>张三</td>
<td>18</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>20</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>30</td>
</tr>
</table>
</body>
</html>04表格行的合并
<!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>
<table border="1">
<td colspan="4">学生列表</td>
<tr>
<td rowspan="3">1班</td>
<td>1</td>
<td>张三</td>
<td>18</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>20</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>30</td>
</tr>
</table>
</body>
</html>05表单容器
<!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>表单容器</title>
</head>
<body>
<!-- 表单容器:form标签 -->
<form action="">
<!-- 表单内部常用元素 -->
<!-- lable帮助文本框获取焦点 -->
<label for="username">用户名</label>
<input id="username" placeholder="用户名">
<label for="password">密码</label>
<input id="password" placeholder="密码">
<!-- 选择 -->
<select name="" id="">
<option value="">男</option>
<option value="">女</option>
</select>
<!-- 按钮 -->
<input type="submit" value="登录">
<input type="button" value="按钮">
<!-- 单选框 -->
<label for="">男</label>
<input name="sex" type="radio">
<label for="">女</label>
<input name="sex" type="radio">
<!-- 复选框 -->
<input type="checkbox">
<input type="checkbox">
</form>
</body>
</html>06课后练习
任务需求：使用表单制作一个调查问卷效果。
<!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>问卷调查</title>
</head>
<body>
<h3>任务需求：</h3>使用表单制作一个调查问卷效果<br>
--------------------------------
<h1>问卷调查</h1>
用户名：<input type="text"><br>
密码：<input type="text"><br>
性别：
<label>男</label>
<input name='sex' type="radio">
<label>女</label>
<input name='sex' type="radio"><br>
请问您最喜欢的运动是：
<select name="" id="">
<option value="">足球</option>
<option value="">篮球</option>
<option value="">乒乓球</option>
<option value="">羽毛球</option>
</select><br>
<input type="button" value="提交">
</body>
</html>版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/122912.html
