本文介绍了HTML超文本标记语言的基本概念，包括标签的使用、网页的基本骨架、标题、段落、图片、超链接、音频和视频标签，以及表格、表单和布局等元素。此外，还提到了路径、列表和表单控件的使用，以及如何利用CSS来设置图片大小。文章旨在帮助读者理解和创建基本的HTML网页。
HTML超文本标记语言
- 超文本是什么？链接
- 标记是什么？标记也叫标签，带尖括号的文本
标签语法
- 标签成对出现，中间包裹内容
- <>里面方英文字母（标签名）
- 结束标签比开始标签多/
- 双标签：成对出现的标签
- 单标签：只有开始标签，没有结束标签
HTML的基本骨架
<!DOCTYPE html>
<html lang="en">
<head>
<title>网页标题</title>
</head>
<body>
网页主题内容
</body>
</html>
- html：整体网页
- head：网页头部，用来存放给浏览器看的信息，例如CSS
- titile：网页标题
- body：网页主体，用来存放给用户看的信息，例如图片、文字
标签的关系
作用：明确标签的书写位置；让代码格式更整齐
- 父子关系（嵌套关系）：子级标签换行且缩进
- 兄弟关系（并列关系）：兄弟标签换行要对齐
标题标签
一般用在新闻标题、文章标题、网页区域名称、产品名称等等
标签名：h1~h6
显示效果
- 文字加粗
- 字号逐渐减小
- 独占一行
使用经验
- h1标签在一个网页中只能用一次，用来方新闻标题或网页的logo
- h2~h5没有使用次数
段落标签
标签名：p（双标签）
显示效果
- 独占一行
- 段落之间有空隙
- 浏览器对段落自动换行
换行与水平标签
换行：<br>（单标签）
水平线：<hr>（单标签）
文本格式化标签
作用：为文本添加特殊格式，以突出重点。常见的文本格式：加粗、倾斜、下划线、删除线等。
| 标签名 | 效果 |
|---|---|
| strong | 加粗 |
| em | 倾斜 |
| ins | 下划线 |
| del | 删除线 |
图片标签
标签名：<img src = “图片的URL”>
作用：在网页中插入图片
src用于指定图片的位置和名称，是标签必须属性
图片标签-属性
- 属性名 = “属性值”
- 属性写在尖括号里面，标签名后面，标签名和属性之间用空格隔开，不区分先后顺序
| 属性 | 作用 | 说明 |
|---|---|---|
| alt | 替换文本 | 图片无法显示的时候显示的文字 |
| title | 提示文本 | 鼠标悬停在图片上面的时候显示的文字 |
| width | 图片的宽度 | 值为数字，没有单位 |
| height | 图片的高度 | 值为数字，没有单位 |
图片的大小应在CSS中设置，浏览器缩放图片，默认是等比例缩放
相对和绝对路径
路径指的是查找文件时，从起点到终点经历的路线
- 相对路径：从当前文件位置出发查找目标文件
- 绝对路径：从盘符出发查找目标文件
“ / ”表示进入某个文件夹里面
“ . ”表示当前文件所在文件
“…”当前文件上一级文件夹
超链接标签
标签名：<a>
作用：点击跳转到其他页面
href属性值是跳转地址，是超链接的必须属性，不知道跳转地址是可用“#”占位符
target属性值是跳转方式
音频标签
标签名：<audio src = “音频地址”>
| 属性 | 作用 |
|---|---|
| src | 音频URL |
| controls | 显示音频控制面板 |
| loop | 循环播放 |
| autoplay | 自动播放 |
在HTML5里面，如果属性名和属性值完全一样，可以简写为一个单词
视频标签
标签名：<vdiosrc = “视频地址”>
| 属性 | 作用 |
|---|---|
| src | 视频URL |
| controls | 显示视频控制面板 |
| loop | 循环播放 |
| muted | 静音播放 |
| autoplay | 自动播放 |
在浏览器中，想要自动播放，必须有muted属性
设计思路
网页制作思路：从上到下，从左到右，从整体到局部，逐步分析制作
分析内容-写代码-保存-浏览器看效果
列表
作用：布局内容排列整齐的区域
列表分类：无序列表、有序列表、定义列表
无序列表标签：ul嵌套li，ul是无序列表，li是列表条目
注意事项
- ul标签里面只能包裹li标签
- li标签里面可以包裹任何内容
有序列表标签：ol嵌套li，ol是无序列表，li是列表条目
定义列表标签：dl嵌套dt和dd，dt是定义列表，dt是定义列表的标题，dd是定义列表的描述/详情
注意事项
- dl里面只能包含dt和dd
- dt和dd里面可以包含任意内容
表格标签
标签：table嵌套tr，tr嵌套td/th
table：表格
tr：行
th：表头单元格
td：内容单元格
提示：在网页中，表格默认没有边框线，使用border属性可以为表格添加边框线
表格结构标签
作用：用表格结构变迁把内容划分区域，让表格结构更清晰，语义更清晰
| 标签名 | 含义 | 特殊说明 |
|---|---|---|
| thrad | 表格头部 | 表格头部内容 |
| tbody | 表格主体 | 主要内容区域 |
| tfoot | 表格底部 | 汇总信息区域 |
合并单元格
跨行合并：rowspan
跨列合并：colspan
合并单元格步骤
- 明确合并的目标
- 保留最左最上的单元格，添加属性
- 删除其他单元格
表单标签
作用：收集用户信息
input标签type属性值不同，则功能不同
| type属性值 | 说明 |
|---|---|
| text | 文本框，用于输入单行文本 |
| password | 密码框 |
| radio | 单选框 |
| checkbox | 多选框 |
| file | 上传文件 |
下拉菜单
标签：select嵌套option，select是下拉菜单整体，option是下拉菜单的每一项 ，elected默认显示
文本域标签
作用：多行输入文本的表单控件
标签：textarea，双标签
label标签
作用：网页中，某个标签的说明文本
经验：用label标签绑定文字和表单控件的关系，增大表单控件的点击范围
写法一：label 标签只包裹内容，布包裹表单控件
设置label标签的for属性值和表单控件的id属性值相同
写法二：使用label标签包裹文字和表单控件，不需要属性
button标签
标签：<button type = " "> 按钮 </button>
| type属性值 | 说明 |
|---|---|
| submit | 提交按钮，点击后可以提交数据到后台 |
| reset | 重置按钮，点击后将表单控件恢复默认值 |
| button | 普通按钮，默认没有功能，一般配合JS使用 |
form 表单区域标签，统一管理表单
action属性： 发送数据的地址
无语义的布局标签
作用：布局网页
- div：独占一行
- span：不换行
字符实体
| 显示结果 | 描述 | 实体名称 |
|---|---|---|
| 空格 | | |
| < | 小于号 | < |
| > | 大于号 | > |
1194
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
