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 |