1.什么是web
web:全球广域网(万维网),能够通过浏览器访问的网站.
2.HTML入门
Html:超文本标记语言
1.HTML标签元素组成
2.HTML标签![](https://i-blog.csdnimg.cn/blog_migrate/b122a7cb98a496a3ad8fc2cb82ceb54c.png)
3.HTML特殊字符
4.span和div容器
span: 内联标签,不带换行
div:快标签,带换行
5. 图片,音频,视频标签
src:路径:
- 1.绝对路径:磁盘路径
- 2.相对路径:当前路径,一个点 ./img/
- 上级目录:两个点../
- 属性和属性值可以缩写为属性
6.超链接
<a href="http://baidu.com">
<!--点击图片添加连接-->
<img src="media/img_1.png">
</a>
7.table表格标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table表格标签</title>
</head>
<body>
<table border="1px" cellspacing="0" align="center" width="500px" >
<thead align="center">
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>成绩</th>
</tr>
</thead>
<tbody align="center">
<tr>
<td>100</td>
<td>张三</td>
<td>男</td>
<td>80</td>
</tr>
<tr>
<td>200</td>
<td>小芳</td>
<td>女</td>
<td rowspan="2">90</td>
</tr>
<tr>
<td>300</td>
<td>李四</td>
<td>男</td>
</tr>
</tbody>
<tfoot align="center">
<tr>
<td>总成绩</td>
<td colspan="3">900</td>
</tr>
</tfoot>
</table>
</body>
</html>
8.表单元素
表单的作用:接收用户输入数据,并提交数据给服务器
<form action="01_hello.html" method="post">
用户名:<input type="text" name="username"/><br/>
密码:<input type="password" name="password"/><br/>
<input type="submit" value="登录">
</form>
9.表单练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="01_hello.html" method="post">
<table>
<tr>
<td>用户名:</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td>邮箱:</td>
<td><input type="email" name="email"></td>
</tr>
<tr>
<td>性别:</td>
<td><input type="radio" name="sex" value="1" checked>男
<input type="radio" name="sex" value="0">女</td>
</tr>
<tr>
<td>爱好:</td>
<td><input type="checkbox" name="爱好" value="yy">游泳
<input type="checkbox" name="爱好" value="sw">上网
<input type="checkbox" name="爱好" value="dy">电影
<input type="checkbox" name="爱好" value="ks">看书</td>
</tr>
<tr>
<td>学历:</td>
<td>
<select name="edu">
<option value="gz">高中</option>
<option value="dz">大专</option>
<option value="bk" selected>本科</option>
<option value="ss">硕士研究生</option>
</select>
</td>
</tr>
<tr>
<td>出生:</td>
<td>
<input type="date" name="date">
</td>
</tr>
<tr>
<td>照片:</td>
<td>
<input type="file" name="photo">
</td>
</tr>
<tr>
<td>个人简介</td>
<td>
<textarea name="grjj"></textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit">
<input type="reset">
</td>
</tr>
</table>
</form>
</body>
</html>
3.css设置样式
- css概念:控制页面的样式
- 作用:美化网页
1.css的三种引用方式
2.css选择器
1.基本选择器
3.css常用样式
4.文本样式