(一)、html认知
1. html文件骨架
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文章的标题</title>
</head>
<body>
<p>网页的主干</p>
</body>
</html>
2. 注释
快捷键为ctrl+/,格式如下：
<!--这是注释-->
3. 标题和段落标签
标题一共六级，逐个变小；段落需要独占一行，并且每个段落与间隔。
<h1>一级标题</h1>
<h2>二级标题</h2>
<p>段落标签</p>
4. 换行和水平分割线标签
<!--强制换行-->
<br>
<!--水平分割线-->
<hr>
5. 文本格式化标签
| 标签 | 说明 |
|---|---|
| b | 加粗 |
| u | 下划线 |
| i | 倾斜线 |
| s | 删除线 |
6. 图片标签和属性
<!--当width和height只指定了一个时，图片会自动缩放-->
<img src="图片路径“ alt="图片无法显示时显示该文本" title="鼠标悬停在图片上时显示" width="宽度" height="高度">
7. 路径问题
- 绝对路径
直接填写即可 - 相对路径
当目标文件和代码文件位于同一级目录时，使用 ./ 或者直接写文件名。
寻找上级目录时，使用 ../
8. 音频标签
<audio src="文件路径"></audio>
| 属性名 | 功能 |
|---|---|
| src | 文件路径 |
| controls | 显示播放器控件 |
| autoplay | 自动播放（部分浏览器不支持） |
| loop | 循环播放 |
9. 视频标签
<video src=""></video>
属性同 <video> 标签
10. 超链接标签
<a href="目标页面链接"></a>l
target属性的功能：
| 属性值 | 功能 |
|---|---|
| _self | 默认属性值，覆盖原网页 |
| _blank | 保留原网页，在新窗口跳转 |
(二)、html基础
1. 有序列表和无序列表
1）无序列表：
| 标签名 | 说明 |
|---|---|
| ul | 表示无序列表的整体，用来包裹li标签 |
| li | 表示无序列表的每一项，用来包裹每一行的内容 |
2）有序列表
| 标签名 | 说明 |
|---|---|
| ol | 表示无序列表的整体，用来包裹li标签 |
| li | 表示无序列表的每一项，用来包裹每一行的内容 |
注意事项：
- ul和ol标签中只允许包裹li标签
- li标签中可以包裹任何内容
2. 自定义列表
| 标签名 | 说明 |
|---|---|
| dl | 表示自定义列表的整体，用来包裹 dt 和 dd 标签 |
| dt | 表示自定义列表的主题 |
| dd | 表示 自定义列表针对主题的每一行内容 |
注意事项:
- dl 标签中只允许包含dt 和 dd标签
- dt/dd可以包含任意内容
- dd 默认显示缩进效果
<dl>
<dt>游戏</dt>
<dd>龙珠</dd>
<dd>老头环</dd>
<dd>大乱斗</dd>
</dl>
3. 表格标签
1）表格的使用：
| 标签名 | 说明 |
|---|---|
| table | 表格整体，可包含多个 tr 标签 |
| tr | 表格每行，用来包含 td |
| td | 表格单元格，包含内容 |
注意事项：
- 标签的嵌套关系：table > tr > td
- 表格默认没有边框
<table>
<tr>
<td>一行一列</td>
<td>一行二列</td>
<td>一行三列</td>
</tr>
<tr>
<td>二行一列</td>
<td>二行二列</td>
<td>二行三列</td>
</tr>
</table>
2） 表格标题和单元格表头标签
| 标签名 | 说明 |
|---|---|
| caption | 表格大标题，默认居中显示 |
| th | 表头单元格，默认文字加粗并居中显示 |
注意事项：
- caption 写在 table 标签内部
- th 标签写在 tr 标签内部，用来替换 td
<table border="1">
<caption>表格标题</caption>
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>
<tr>
<td>一行一列</td>
<td>一行二列</td>
<td>一行三列</td>
</tr>
<tr>
<td>二行一列</td>
<td>二行二列</td>
<td>二行三列</td>
</tr>
</table>
3) 表格的结构标签
用来给表格分组，展示更加复杂的表格。
| 标签名 | 说明 |
|---|---|
| thead | 表格头部 |
| tbody | 表格主体 |
| tfoot | 表格底部 |
注意事项：
- 表格结构标签用于包裹 tr 标签
- 表格结构标签非必需
4）合并单元格
| 属性名 | 属性值 | 说明 |
|---|---|---|
| rowspan | 合并单元格的个数 | 跨行合并，将多行的单元格垂直合并 |
| colspan | 合并单元的个数 | 跨列合并，将多列的单元格水平合并 |
合并原则： 保持左上原则，将多余的删掉，再添加属性
4. 表单标签
用于收集用户的信息。
1）input 基本使用
input 标签的 type 属性：
| type 属性值 | 说明 |
|---|---|
| text | 文本框，用来输入单行文本 |
| password | 密码框，用来输入密码 |
| radio | 单元框，用来多选一 |
| checkbox | 多选框，用来多选多 |
| file | 文件选择，用来上传文件 |
| submit | 提交按钮，用来提交 |
| reset | 重置按钮，用来重置 |
| button | 普通按钮，默认无功能，用 js 来添加功能 |
2）input占位符
type 属性值: text,password
| 属性名 | 说明 |
|---|---|
| placeholder | 占位符，用来提示用户输入信息 |
3）单选功能和默认选中
type属性值为：radio, checkbox
| 属性名 | 说明 |
|---|---|
| name | name属性值相同的为一组，一组中同时只能有一个单选框选中 |
| checked | 默认选中 |
我喜欢：<input type="radio" name="同一组哦" checked >学习 <input name="同一组哦" type="radio">打游戏
4）文件选择和上传多个文件
type 属性值：file
| 属性名 | 说明 |
|---|---|
| multiple | 同时选中多个文件 |
5）表单按钮-input
| type 属性值 | 说明 |
|---|---|
| submit | 提交按钮，点击之后提交数据到后端服务器 |
| reset | 重置按钮，点击之后回复表单默认值 |
| button | 普通按钮，默认无功能，用 js 来添加功能 |
注意事项：
- 实现按钮功能，需要配合 form 标签使用
- form 使用方法：把表单标签包裹起来即可
<form action="">
文本框：<input type="text" placeholder="请输入用户名">
密码框：<input type="password">
<br>
<input type="submit">
<input type="reset">
<input type="button" value="普通按钮">
</form>
6）表单-按钮button
| 标签名 | type 属性值 | 说明 |
|---|---|---|
| button | submit | 提交按钮，点击之后提交数据到后端服务器 |
| button | reset | 重置按钮，点击之后回复表单默认值 |
| button | button | 普通按钮，默认无功能，用 js 来添加功能 |
注意事项：
- 谷歌浏览器中button默认是提交按钮
- button是双标签，便于包裹其他内容
7）表单-下拉菜单
在网页中提供多个可供选择的下拉菜单表单控件。
标签组成：
- select标签，下拉菜单的整体
- option标签，下拉菜单的每一项
常见属性：
- selected，默认选中
8）表单-文本域
场景：在网页中提供可输入多行文本的表单控件
标签名：textarea
常见属性：
- cols：规定了文本域内可见宽度
- rows：规定了文本域可见行数
9）表单-lable标签
场景：常用于绑定内容与表单标签的关系
标签名：label
使用方法（一）：
- 使用label标签把那内容包裹起来
- 在表单标签上添加id属性
- 在label标签的for属性中设置对应的id属性值
使用方法（二）：
- 直接使用label标签把内容和表单标签一起包裹
- 把label标签的for属性删除即可
<form >
<input type="radio" name="gender" id="man"><label for="man">男</label>
<label ><input type="radio" name="gender">女</label>
</form>
5. 语义化标签
1）没有语义的布局标签-div和span
场景：实际开发中会大量使用到div和span这两个没有语义的布局标签
div标签：一行只显示一个，即独占一行
span标签：一行可以显示多个
2）有语义的布局标签
| 标签名 | 语义 |
|---|---|
| header | 网页头部 |
| nav | 网页导航 |
| footer | 网页底部 |
| aside | 网页侧边栏 |
| section | 网页区块 |
| article | 网页文章 |
6. 字符实体
常见的： 表示空格
(三)、综合案例
1. 学生信息表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网页的标题</title>
</head>
<body>
<table border="1">
<caption><strong>优秀学生信息表格</strong></caption>
<tr>
<th>年级</th>
<th>姓名</th>
<th>学号</th>
<th>班级</th>
</tr>
<tr>
<td rowspan="2">高三</td>
<td>张三</td>
<td>110</td>
<td>三年二班</td>
</tr>
<tr>
<td>赵四</td>
<td>120</td>
<td>三年三班</td>
</tr>
<tfoot >
<tr>
<td>评语</td>
<td colspan="3">你们都很优秀</td>
</tr>
</tfoot>
</table>
</body>
</html>
显示效果：
2. 表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网页的标题</title>
</head>
<body>
<h2>青春不常在，抓紧谈恋爱</h2>
<hr>
昵称：
<input type="text" placeholder="请输入昵称">
<br>
性别：
<input type="radio" name="gender" checked>男
<input type="radio" name="gender">女
<br>
所在城市：<select >
<option >上海</option>
<option selected>北京</option>
<option >广州</option>
</select>
<br>
婚姻状况：
<input type="radio" name="marriage" checked>未婚
<input type="radio" name="marriage" >已婚
<input type="radio" name="marriage"">保密 <br>
喜欢的类型：
<input type="checkbox" checked>可爱
<input type="checkbox" checked>性感
<input type="checkbox">御姐
<input type="checkbox">萝莉
<input type="checkbox">小鲜肉
个人介绍：<br>
<textarea name="" id="" cols="50" rows="10"></textarea>
<br>
<strong>我承诺：</strong>
<ul>
<li>年满十八岁</li>
<li>抱着严肃的态度</li>
<li>真诚学习代码</li>
</ul>
<input type="submit" value="免费注册">
<button type="reset">重置</button>
</body>
</html>
显示效果：
扫一扫
742
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
