HTML基础标签知识
标题标签：独占一行
双标签
/*
<h1> ...</h1>
h1 ...h6一共六级标签
标题独占一行
*/段落
段落标签：独占一行
双标签
/*
<p> </p>
多个段落之间默认有一个间隙，就是隔了一行
段落独占一行
*/换行，水平分割线
# 查看的时候一行文字很长，可以在"查看"中设置 自动换行
# 单标签
<br>
<hr> 水平分割线文本格式标签
场景：需要让文字加粗、下划线、倾斜，删除线等效果
| 标签 | 说明 | 标签 | 说明 | |
|---|---|---|---|---|
| b | 加粗 | strong | 加粗 | |
| u | 下划线 | ins | 下划线 | |
| i | 倾斜 | em | 倾斜 | |
| s | 删除线 | del | 删除线 |
图片标签
单标签，标签名称：img
/*
属性名
src：图片地址
alt：图片加载不出来时，展示的内容
title：光标悬浮到图片上时，显示的内容
其中title属性不仅可以用到img标签，也可以作为其它标签的属性
<img src="" alt="" title=""> # 属性之间用空格隔开，属性之间没有顺序之分
*/图片标签的width和height属性
/*
属性名：width和height
属性值：宽度和高度(数字px)
注意点：
如果只设置width或height中的一个，另一个没设置的会自动等比例缩放(此时图片不会变形)
如果同时设置了width和height两个，若设置不当此时图片可能会变形
*/音频标签
场景：在页面中插入音频
音频标签目前仅支持：MP3、Wav、Ogg
/*
<audio src="" controls> </audio>
src：音频的路径
controls：显示播放的控件(浏览器默认是显示播放控件的)
atuoplay:自动播放(有些浏览器不支持)
loop：循环播放
*/视频标签
视频标签目前仅支持：MP4、WebM、Ogg
/*
<video src="" controls></video>
src：视频路径
autopaly:自动播放，谷歌浏览器需配合meted实现静音播放
*/超链接(a标签)
/*
<a href="" target=""></a>
开发过程中，还不确定href要跳转的地址，先用#号(空连接)占位
target属性：控制跳转连接页面在浏览器是另打开一个新的的标签页，还是覆盖原来的
*/| target取值 | 效果 |
|---|---|
| _self | 默认值，在当前窗口跳转(覆盖原网页) |
| _blank | 在新窗口跳转(保留原网页) |
列表标签
无序列表
父子标签
ul标签中，只能包含li标签中，不能包含其它的，可以在li中使用其它标签
| 标签名 | 说明 |
|---|---|
| ul | 表示无序列表的整体，用于包裹li标签 |
| li | 表示无序列表的每一项，用于包含每一行的内容 |
无序列表的显示特点
/*
列表的每一项前默认显示圆点标识
*/有序列表
父子标签
场景：在网页中表示一组有顺序之分的列表，如：排行榜
| 标签名 | 说明 |
|---|---|
| ol | 表示有序列表的整体，用于包裹li标签 |
| li | 表示有序列表的每一项，用于包含每一行的内容 |
自定义列表
/*
场景：在网页的底部导航中通常会使用自定义列表实现
如：
帮助中心
账户管理
购物指南
订单操作
*/| 标签名 | 说明 |
|---|---|
| dl | 表示自定义列表的整体，用于包裹dt/dd标签 |
| dt | 表示自定义列表的主题 |
| dd | 表示自定义列表的针对主题的每一项内容 |
自定义列表显示特点
/*
dd当前会默认显示缩进效果
注：dl标签中，只能包含dt和dd标签
dt和dd标签可以包含任意内容
*/<body>
<dl>
<dt>帮助中心</dt>
<dd>账户管理</dd>
<dd>购物指南</dd>
<dd>订单操作</dd>
</dl>
</body>表格标签
不设置border属性的话，浏览器不显示表格，只会显示表格内容
| 标签名 | 说明 |
|---|---|
| table | 表格整体，可用于包裹多个tr |
| tr(table_rows) | 表格每行，可用于包裹td |
| td | 表格单元格，可用于包裹内容 |
| 标签的嵌套关系：table > tr > td |
表格相关属性
实际开发中，都是使用css改变样式的
| 属性名 | 属性值 | 效果 |
|---|---|---|
| border | 数字，通常是1 | 边框宽度 |
| width | 数字 | 表格宽度 |
| height | 数字 | 表格高度 |
表格标题和表头单元格标签
场景：在表格中表示整体大标题和一列小标题
| 标签名 | 名称 | 说明 |
|---|---|---|
| caption | 表格大标题 | 表示表格整体大标题，默认在表格整体顶部居中位置显示 |
| th | 表头 |
/*
注意点：
caption标签书写在table标签内部
th标签书写在tr标签内部(用于替换td标签)
*/合并单元格
/*
合并单元格步骤
1.通过左上原则，确定保留谁删除谁
上下合并-->只保留最上的，删除其它
左右合并-->只保留最左的，删除其它
2.注意点：
只有同一个结构标签中的单元格才能合并，不能跨结构标签合并
*/| 属性名 | 属性值 | 说明 |
|---|---|---|
| rowspan | 合并单元格的个数 | 跨行合并，将多行的单元格垂直合并 |
| colspan | 合并单元格的个数 | 跨列合并，将多列的单元格水平合并 |
表格案例
<!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>赵四</td>
<td>120</td>
<td>三年三班</td>
</tr>
</table>
</body>
</html>表单标签
应用场景，登录、注册、搜索时使用
表单标签：input、button、select、textarea、lable
input基本使用
input是一个单标签，表单当中的一种
input标签，默认是不换行，要用br标签换行
input标签可以通过type属性值的不同，展示不同效果
| 标签名 | type属性值 | 说明 |
|---|---|---|
| input | text | 文本框，用于输入单行文本 |
| input | password | 密码框 |
| input | radio | 单选框 |
| input | checkbox | 多选框 |
| input | file | 文件上传 |
| input | submit | 提交按钮 |
| input | reset | 重置按钮 |
| input | button | 普通按钮，默认无功能，通常配合js添加功能 |
输入框提示符(表单占位符)
即：输入框底部说明文字
<body>
<input type="text" placeholder="">
</body>单选功能和默认选中
name进行分组，才可以实现
| 属性名 | 说明 |
|---|---|
| name | 分组，有相同name属性的单选框为一组，一组中同时只能有一个被选中 |
| checked | 默认选中 |
<body>
男：<input type="radio" name="sex">
女：<input type="radio" name="sex" checked id="">
</body>选择多个文件
默认只能选择一个文件，用multiple属性可选择多个文件
上传文件时，过滤文件类型
点击上传按钮，调起windows时，调起文件选择框时，直接过滤文件类型
属性名称：accept
# 使用属性accept指定文件类型，若过滤多个文件类型用逗号隔开
input type="file" multiple accept=".csv, .txt">按钮(给按钮指定名称，value属性)
提交和重置，以及普通按钮，要想实现，必须要在表单域标签下，即:form标签
即：用form标签把标签表单标签一起包裹起来
表单域标签的，action属性，即要提交到哪里(地址)
button按钮标签
以后直接用这个标签的情况比较多
button按钮可单独作为标签出现，就不用加在input里面了
按钮名称，直接写到
<button type=""> 按钮的名称</button>
# button是双标签，便于包裹其它内容：文字，图片等下拉菜单标签select
select 标签和option是父子标签
下拉菜单，默认选中第一个option，可以通过selected更改默认选中
/*
标签所组成
select标签：下拉菜单的整体
option标签：下拉菜单的每一项
常见属性
selected：下拉菜单默认选中
*/<body>
所选城市：
<select name="" id="">
<option value="">上海</option>
<option value="" selected>杭州</option>
<option value="">深圳</option>
</select>
</body>小总结
# 表单标签里面有两种默认选中，单选，多选 是使用checked进行默认选中的
# 下拉菜单的默认选中，selected文本域(textarea)标签
不用记cols，rows这两个属性，后面都是用css来进行设置的
场景：在网页中提供可输入多行文本的表单控件，如：描述输入框
/*
常见属性
cols：规定了文本域内可见宽度
rows：规定了文本域内可见行数
注意点：
右下角可以拖拽改变大小
实际可发中，使用css样式设置
*/label标签（扩大可点击区域）
扩大可点击区域范围
例：性别单选项，分别点击男/女文字也可以选中
使用方法一
<!--
1.使用label标签把内容(如：文本)包裹起来
2.在表单标签上添加id属性
3.在label标签的for属性中设置对应的id属性值
代码示例-->
<input type="radio" name="sex" id="nan" checked> <label for="nan">男 </label>使用方法二
<!--
使用方法二：
1.直接使用label标签把内容(如：文本)和表单标签一起包裹起来
2.然后把label标签的for属性删除即可
代码示例 -->
<label><input type="radio" name="sex">女</label>语义化标签(div，span)
网页布局
div 和span是用来做网页布局的
div标签：一行只显示一个(独占一行)
span标签：一行可以显示多个
空格表示
再网页中展示空格，用
 
