HTML5基础知识
什么是HTML——超文本标记语言
1.超文本：页面内包含的内容不仅仅是文本，还可以包含图片、链接、音乐、视频等非文字元素。
2.标记语言：不是编程语言
<div></div>
<p></p>
3.后缀名： .html .htm
什么是HTML5？
HTML5（H5）是HTML的下一代标准
HTML产生于1990年
HTML4产生于1997年
HTML5产生于2008年正式发布
HTML5于2012年，基本形成了比较稳定的版本
html开发需要的环境
linux：vi、vim
win：记事本、VS Code（微软开发的支持多系统、开源 、内置了扩展程序的管理功能 使用方便 可以汉化）
sublime：缺点 插件安装困难
等等。。。
浏览器
chrom/firefox主流浏览器
有比较强大的代码调试工具
有一些好用的浏览器插件
作用：
1.用于读取html文件，并将其作为网页显示。
2.用于调试代码
Httpd服务器：httpd是Apache超文本传输协议(HTTP)服务器的主程序。被设计为一个独立运行的后台进程，它会建立一个处理请求的子进程或线程的池
部署写好的html页面，来让用户访问
云服务器-安装-Apache-部署
Browser/Server
用户只需要安装一款主流浏览器，即可访问很多的服务
用户-电脑+手机-浏览器-网页-Server-数据库服务器
HTTP协议
超文本传输协议
URL
统一资源定位符
HTML文档
<!DOCTYPE html>：文档类型 html5
<html ></html>:html的根元素,包含html文件所有元素
<head></head>:包含在head里的内容，不会显示在网页上,这里面通常放一些配置信息,包含编码,作者,页面描述信息,还有js,css的导入 ,编码方式
<body></body>：html文档的内容区域
<title></title>：标签里包含的内容会出现在浏览器标签上
HTML的元素&标签
元素和标签的意思相同,但通常一个元素由两个标签组成
html标签:一般成对出现,标签对大小写不敏感,但html4推荐使用小写.部分标签可以嵌套使用.
块级元素
独占一行空间
用来布局段落,列表,导航菜单等
不要把块级元素嵌套在行内元素里
行内元素
与其他行内元素共享一行空间
一般就是作为段落的一部分
空元素(单标签)
没有内容的元素叫空元素.空元素是在开始标签中结束的
不建议直接使用<br>
建议使用关闭符 <br/>换行 <hr/>水平线 <img src=""/>
替代元素
是指把文件引入html文档中并且用自身的位置来替换
<img>图片
<video>视频
<audio>音频
HTML属性
元素的属性一般在开始标签里.
属性由键值对组成
属性值用双引号括起来.属性与属性之间用空格连接.
<div id="mydiv" class="myclass"></div>
核心属性
id:唯一标识
class:表示当前元素是某一类的元素.
style:规定元素的行内样式.
title:描述元素的信息(光标悬浮时显示)
HTML语法
1. 在html文档中不论有多少空格,都会解析为一个.
2.实体
空格:
< :<
> :>
" :"
' :'
& :&
3.注释 <!-- hello,world -->
注释的作用:一定要多写注释,方便之后自己或者同时查看你的代码.
常用标签（元素）
div 无意义的块级元素，可以自己嵌套自己
p 段落 块级元素 浏览器会自动在p标签前后添加空行。 可以结合br使用（段落内换行）
h1-h6 一级标题到六级标题,浏览器会自动在标题前后添加空行。结合hr使用
文本格式化-css
（以下标签一般不在html内使用）
strong 加粗 强调作用
b 加粗
em 倾斜 强调作用
i 倾斜
u 下划线
sub 下标
sup 上标
<div>
<strong>hello</strong>
<b>hello</b>
<em>world</em>
<i>world</i>
<u>world</u>
10<sub>2</sub>
2<sup>10</sup>
</div>
列表
有序列表 ol>li
序号默认从一开始，但是可以用start属性改变起始值
<ol start="3"> 从3开始
reversed 是单值属性，规定列表顺序为降序。
type="1" 序号类型默认是阿拉伯数字1 还有A a I i 四种值
<ol type="I">
<li>第一点</li>
<li>第二点</li>
<li>第三点</li>
</ol>
<p></p>
<ol type="1" start="3" reversed>
<li>第3点</li>
<li>第2点</li>
<li>第1点</li>
</ol>
无序列表 ul>li
标题是圆形符号，无顺序
<ul>
<li>我们没有顺序</li>
<li>我们只有点</li>
<li>圆圆的标题</li>
</ul> 
自定义列表 dl>dt、dd
<dl>
<dt>我是标题</dt>
<dd>自定义列表</dd>
<dd>自定义列表</dd>
<dd>自定义列表</dd>
</dl> 
超链接 a标签
<a href="https：baidu.com">百度一下</a>
<a href="mailto:1099913743@qq.com" target="_blank">联系我</a>
绑定目标与元素的id值 实现锚点跳转
<a href="#header">返回顶部</a>
属性：
href：跳转的目的地
target：_self/_blank 打开新页面
图片
<img src="" alt="">
src：图片的地址（必填项）
alt：图片地址出错时 会显示alt的内容
title：鼠标悬浮时出现。
width
height
视频
video
<video src="../video/video.mp4" controls autoplay muted loop></video>
controls:是否显示控制条
loop:是否循环播放（播放结束后从头开始播放）
muted:是否静音播放
autoplay:是否自动播放
音频
audio
<audio src="./video/audio.mp3" controls autoplay muted loop></audio>
controls:是否显示控制条
loop:是否循环播放（播放结束后从头开始播放）
muted:是否静音播放
autoplay:是否自动播放
<!-- 高亮 -->
<mark>其它标签-mark</mark>
<!-- 引用 -->
<cite>其它标签-cite</cite>
<!-- 强调 -->
<em>其它标签-em</em>
<!-- 斜体 -->
<i>其它标签-i</i>
<!-- 缩略词 -->
<abbr title="2021年8月3日星期二">星期二</abbr>
mark：高亮
cite：引用
em： 强调
i： 斜体
abbr：缩略词，鼠标悬浮到缩略词上就能看到title里的文字
H5语义化标签
1.header
具有引导和导航作用的一个元素，通常来放置logo、搜索栏、标题、导航
2.nav
可以用作页面导航的链接组，其中导航元素链接到其他页面，或者当前页面的其他部分。
3.article
代表文档，页面中独立完整的可被外部引用的内容。也可以嵌套使用。
4.aside
用来表示当前页面或文章的附属信息部分，它可以包含侧边栏，广告，导航条以及其他有别于主要内容的部分
5.footer
通常包含作者信息、其他相关链接、版权信息等内容。
6.address
用来呈现文档的联系信息。作者的联系信息、地址、邮箱、电话等。
7.section
类似div 作为html的独立功能。
8.details
详细信息展现元素,可创建一个挂件，仅在被切换成展开状态时，它才会显示内含的信息。<summary> 元素可为该部件提供概要或者标签。
summary
用作 一个<details>元素的一个内容的摘要，标题或图例。
<details>
<summary>联系我：</summary>
<p>邮箱：rendc@briup.com</p>
<p>电话：12345677654</p>
<p>地址：浦东软件园（昆山园）</p>
</details>
9.figure
可附标题内容元素，通常，<figure>是图像，插图，图表，代码片段等，在文档的主流程中引用，但可以移动到文档的另一部分或附录而不影响主流程。
<figcaption> 元素 是与其相关联的图片的说明/标题，用于描述其父节点 <figure> 元素里的其他数据。这意味着 <figcaption> 在<figure> 块里是第一个或最后一个。同时 HTML Figcaption 元素是可选的；如果没有该元素，这个父节点的图片只是会没有说明/标题
<figure>
<img src="../../Axure/day04/er-code.png" alt="图片丢失了">
<img src="../../Axure/day04/er-code.png" alt="图片丢失了">
<figcaption>扫码了解产品详情</figcaption>
</figure>
H5语义化标签 除了语义之外，与div完全相同
对于搜索引擎比较友好
语义化的代码可读性较高
方便其它设备解析，比如盲人阅读器根据语义来解析这个页面
表格
标签：
table
thead
tr>th
tbody
tr>td
tfoot
属性：
align： left center right
border： 整数 px
cellpadding：内容与单元格之间的距离
cellspacing：单元格与单元格之间的距离
width：设定表格宽度
bgcolor：设定表格背景色
colspan 跨列合并
rowspan 跨行合并 注意合并之后删除要合并的那个单元格
caption
作为table的子元素，表示表格的标题信息。
colgroup
列分组，定义表中的一组列，作为table的子元素，同时放在caption的后边，其他元素的前边
col
经常作为colgroup的子元素，有span属性（即规定几列为同一列，一样的属性）
表单
主要用于用户web服务器进行交互
action
URL 用来处理表单信息的服务器地址
method
浏览器用来提交表单的http方式，常用的是get/post
get
通过这种方式提交的表单数据会被附加在链接上，通过“?”分割
post
通过post方法提交表单数据会存放在请求报文的体部，传递给服务器。
name
设置表单的名称。
target:_blank/_self
当method为post时，表单内容提交给服务器时的内容类型enctype
默认：application/x-www-form-urlencoded
当表单中有文件内容时:multipart/form-data
input:
用于接收来自用户的数据
name:用于设定控件名和提交数据的属性名
value:用于控件的初始化 默认值等功能(可选)
checked:单选框和复选框 默认选中属性
disabled:禁用组件 禁用后的组件的值也不可提交.
hidden:隐藏组件但是隐藏后的组件值会被提交.
size:控件的初始宽度,单位是像素px,但是text和password除外,text/password中size是指字符的数目.
maxlength:可输入字符的数量最大值
min
max
select:
用于表示列表或者下拉列表.
multiple 指定控件类型(列表)
size 如果multiple 生效,size表示同时展示的行数.
name
optgroup 包含option后形成选项组
label 指选项组的名称
option 用于表示选项 包含在select或optgroup中
disabled 表示禁用组件，禁用组件的值不能被提交
value 定义控件的初始值，提交表单时，初始值会被提交
selected 默认被选中的项
eg:<option disabled selected value="">请选择</option>
textarea
没有value属性
rows 文本框的初始行数
cols 文本框的初始列数
disabled 禁用
readonly 只读，但是值可以提交
name
fieldset 在一个表单中对多个控件或标签进行分组
属性 disabled 直接禁用整个分组中的控件
<legend> 是分组的标题
progress
进度条
max 默认值 1
value 0-1之间 小数
<progress value="70" max="100"></progress>70%
output
表示用户动作产生的结果
<form οninput="result.value=num.value*num.value">
<input type="number" name="num">的平方=
<output name="result"></output>
</form>
meter
<meter max="100" low="60" high="90" value="40"></meter>40 绿色
<meter max="100" low="60" high="90" value="65"></meter>65 黄色
<meter max="100" low="60" high="90" value="95"></meter>95 红色
datalist
表示其它控件可用的值
与select做对比
1. select选中后显示的是文本内容 datalist显示value
2. 提交的时候都是提交value
3. 在firefox上只显示内容，在chrome上显示内容和value
H5中对input的扩展
autofocus 选中
placeholder="请输入用户名" 提示文本
required 必须填写
pattern="1\d{10}" 以1开头 后边是十个数字
maxlength="11"
扫一扫
780
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
