前端web开发基础html5
目录
HTML定义
标签语法
HTML基本骨架
标题标签
段落标签
换行与水平线标签
文本格式化标签
图像标签
图像标签的属性
路径
超链接
音频标签
视频标签
列表
无序列表 （unordered list）
有序列表 （ordered list）
定义列表 （defined list）
表格
基本用法
表格结构标签
合并单元格
表单
input标签
input标签之占位文本
单选框radio
上传文件-file
多选框-checkbox
下拉菜单
文本域
label标签
增大点击范围
按钮-button
无语义的布局标签
字符实体
HTML定义
html超文本标记语言--HyperText Markup Language
- 超文本是什么？ 链接
- 标记是什么？ 标记也叫标签，带尖括号的文本
标签语法
<开头 > 需要加粗的文字 <结尾>
- 标签以成对的形式呈现
- 在<>中放置英文字母（作为标签名称）
- 结束时的标签数量超过开始时的数量/
- 进一步扩展
双标签：成对出现的标签
单标签：只有开始标签，没有结束标签
：换行
：水平线
HTML基本骨架
html基本骨架是网页模板。
html：整个网页
head：网页头部，存放给浏览器看的代码，例如css
body：网页主体，存放给用户看的代码，例如图片，文字
title：网页标题
vscode快速生成骨架：
在HTML文件中（.html），! (英文) 配合 enter/tab 键
标题标签
一般用在新闻标题，文章标题，网页区域名称，产品名称等等。
标签名：h1~h6（双标签）
- 在一个网页中，h1标签仅能用于放置新闻标题或作为网页的 logo 标识。
- h2至h6层次标题无数量限制。
段落标签
一般用在新闻段落，文章段落，产品描述信息等等。
标签名：p（双标签）
显示特点：
- 独占一行
- 段落之间存在间隙
换行与水平线标签
- 换行：
（单标签）
浏览器不识别代码中的enter键换行
- 水平线：
（单标签）
文本格式化标签
作用：为文本应用特殊格式标记以突出显示重点内容。常用的文本格式包括加粗显示、斜体显示、下划线显示以及取消显示等基本样式设置。
| 标签名 | 效果 |
|---|---|
| strong / b | 加粗 |
| em / i | 倾斜 |
| ins / u | 下划线 |
| del / s | 删除线 |
strong，em,ins,del 标签自带强调含义（语义）
图像标签
作用：在网页中插入图片
src用于指定图像的位置和名称，是的必须属性
图像标签的属性
| 属性 | 作用 | 说明 |
|---|---|---|
| alt | 替换文本 | 图片无法显示的时候显示的文字 |
| title | 提示文本 | 鼠标悬停在图片上的时候显示的文本 |
| width | 图片的宽度 | 值为数字，没有单位 （浏览器缩放图片，默认等比缩放） |
| height | 图片的高度 | 值为数字，没有单位 |
<img src="./cat.jpg" alt="替换文本" title=”提示文本">
- 字段名=字段值
- 字段放置于花括号内（即{}），字段名需紧跟其后（两者间以空格分隔），具体位置顺序并不影响使用
路径
路径指的是查找文件时，从起点到终点经理的路线
- 相对路径：从当前文件位置出发查找目标文件
/ 表示进入某个文件夹里面 文件夹名字 /
.表示当前文件所在文件夹 ./
..表示当前文件的上一级文件夹 ../
- 绝对路径：从盘符出发查找目标文件
windows默认是\，其他系统是/，建议统一写成/
引入路径的时候，src的值可以直接写在线网址的地址
绝对路径的应用场景：友情链接
超链接
作用：点击跳转到其他页面
href属性值是跳转地址，是超链接的必须属性
跳转到本地文件，直接相对路径查找
target="_blank" 新窗口跳转页面
开发初期，不知道超链接的跳转地址，href属性值写#，表示空链接，不会跳转
音频标签
| 属性 | 作用 | 特殊说明 |
|---|---|---|
| src（必须属性） | 音频url | 支持格式：mp3，ogg，wav |
| controls | 显示音频控制面板 | 在html5中，如果属性名和属性值一样，可以简写为一个单词 |
| loop | 循环播放 | |
| auto play | 自动播放 | 为了提升用户体验，浏览器一般会禁用自动播放功能 |
视频标签
< video src="视频的url">
| 属性 | 作用 | 特殊说明 |
|---|---|---|
| src（必须属性） | 视频url | 支持格式：mp4，ogg，webM |
| controls | 显示视频控制面板 | |
| loop | 循环播放 | |
| auto play | 自动播放 | 为了提升用户体验，浏览器支持在静音状态下自动播放 （要配合muted属性） |
| muted | 静音播放 |
列表
作用：布局内容排列整齐的区域
无序列表 （unordered list）
作用：布局排列整齐的不需要规定顺序的区域
标签：ul 嵌套 li ，ul 是无序列表 ，li是列表条目
- 第一项
- 第二项
- 第三项
-
.....
注意事项
- ul列表里面只能包裹li标签
- li标签里面可以包裹任何内容
有序列表 （ordered list）
作用：布局排列整齐的需要规定顺序的区域
标签：ol 嵌套 li ，ol 是有序列表 ，li是列表条目
- 第一项
- 第二项
- 第三项
-
.....
定义列表 （defined list）
标签项由三个部分组成：dl嵌套于dt和dd。其中dl代表定义列表主体部分；dt作为子表单中的标题；dd则用于描述或补充详细信息。
- 列表标题
- 列表描述 /详情
....
注意事项
- dl里面只能包裹dt和dd
- dt和dd里面可以包裹任何内容
表格
基本用法
网页中的表格与excel表格类似，用来展示数据
标签：table 嵌套 tr ，tr嵌套td /th
| 标签名 | 说明 |
|---|---|
| table | 表格 |
| tr | 行 |
| th | 表头单元格 |
| td | 内容单元格 |
通常在网页设计中，默认情况下表格不会带有边框线。为了实现表格具有边框的效果，可以通过设置border属性来进行。
<body>
<table border="1">
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>总分</th>
</tr>
<tr>
<td>张三</td>
<td>100</td>
<td>20</td>
<td>120</td>
</tr>
</body>
代码解读表格结构标签
作用：用表格结构标签把内容划分区域，让表格结构更清晰，语义更清晰
| 标签名 | 含义 | 特殊说明 |
|---|---|---|
| thead | 表格头部 | 表格头部内容 |
| tbody | 表格主体 | 主要内容区域 |
| tfoot | 表格底部 | 汇总信息区域 |
合并单元格
作用：将多个单元格合并成一个单元格，以合并同类信息
合并单元格的步骤：
1.明确合并的目标
选择位于最左侧顶端的单元格，并设置属性项。此属性项赋值为数值，并将多个数值相加作为输入。
-跨行合并，保留最上单元格，添加属性rowspan
-跨列合并，保留最左单元格，添加属性colspan
3.删除其他单元格
表单
作用：收集用户信息
使用场景：
- 登录页面
- 注册页面
- 搜索区域
input标签
input标签type属性值不同，则功能不同
| type属性值 | 说明 |
|---|---|
| text | 文本框，用于输入单行文本 |
| password | 密码框（输入什么都是...) |
| radio | 单选框 |
| checkbox | 多选框(小方格） |
| file | 上传文件 |
input标签之占位文本
占位文本：提示信息
单选框radio
常用属性
| 属性名 | 作用 | 特殊说明 |
|---|---|---|
| name | 控件名称 | 控件分组，同组只能选中一个（单选功能） |
| checked | 默认选中 | 属性名和属性值相同，简写为一个单词 |
<input type=''radio'' name="gender" checked>男
女
上传文件-file
在默认设置下，文件上传表单控件仅支持上传一个文件；配置multiple属性后即可实现文件多选功能。
多选框-checkbox
多选框也叫复选框
默认选中：checked
下拉菜单
Tag: select标签嵌入于option中；其中select标签代表一个完整的下拉菜单；而option作为下拉菜单中的每一个选项。
下拉菜单也支持默认选中功能 （selected）
文本域
作用：多行输入文本的表单控件
标签：textarea，双标签