HTML基础知识汇总案例
实际工作中，以上都放在form表单标签里面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>制作网页</title>
</head>
<body>
<form action="">
<h1>青春不常在，抓紧谈恋爱</h1>
<hr>
昵称：<input type="text" placeholder="请输入昵称">
<br>
<br>
性别：<input type="radio" name="sex" id="nan" checked> <label for="nan">男 </label>
<!-- <input type="radio" name="sex" id="nv"> <label for="nv">女</label> -->
<!--两种增加可点击区域-->
<label><input type="radio" name="sex">女</label>
<br>
<br>
所在城市：
<select name="" id="">
<option>上海</option>
<option selected>杭州</option>
<option>项城</option>
</select>
<br>
<br>
婚姻情况：
<input type="radio" name="marriage" id="weihun"><label for="weihun">未婚</label>
<input type="radio" name="marriage" id="yihun"><label for="yihun">已婚</label>
<input type="radio" name="marriage" id="baomi"><label for="baomi">保密</label>
<br>
<br>
喜欢的类型：
<input type="checkbox" name="" id="keai"> <label for="keai">可爱</label>
<input type="checkbox" name="" id="xinggan"> <label for="xinggan">性感</label>
<input type="checkbox" name="" id="yujie"> <label for="yujie">御姐</label>
<br>
<br>
个人介绍：<br>
<textarea name="" id="" cols="30" rows="10" placeholder="请输入个人介绍..."></textarea>
<h2>我承诺</h2>
<ul>
<li>年满18岁、单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
<input type="checkbox" id="tiaoyue"> <label for="tiaoyue">我同意所有条款</label>
<br>
<!-- <button type="submit">免费注册</button> -->
<!-- 直接写button也行，如果写input的话，按钮名字，用value属性去接收 -->
<input type="submit" value="免费注册">
<button type="reset">重置</button>
</form>
</body>
</html>
