HTML学习笔记
一、基本骨架
<html>
<head>
<title>文档的标题</title>
</head>
<body>
文档的内容... ...
</body>
</html>
二、标签
1.标签关系
作用：明确标签的书写位置；让代码格式更整齐
- 父子关系（嵌套关系）
<html>
<head> </head>
</html>
- 兄弟关系（并列关系）
<html> </html>
<body> </body>
2.常用标签
| 标签 | 描述 |
|---|---|
<p> | 定义段落 |
<br> | 定义简单的折行 |
<h1> to <h6> | 定义 HTML 标题 |
<br> | 定义简单的折行 |
<hr> | 定义注释 |
<a> | 定义锚 |
<hr> | 水平线 |
- 文本格式化标签
| 标签名 | 效果 |
|---|---|
<b> | 加粗 |
<i> | 倾斜 |
<u> | 下划线 |
<s> |
- 图像标签
作用：在网页中插入图片。
格式：<img src="图片的 URL">
| 属性 | 作用 | 说明 |
|---|---|---|
| alt | 替换文本 | 图片无法显示的时候显示 的文字 |
| title | 提示文本 | 鼠标悬停在图片上面的时候显示的文字 |
| width | 图片的宽度 | 值为数字，没有单位 |
| height | 图片的高度 | 值为数字，没有单位 |
路径指的是查找文件时，从起点到终点经历的路线。
路径分类：
• 相对路径：从当前文件位置出发查找目标文件
• 绝对路径：从盘符出发查找目标文件
Windows 电脑从盘符出发
Mac 电脑从根目录出发
- 超链接
作用：点击跳转到其他页面。
<a href="https://www.baidu.com">跳转到百度</a>
href 属性值是跳转地址，是超链接的必须属性。
超链接默认是在当前窗口跳转页面，添加 target=“_blank” 实现新窗口打开页面 - 音频标签
<audio src="音频的 URL"></audio>
拓展：书写 HTML5 属性时，如果属性名和属性值相同，可以简写为一个单词。
- 视频标签
<video src="视频的 URL"></video>
三、列表
作用：布局内容排列整齐的区域。
列表分类：无序列表、有序列表、定义列表。
1.无序列表
作用：布局排列整齐的不需要规定顺序的区域。
标签：ul 嵌套 li，ul 是无序列表，li 是列表条目。
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li> ……
</ul>
注意事项：
• ul 标签里面只能包裹 li 标签
• li 标签里面可以包裹任何内容
2.有序列表
作用：布局排列整齐的需要规定顺序的区域。
标签：ol 嵌套 li，ol 是有序列表，li 是列表条目。
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li> ……
</ol>
注意事项：
• ol 标签里面只能包裹 li 标签
• li 标签里面可以包裹任何内容
定义列表
标签：dl 嵌套 dt 和 dd，dl 是定义列表，dt 是定义列表的标题，dd
<dl>
<dt>列表标题</dt>
<dd>列表描述 / 详情</dd> ……
</dl>
注意事项：
• dl 里面只能包含dt 和 dd
• dt 和 dd 里面可以包含任何内容
四、表格
标签：table 嵌套 tr，tr 嵌套 td / th
| 标签名 | 说明 |
|---|---|
| table | 表格 |
| tr | 行 |
| th | 表头单元格 |
| td | 内容单元格 |
提示：在网页中，表格默认没有边框线，使用 border 属性可以为表格添加边框线。
五、表单
作用：收集用户信息。
使用场景：
• 登录页面
• 注册页面
• 搜索区域
1. input 标签基本使用
input 标签 type 属性值不同，则功能不同。
<input type="..." >
| type属性值 | 说明 |
|---|---|
| text | 文本框，用于输入单行文本 |
| password | 密码框 |
| radio | 单选框 |
| checkbox | 多选框 |
| file | 上传文件 |
2.下拉菜单
标签：select 嵌套 option，select 是下拉菜单整体，option是下拉菜单的每一项。
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
<option selected>武汉</option>
</select>
默认显示第一项，selected 属性实现默认选中功能
3.文本域
作用：多行输入文本的表单控件。
标签：textarea，双标签。
<textarea>默认提示文字</textarea>
注意点：
• 实际开发中，使用 CSS 设置 文本域的尺寸
• 实际开发中，一般禁用右下角的拖拽功能
4.按钮
<button type="">按钮</button>
| type属性值 | 说明 |
|---|---|
| submit | 提交按钮，点击后可以提交数据到后台 |
| reset | 重置按钮，点击后将表单控件恢复到默认值 |
| button | 普通按钮，默认没有功能，一般配合javaScript |
1264
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
