1.基础标签使用
<html> -- 整个网页
<head> -- 网页头部
<title> -- 网页标题
<body> -- 网页主体
<h1> ~ <h6> -- 1 ~ 6 级标题
<br> -- 回车
<hr> -- 水平线
2.文本格式化标签
3.图像标签
<img src = "./img.jpg" alt = "替换文本" title = "提示文本" width=,hight>
-- src填写的是图片连接
-- alt是图片未加载出来之前显示的内容
-- title是鼠标悬停的显示内容
· 属性名 = "属性值"
· 属性写在尖括号里面,标签名后面,标签名和属性名之间用空格隔开,不区分先后
4.多媒体标签--音频和视频
音频标签audio
<audio src = "文件路径"> </audio> -- 但不会自动播放
可<audio src = "文件路径" controls = "文件路径"> </audio> -- 可直接写controls
加loop是循环播放
加autoplay即可自动播放,但是浏览器一般禁用自动播放,加了也没用
视频标签video
<video src = "文件地址" controls loop muted autoplay></vedio>
5.列表
·ul是无序列表
前面自动加·
其中包括的是li,不能有其他标签,但刻在li标签之内
·ol是有序列表
前面自动加编号1、2、3
其中包括的是li,不能有其他标签,但刻在li标签之内
·dl是定义列表
其中包括dt和dd
dt是列表标题
dd包裹的是相亲,一般包裹超链接用a标签
<ul> <!-- 无序列表 -->
<li>列表条目1</li>
<li>列表条目2</li>
<li>列表条目3</li>
</ul>
<ol> <!-- 有序列表 -->
<li>列表条目1</li>
<li>列表条目2</li>
</ol>
<dl> <!-- 定义列表 -->
<dt>服务中心</dt> <!-- 列表标题 -->
<dd>申请售后</dd> <!-- 详情 -->
<dd><a href="#">售后政策</a></dd> <!-- 详情 -->
</dl>
6.单元格
·单元格信息放在table中
有border属性
如<table border="1"> 双引号内部用数字,代表边框宽度
表格结果标签如下
<table border="3">
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>总分</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>99</td>
<td rowspan="2">100</td>
<td>199</td>
</tr>
<tr>
<td>李四</td>
<td>98</td>
<!-- <td>100</td> -->
<td>198</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td colspan="3">全市第一</td>
<!-- <td>全市第一</td>
<td>全市第一</td> -->
</tr>
</tfoot>
</table>
合并单元格的步骤
1.明确合并的目标
2.保留最左上的单元格,添加属性(取值是数组,表示需要合并的单元格数量)
- 跨行合并,保留最上单元格,添加属性rowspan = "数字"
- 跨列合并,保留最左单元格,添加属性colspan = "数字"
3.删除其他单元格
如上面代码中的这一部分
<td rowspan="2">100</td>
<td colspan="3">全市第一</td>
效果图如下:
7.表单 -- input标签
文本框:<input type="text" placeholder="请输入用户名">
<br><br>
密码框:<input type="password" placeholder="请输入密码">
-- placeholder是没有输入的情况下输入框中显示的内容
<input type="radio" name = "性别">男
<input type="radio" name = "性别" checked>女 -- checked是默认选中
多选框:<input type="checkbox" checked>
<input type="file" multiple> -- multiple是可以上传多个文件的属性
8.下拉菜单 -- select标签
标签:select嵌套option,select是下了菜单整体,option是下拉菜单中的每一项
selected表示默认选择的
城市:
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
<option selected>武汉</option> <!-- selected第一个显示的 -->
</select>
9.文本域 -- textarea标签
作用:多行输入文本的表单控件。
<textarea>发表你的评论</textarea>
<texterea> 默认提示文字</textarea>
10.label -- 增大input标签中单选多选点击范围的标签
作用:用label标签绑定文字和表单控件的关系,增大表单控件的点击范围。
<label><input type="radio" name = "gender" > 男</label>
<label><input type="radio" name = "gender" checked> 女</label>
使用方法为直接用label标签包裹input的选项标签
11.按钮 -- button标签
<button type="">按钮上的文字信息</button> type默认为提交
想要使用上面的功能需要把内容全部放在from标签当中
<form action="">
用户名:<input type="text" placeholder="请输入用户名">
<br><br>
密码:<input type="password" placeholder="请输入密码">
<br><br>
<button type="submit">提交</button>
<button type="reset">重置</button>
</form>
12.div和span标签
无语义的布局标签
作用:布局网页(划分网页区域,摆放内容)
· div:独占一行
· span:不换行
13.字符实体
在网页中显示空格以及<>
因为正常情况是无法打印出着几个东西的
14.实战一 -- 获奖信息列表(bushi
<ul>
<li>
<img src="../第1个案例/图片/img2.png" width = 100 alt = "初赛奖项" title = "初赛奖项">
<h4>初赛奖项</h4>
</li>
<li>
<img src="../第1个案例/图片/img.jpg" width = 100 alt = "省赛奖项" title = "省赛奖项">
<h4>省赛奖项</h4>
</li>
<li>
<img src="../第1个案例/图片/管理系统.png" width = 100 alt = "管理系统" title = "管理系统">
<h4>管理系统</h4>
</li>
</ul>
15.实战二 -- 注册信息收集
<h1>注册信息</h1>
<form action="">
<!-- 个人信息 -->
<h2>个人信息</h2>
姓名:<input type="text" placeholder="请输入真实姓名">
<br><br>
密码:<input type="password" placeholder="请输入密码">
<br><br>
确认密码:<input type="password" placeholder="请输入确认密码">
<br><br>
性别:<label><input type="radio" name="gender"> 男 </label><label><input type="radio" name = "gender" checked> 女</label>
<br><br>
<label>居住城市:</label>
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
<option selected>南昌</option>
</select>
<!-- 教育经历 -->
<h2>教育经历</h2>
最高学历:
<select>
<option>博士</option>
<option>硕士</option>
<option>本科</option>
<option>大专</option>
<option>高中</option>
<option>初中</option>
<option>小学</option>
</select>
<br><br>
学校名称:<input type="text" placeholder="请输入最高学历学校">
<br><br>
所学专业:<input type="text" placeholder="请输入所学专业">
<br><br>
在校时间:
<select>
<option>2010</option>
<option>2011</option>
<option>2012</option>
<option>2013</option>
<option>2014</option>
<option>2015</option>
<option>2016</option>
<option>2017</option>
<option>2018</option>
<option selected>2019</option>
<option>2020</option>
<option>2021</option>
</select>
--
<select>
<option>2010</option>
<option>2011</option>
<option>2012</option>
<option>2013</option>
<option>2014</option>
<option>2015</option>
<option>2016</option>
<option>2017</option>
<option>2018</option>
<option>2019</option>
<option>2020</option>
<option>2021</option>
<option>2022</option>
<option selected>2023</option>
</select>
<!-- 工作经历 -->
<h2>工作经历</h2>
<label>公司名称:</label><input type="text">
<br><br>
工作描述:<br>
<textarea></textarea>
<br><br>
<ul>
<li>
<a href="#"><ins>《用户服务协议》</ins></a>
</li>
<li>
<a href="#"><ins>《隐私政策》</ins></a>
</li>
</ul>
<input type="checkbox">已阅读并同意以上协议
<br><br><br>
<!-- 协议 和 按钮 -->
<button type="submit">免费注册</button>
<button type="reset">重新填写</button>
</form>