文章来源于网络收集而来，版权归原创者所有，如有侵权请及时联系！

HTML5

发布于 2024-06-15 14:30:40 字数 23809 浏览 0 评论 0 收藏 0

Hyper Text Markup Lgurage [TOC] 52个标记+文本内容。使用<标记></标记> 没有循环，分支结构。可以嵌套，不能交叉不区分大小写，建议全小写可以声明属性，key="value" 单引号，双引号，不带引号都行。

所有标签都具有的属性。 id：整个文档唯一，否则会失效 class：类标签，可以有多个 style：执行css样式 title：标签的标题。鼠标悬停时，弹出提示。

单标记标签双标记标签

布局的三种方式

table 布局 (过时)
div + css (当先主流)
html5 标签

html 文档分为三大部分

文档类型声明 <!DOCTYPE html>
元数据 <head>：提供给浏览器的信息
内容 body: 用于显示的内容。

html5 的文档结构

<!DOCTYPE html> <!-- 文档类型声明。html5 使用简化的文档声明，非常方便识别 -->
<!-- 告诉浏览器处理的是HTML文档，这是用布尔属性表达的。 -->
<html> <!-- html根标签，文档主体。告诉浏览器自此到 结束标签间的内容都应该当做html处理
有了DOCTYPE 后接着使用html标签感觉有点奇怪，这是因为在web早期，还有其他同等地位的标记
语言，文档中可能混合使用多种标记语言。-->
<!-- 如今html已经占据了绝对优势，即使省略 DOCTYPE 和 html 标签，绝大多数浏览器都会假定
自己处理的是 html 语言。 -->
<head> <!-- 元数据：文档说明，给浏览器解析和搜索引擎爬取的信息。不会显示 -->
    <title>显示在浏览器菜单栏的title</title> <!-- 可选。用于显示在窗口的标题栏上，或者文档标签页的标签位置上。 -->
<meta name="key" content="value"/> 单标记标签
</head>
<body> <!-- 文档内容，告诉浏览器要向用户显示的内容 -->

</body>
</html>

元数据

html 文档的元数据用来向浏览器提供文档的一些信息。元数据包含在 head 内部。

body

向用户展示的内容。

元素结构

HTML 标签是允许并列和嵌套的，为了描述他们之间的关系，就有一些名词需要明确

父元素：包含另一元素的元素是被包含元素的父元素。
子元素：被包含元素是包含元素的子元素，一个元素可以拥有多个子元素，但只能有一个父元素。
后代元素：包含在其他元素中的元素也可以包含其他元素，这些元素都是外城元素的后台元素。
兄弟元素：拥有同一个父元素额几个元素互为兄弟元素。

元素之间关系的重要性体现在，一个元素能以什么样的元素为父元素或子元素是有限制的。

全局属性

html 转移字符

形式 &xxx < less then 小于号 > greter than 大于号空格 & &符号 &hr; © ©️

注释

注释不能嵌套

<!-- 内容 -->

请求头

Content-Type: text/html; charset=UTF-8 内容的数据类型和编码

三种修改方式：

动态语言生成
服务器配置文件
在html 中使用meta 设置响应头等价物，它并不能改变响应头，只是能够告诉浏览器解析html的方式。起到和响应头相同的作用
响应头

分类

区块元素 block：独占一行内联元素 in-line: 包裹内容

标题字在不同浏览器中的大小和间距是不同的。

段落

元素分组、分块行内分区，没有任何样式效果，用于单独加样式。

元素分类在讲解CSS布局之前，我们需要提前知道一些知识，在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。

常用的块状元素有：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<li>、<table>、<address>、<blockquote> 、<form>

常用的内联元素有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

常用的内联块状元素有：

<img>、<input>

块级元素

块级元素都具备盒子模型的特征。

块级元素特点：

每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
元素的高度、宽度、行高以及顶和底边距都可设置。
元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。可以设置margin和padding属性。

元素的块和内联并不是固定的，只是根据默认属性划分的。可以通过 css 属性的 display: inline 将块级元素变成内联的，也可以通过display: block 将内联的元素变成块级显示。

内联元素

内联元素特点：

多个行内元素排成一行，直到一行排不下，才会换新一行；
元素的高度、宽度及顶部和底部边距不可设置；不能设置width和height；只可以设置水平方向的边距，如：margin-left,margin-right,padding-left,padding-right.
元素的宽度就是它包含的文字或图片的宽度，不可改变。

