标签
Div:无意义块级元素容器，早期用的比较多，后来html推出有语义的块级标签
<div class="main">
<div class="article">
<div class="title">
<h1>文章标题</h1>
</div>
</div>
</div>
P
Span
br、wbr
Hr
Pre
Strong/b
Em/I
Sub/sup/var
u/s
Blockquote,cite,q
Code
Kbd,samp
Mark
Small
Time,data
Address
Abbr
Ins,del
Dfn
Ruby
Bdo,bdi
标签：
<strong> </strong>
双标签;开始标签，结束标签
单标签 </br>
常用标签
Hn =》引入行级元素块级元素 6级 在一行显示
粘贴换行，换行符失效
P：英国人习惯 段落间空一行
<br/>:简单的开始新的一行，与p不同
<hr>
案例：体育新闻
加粗、倾斜
Img src
路径：
目录文件夹：普通文件夹，里面存放做页面需要的相关素材
根目录：打开目录文件夹后的第一层
绝对路径:图片在电脑的位置（了解）、、、、、网络中的绝对地址
相对路径 上级 同级 下级 图片相对于html页面的位置
img可以放在a标签里，成为图像超链接
图片标签常用属性：
Width：
height：一旦设置，浏览器就会预留空间
设置一个，自动按比例改另外一个
align：图片与文字对齐方式
left center right top
音频标签
音频标签audio。
视频标签
Video
controls 表示显示播放器的组件，一般视频肯定要显示的，音频根据情况，如果是背景音乐的话，
就不用显示。
autoplay 表示自动播放，只要支持h5标准的浏览器都支持这个属性。
链接标签 a anchor 锚
外部链接 http://
文本超链接：创建两个html文件，进行连接跳转<a href="" target="_blank":在新窗口打开></a>
target：默认值是self
- 锚链接：通过id名跳转到本页面指定位置
- 图片超文本链接;img放在a标签内容部分
练习
邮件链接：
<a href="mailto:contact@example.com">联系我们</a>
使用mailto协议
电话链接：Tel="13028420350"
特殊字符：
综合案例：
1、目录文件夹
2、路径
3、标签
4、链接
今日搜索热词
1、阿卡贝拉阿卡贝拉（意大利：Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例：阿卡贝拉.千与千寻
2、翻唱“翻唱”是指将已经发表并由他人演唱的歌曲根据自己的风格重新演唱，包括重新填词，编曲。现在已有不少明星，都在翻唱他人的歌，不断在翻唱中突破自己，给大家带来不一样的风格。视频列举：有一种悲伤
使用场景：内容规整的，用列表
先后顺序排序
自定义列表
有序列表（理解）
Ol>li
<ol>
<li type="1">数字：1</li>
<li type="a">小写字母a</li>
<li type="A">大写字母a</li>
<li type="i">小写字母i</li>
<li type="I">大写字母I</li>
<li type="1">数字：6</li>
</ol>
无序列表
ul>li
ul里只能放li 无序列表整体
li里边随便放 无需列表中的一项
无序列表
<ul>
<li type="circle">空心圆circle</li>
<li type="disc">实心圆disc</li>
<li type="square">实心方块square</li>
</ul>
问：无需列表几个标签组成？分别表示什么
无需列表标签嵌套规范是
自定义列表（重要）
dl>dt>dd
H5:一个dl可有多个dd
input 文本框
select 选择框
textarea 文本域 resize:文本区域是否可以调整大小
type属性不同，展示不同效果
Text
password
Radio 单选框
Checkbox
File：有没有上传过照片？
submit
reset
button：默认wu功能，之后配合js使用
单选框功能和默认使用：加name属性，name一样的单选框为一组，一组中只能选一 个
Required(表单必须有内容）
观察别人的表单---input提示字：placeholder=“”
让同学帮忙写文本框
上传多个文件：展示默认不能选中多个
加属性：multiple
新增的input类型：验证的时候必须添加form表单域，点击提交按钮才能验证表单
<form action="#">
<input type="email" name="email" id="">
</form>
H5新增的表单属性：
小米官网搜索框就是autocomplete就是更改为off
：：placeholder {color：}改变提示文字的颜色
下拉选择框 列表形式可以多选
<select name="" multiple="multiple"(以列表形式展示，不写以下拉框显示)>
<option value=""（不写value默认内容的值） selected（默认被选中）></option>
textarea标签
rows：行数设置高度
cols：字符个数设置文本宽度 （后期不用，用css设置宽度）
name：字符串
css之后会禁止拖拽 resize
label标签：扩大xuanze区域，点字也得选中，用label
使用方法：一：1、label把文本抱起来，表单标签加id，label的for属性设置对应的id属性值
er：直接赢label把文本和表单标签全包起来，要删除label中的for属性
以下是一个包含`<form>`元素和常用表单标签的示例，可以作为表单标签的练习。
```html
<!DOCTYPE html>
<html>
<head>
<title>表单标签练习</title>
</head>
<body>
<h1>用户信息注册</h1>
<form action="#" method="post">
<label for="username">用户名：</label>
<input type="text" id="username" name="username" required>
<label for="password">密码：</label>
<input type="password" id="password" name="password" required>
<label for="gender">性别：</label>
<input type="radio" id="male" name="gender" value="male" checked>
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label>
<label for="age">年龄：</label>
<select id="age" name="age">
<option value="" selected>请选择</option>
<option value="15">15岁以下</option>
<option value="15-25">15-25岁</option>
<option value="25-35">25-35岁</option>
<option value="35+">35岁以上</option>
<label for="email">邮箱：</label>
<input type="email" id="email" name="email" required>
<label for="avatar">头像上传：</label>
<input type="file" id="avatar" name="avatar">
<label for="checkbox">爱好：</label>
<input type="checkbox" id="sports" name="hobby" value="sports">
<label for="sports">运动</label>
<input type="checkbox" id="music" name="hobby" value="music">
<label for="music">音乐</label>
<input type="submit" value="提交">
</form>
</body>
</html>
```
该示例包含以下表单标签：
- `<input type="text">`: 单行文本输入框，用于输入用户名和邮箱等信息。
- `<input type="password">`: 密码输入框，用户输入密码时不会显示明文。
- `<input type="radio">`: 单选框，可供用户选择性别。
- `<select>`和`<option>`: 下拉列表框，用于选择年龄段。
- `<input type="file">`: 文件上传框，可用于上传头像等图片。
- `<input type="checkbox">`: 多选框，可供用户勾选爱好。
此外，还使用了`<label>`标签，将表单控件与其描述关联起来，并增加了表单验证功能。其中`required`属性表示该项为必填项，用户未填写时提示用户填写信息。使用`<input type="submit">`实现提交按钮。
get和post的区别：
get参数直接拼接在url上 post参数是保存在body体中
get非常的不安全
Post 相对安全
用https加密网络协议
2、get请求只能上传普通键值对，文件上传功能时，必须使用post请求
3、理论上get请求是有大小要求的，post没有约束
框架标签
<iframe src="https://www.toutiao.com" width="" height="" frameborder="" ></iframe>
frameborder：0或者1 显示与不显示
<iframe src="https://www.baidu.com" width="" height="" frameborder="" ></iframe>:拒绝请求-----有解决方案
<iframe src="https://www.taobao.com" width="" height="" frameborder="" ></iframe>
应用场景：嵌入式广告 news.163.com
图片、pdf
与超链接的target属性配合
<iframe src="https://www.taobao.com" frameborder="0"></iframe>
<iframe src="https://www.baidu.com" frameborder="0"></iframe>
<a href="https://www.taobao.com" target="ww">去淘宝</a>
<iframe name="ww" frameborder="0"></iframe>
与表单的target属性进行关联
<form action="https://so.toutiao.com/search" target="container">
<input type="text" name="keywords">
</form>
<iframe name="container" frameborder="0"></iframe>
无语义标签
div：
无语义，装内容盒子
块级标签 展示独占一行 大盒子
Span
行内标签 在一行显示
不用记，后边高频使用
网页布局
H5新标签
HTML5是HTML的升级版本，新增了很多标签，以下是HTML5常用标签：
1. `<header>`：定义页面或者区域的头部。
2. `<footer>`：定义页面或者区域的底部。
3. `<nav>`：定义导航菜单。
4. `<section>`：用于定义一个区域，通常和`<article>`联合使用。
5. `<article>`：用于定义一篇文章或独立内容块。
6. `<aside>`：定义和页面内容相关的辅助信息，通常用于放置侧栏。
7. `<video>`：用于嵌入视频，可以在其中添加`<source>`标签引入不同格式的视频。
8. `<audio>`：用于嵌入音频，可以在其中添加`<source>`标签引入不同格式的音频。
9. `<canvas>`：用于创造交互式绘画。
10. `<form>`：定义一个表单。
11. `<input>`：定义一个表单中的输入框。
12. `<textarea>`：定义一个文本输入框。
13. `<select>`：定义一个下拉框。
14. `<option>`：定义一个下拉框中的选项。
15. `<progress>`：表示进度条。
<details>关于查看详情出现与隐藏的情况
- <details>
- <summary>标题</summary>
- </details>
以上仅是HTML5标签的一部分，还有很多其他的标签，不同的标签功能会有所区别，根据需要选择不同的标签以达到对页面达到所需效果的要求。
html
<labelfor="file">下载文件：</label><progressid="file"value="60"max="100">60%</progress>
视频：
ie允许自动播放，谷歌不允许（用户体验度） muted
音频：audio
autoplay、muted、loop、src
字符实体
网页不认识多个空格，添加字符实体
  空格
以上就是本篇文章【html学习】的全部内容了，欢迎阅览 ！ 文章地址：http://sicmodule.glev.cn/news/8916.html 资讯 企业新闻 行情 企业黄页 同类资讯 首页 网站地图 返回首页 歌乐夫资讯移动站 http://sicmodule.glev.cn/mobile/ , 查看更多