内联块状元素

display:inline-block inline-block 元素特点：

和其他元素都在一行上；
元素的高度、宽度、行高以及顶和底边距都可设置。

inline-block{ 简而言之就是让元素既可以在一行内显示，又可以设置宽高边距等。

}

html5新增标签与删除标签

新增标签

1.结构标签（块状元素）——有意义的div

<article> 　　标记定义一篇文章
<header> 　　标记定义一个页面或一个区域的头部
<nav> 　　标记定义导航链接
<section>　　　　标记定义一个区域
<aisde>　　　　标记定义页面内容的侧边栏
<hgroup>　　　　标记定义文件中一个区块的相关信息
<figure>　　　　标记定义一组媒体内容以及他们的标题
<figcaption>　　　标记定义figure元素的标题
<footer> 　　　　标记定义一个页面或一个区域的底部
<dialog>　　　　标记定义一个对话框（会话框）类似微信

2.多媒体标签

<video> 　　标记定义一个视屏
<audio> 　　标记定义音频内容
<source> 　　标记定义媒体资源
<canvas> 　　标记定义图片
<embed> 　　标记定义外部的可交互的内容或插件，比如flash　　标签的意义：多媒体标签的出现意味着多媒体的发展以及支持不适用插件的情况下即可操作媒体文件，极大提升了用户体验。

3.Web应用标签

状态标签
<meter> 　　　　 实时状态显示：气压、气温。
<progress> 　　　　 任务过程：安装、 加载。列表标签
<datalist> 　　　　 为input标记定义一个下拉列表，配合option F 、O
<details> 　　　　 标记定义一个元素的详细内容，配合summary　　CMenu
<menu> 　　　　 命令列表（目前所有的主流浏览器都不支持）
<menuitem> 　　　　menu命令列表的标签（只有FireFox9.0+支持）
<command> 　　　　 menu标记定义一个命令按钮（只有IE9支持）

4.其他标签

注释标签

<ruby> 标记定义注释或音标
<rp> 告诉那些不支持ruby的元素的浏览器如何去显示
<et> 标记定义对rubyd 注释内容文本

其他标签

<mark> 标记定义有标记的文本（黄色选中状态）
<output> 标记定义一些输出类型，计算表单结果配合oninput事件
<keygen> 标记定义表单里生成的键值（加密信息传送）
<time> 标记定义一个日期/时间，目前所有主流的浏览器都不支持

删除标签

纯表现的元素

besefont、 big、center、 font、s、strike、tt、u

对可用性产生负面影响的元素

frame、frameset、noframes

产生混肴的元素

acronym、 applet、 isindex、dir

重定义标签

显示不变，只是表达的含义进行了重新定义的标签

 代表内联文本，通常是粗体，没用传递表示重要的意思  代表内联文本，通常是斜体，没有传递表达重要的意思 <dd> 可以同detailsy与figure一同使用，定义包含文本，dialog亦可使用 <dt> 可以同details与figrue一同使用，汇总细节，dialog也可用 <hr> 表示主题结束，而不是水平线，虽然显示相同 <menu> 重新定义用户界面的菜单，配合commond或者menuitem使用  表示小字体，例如打印注释或则法律条款  表示重要性而不是强调符号 <hr /> horizontal ruler 横线   blank row 空行

hr 后面的 / 就是xhtml规定的结束标注，根本不是没有结束标志，因为html中的hr是一个空标签，在xhtml中要求空标签必须结束，所有就在前面加一个/, 其实 也是可以的，但是为了应对所有浏览器的兼容性，最好在“/” 前面加上一个空格.以上。

<address> （比如电子邮件地址）、签名或者文档的作者身份

<code> 代码在文章中一般如果要插入多行代码时不能使用 <code> 标签了。如果是多行代码，可以使用 <pre> 标签。作用是防止浏览器误认为是要执行代码，而没显示代码。加了标签浏览器就不会执行了，而是像文本一样显示出来

<pre>标签不只是为显示计算机的源代码时用的，在你需要在网页中预显示格式时都可以使用它，只是<pre>标签的一个常见应用就是用来展示计算机的源代码。

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

列表为空，暂无数据