HTML5

html5

html5语义化

在HTML5出来之前，我们习惯于用div来表示页面的章节或者不同模块，但是div本身是没有语义的。但是现在，HTML5中加入了一些语义化标签，来更清晰的表达文档结构

<title>      <!--：页面主体内容。-->
<hn>         <!--：h1~h6，分级标题，<h1> 与 <title> 协调有利于搜索引擎优化。-->
<ul>         <!--：无序列表。-->
<li>         <!--：有序列表。-->
<header>     <!--：页眉通常包括网站标志、主导航、全站链接以及搜索框。-->
<nav>         <!--：标记导航，仅对文档中重要的链接群使用。-->
<main>         <!--：页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。-->
<article>    <!--：定义外部的内容，其中的内容独立于文档的其余部分。-->
<section>    <!--：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。-->
<aside>         <!--：定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。-->
<footer>     <!--：页脚，只有当父级是body时，才是整个页面的页脚。-->
<small>      <!--：呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权。-->
<strong>     <!--：和 em 标签一样，用于强调文本，但它强调的程度更强一些。-->
<em>         <!--：将其中的文本表示为强调的内容，表现为斜体。-->
<mark>       <!--：使用黄色突出显示部分文本。-->
<figure>     <!--：规定独立的流内容（图像、图表、照片、代码等等）（默认有40px左右margin）。-->
<figcaption><!--：定义 figure 元素的标题，应该被置于 figure 元素的第一个或最后一个子元素的位置。-->
<cite>       <!--：表示所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。-->
<blockquoto><!--：定义块引用，块引用拥有它们自己的空间。-->
<q>          <!--：短的引述（跨浏览器问题，尽量避免使用）。-->
<time>       <!--：datetime属性遵循特定格式，如果忽略此属性，文本内容必须是合法的日期或者时间格式。-->
<abbr>       <!--：简称或缩写。-->
<dfn>       <!--：定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用。-->
<address>    <!--：作者、相关人士或组织的联系信息（电子邮件地址、指向联系信息页的链接）。-->
    <del>        <!--：移除的内容。-->
<ins>        <!--：添加的内容。-->
<code>       <!--：标记代码。-->
<meter>      <!--：定义已知范围或分数值内的标量测量。（Internet Explorer 不支持 meter 标签）-->
<progress>    <!--：定义运行中的进度（进程）。-->

语义化优点：

易于用户阅读，样式丢失的时候能让页面呈现清晰的结构
有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重
方便屏幕阅读器解析，如盲人阅读器根据语义渲染网页
有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐

html第一行

第一行是

这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么浏览器按照自己的方式解析渲染页面，那么，在不同的浏览器就会显示不同的样式
声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令
在 HTML 4.01 中，声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容，HTML5 不基于 SGML，所以不需要引用 DTD

提示：请始终向 HTML 文档添加声明，这样浏览器才能获知文档类型。

HTML 教程

Untitled

基础

<br> 换行
<hr> 水平线
<!-- comment  --> 注释

<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>

<p>这是一个段落。</p>
<p>这是另外一个段落。</p>

元素和属性

如下面的代码：红色的是元素绿色的是属性

<h1 align="center"> 拥有关于对齐方式的附加信息
<body bgcolor="yellow"> 拥有关于背景颜色的附加信息
<table border="1"> 拥有关于表格边框的附加信息

格式化文本

Untitled

链接 a href

1. 网址链接
<a href="[https://www.runoob.com](https://www.runoob.com/)">这是一个链接</a>
<a href="https://www.runoob.com/" target="_blank" rel="noopener noreferrer">访问菜鸟教程!</a>
<a href="http://www.runoob.com/" target="_top">点击这里!</a>
使用 target 属性，你可以定义被链接的文档在何处显示

2. 图片链接
<a href="http://www.runoob.com/html/html-tutorial.html">
<img  border="10" src="smiley.gif" alt="HTML 教程" width="32" height="32">
</a>

<a href="http://www.runoob.com/html/html-tutorial.html">
<img border="0" src="smiley.gif" alt="HTML 教程" width="32" height="32">
</a>

3. 电子邮件链接
<a href="mailto:someone@example.com?Subject=Hello%20again" target="_top">发送邮件</a>
注意:单词之间空格使用 %20 代替，以确保浏览器可以正常显示文本

在HTML文档中插入ID
<a id="tips">有用的提示部分</a>  

在HTML文档中创建一个链接到 "有用的提示部分(id="tips"）"
<a href="#tips">访问有用的提示部分</a>

或者，从另一个页面创建一个链接到 "有用的提示部分(id="tips"）"
<a href="https://www.runoob.com/html/html-links.html#tips">
访问有用的提示部分</a>

Untitled

头部 head

元素包含了所有的头部标签元素。在元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。可以添加在头部区域的元素标签为: , <style>, <meta>, <link>, <script>, <noscript> 和 <base> <a href="Untitled%200f2a86a12ff947df91b7c581ee3d09be.csv">Untitled</a> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"> 1. <link> 标签通常用于链接到样式表 <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> 2. 在<style> 元素中你也可以直接添加样式来渲染 HTML 文档 <head> <style type="text/css"> body {background-color:yellow} p {color:blue} </style> </head> 3. <meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。 <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript"> <meta name="description" content="免费 Web & 编程教程"> <meta name="author" content="Runoob"> <meta http-equiv="refresh" content="30"> 每30秒钟刷新当前页面 4. <script>标签用于加载脚本文件，如： JavaScript </code></pre></div><h2 id="联动-css">联动 css</h2> CSS 可以通过以下方式添加到HTML中: <ul> <li>内联样式- 在HTML元素中使用 “style” 属性</li> <li>内部样式表 -在HTML文档头部 <head> 区域使用 <style> 元素 来包含CSS</li> <li>外部引用 - 使用外部 CSS 文件</li> </ul> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html">1. 内联样式 <p style="color:blue;margin-left:20px;">左边距</p> <h2 style="background-color:red;">背景颜色</h2> <h1 style="font-family:verdana;">字体</h1> <p style="font-family:arial;color:red;font-size:20px;">字体颜色大小</p> <h1 style="text-align:center;">居中对齐</h1> <a href="http://www.runoob.com/" style="text-decoration:none;">没有下划线的链接</a> 2. 内联样式表 <head> <style type="text/css"> body {background-color:yellow;} p {color:blue;} </style> </head> 3. 外部样式文件 <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> </code></pre></div><img src="Untitled%202.png" alt="Untitled"> <img src="Untitled%203.png" alt="Untitled"> 注意： 在HTML 4, 原来支持定义HTML元素样式的标签和属性已被弃用。这些标签将不支持新版本的HTML标签。不建议使用的标签有: , <center>, <strike>，不建议使用的属性: color 和 bgcolor <h2 id="图像-img">图像 img</h2> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html">1. 插入图像 <img src="/images/logo.png" width="258" height="39" /> 2. alt属性：替换文本。alt 属性用来为图像定义一串预备的可替换的文本。在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。 <img src="boat.gif" alt="Big Boat"> 3. 设置图像的高度与宽度。属性值默认单位为像素 <img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228"> </code></pre></div><h2 id="表格-table">表格 table</h2> 表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等 <a href="Untitled%206a13c3f419a149b7ab7fc4320bd8536b.csv">Untitled</a> <img src="Untitled%204.png" alt="Untitled"> <h2 id="列表-ul-ol-dl">列表 ul ol dl</h2> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html">1. 无序列表 <ul> <li>Coffee</li> <li>Milk</li> </ul> <ul style="list-style-type:circle"> <li>Apples</li> <li>Bananas</li> </ul> 2. 有序列表 <ol> <li>Coffee</li> <li>Milk</li> </ol> <ol type="A"> <li>Apples</li> <li>Bananas</li> </ol> 3. 自定义列表 自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始 <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl> </code></pre></div><a href="Untitled%209873223e0496491aaf4eade44baa8625.csv">Untitled</a> <h2 id="布局-div-span">布局 div span</h2> <a href="Untitled%20f488e046a0d94d938851397a84aaa0e8.csv">Untitled</a> <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据 元素是内联元素，可用作文本的容器。 元素也没有特定的含义。当与 CSS 一同使用时， 元素可用于为部分文本设置样式属性 用div标签布局的例子： <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><div id="container" style="width:500px"> <div id="header" style="background-color:#FFA500;"> <h1 style="margin-bottom:0;">主要的网页标题</h1></div> <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;"> <b>菜单</b><br> HTML<br> CSS<br> JavaScript</div> <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;"> 内容在这里</div> <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;"> 版权 © runoob.com</div> </div> </code></pre></div><img src="Untitled%205.png" alt="Untitled"> 用table布局的例子： 下面的例子使用三行两列的表格，第一和最后一行使用 colspan 属性来横跨两列 <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><table width="500" border="0"> <tr> <td colspan="2" style="background-color:#FFA500;"><h1>主要的网页标题</h1></td> </tr> <tr> <td style="background-color:#FFD700;width:100px;vertical-align:top;"><b>菜单</b><br>HTML<br>CSS<br>JavaScript</td> <td style="background-color:#eeeeee;height:200px;width:400px;vertical-align:top;">内容在这里</td> </tr> <tr> <td colspan="2" style="background-color:#FFA500;text-align:center;">版权 © runoob.com</td> </tr> </table> </code></pre></div><img src="Untitled%206.png" alt="Untitled"> <h2 id="表单和输入-form">表单和输入 form</h2> HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。HTML 表单用于收集用户的输入信息。 <a href="Untitled%208a31c2177c8d4c26bad5ce701348866c.csv">Untitled</a> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html">1. 输入框 <form action=""> Username: <input type="text" name="user"><br> Password: <input type="password" name="password"> </form> 2. 单选和多选框 <form action=""> <input type="radio" name="sex" value="male">男<br> <input type="radio" name="sex" value="female">女 </form> <form> <input type="checkbox" name="vehicle" value="Bike">我喜欢自行车<br> <input type="checkbox" name="vehicle" value="Car">我喜欢小汽车 </form> 3. 提交 submit 当用户单击确认按钮时，表单的内容会被传送到服务器。表单的动作属性 action 定义了服务端的文件名 action 属性会对接收到的用户输入数据进行相关的处理 <form name="input" action="html_form_action.php" method="get"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form> 4. 下拉列表 <form action=""> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat" selected>Fiat</option> </select> </form> 5. 文本框 <textarea rows="10" cols="30"> 我是一个文本框。 </textarea> </code></pre></div><img src="Untitled%207.png" alt="Untitled"> <h2 id="框架-iframe">框架 iframe</h2> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html">1. 使用 <iframe src="URL"></iframe> 2. 设置高度与宽度 height 和 width 属性用来定义iframe标签的高度与宽度。 属性默认以像素为单位, 但是你可以指定其按比例显示 (如："80%") <iframe loading="lazy" src="demo_iframe.html" width="200" height="200"></iframe> 3. 移除边框 <iframe src="demo_iframe.htm" frameborder="0"></iframe> 4. 使用 iframe 来显示目标链接页面（没看懂） <iframe src="demo_iframe.htm" name="iframe_a"></iframe> <p><a href="https://www.runoob.com" target="iframe_a" rel="noopener">RUNOOB.COM</a></p> </code></pre></div><h2 id="颜色-background-color">颜色 background-color</h2> HTML 颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。 每种颜色的最小值是0（十六进制：#00），最大值是255（十六进制：#FF） 常用颜色： <a href="https://www.runoob.com/html/html-colors.html" target="_blank">https://www.runoob.com/html/html-colors.html</a> <img src="Untitled%208.png" alt="Untitled"> 目前所有浏览器都支持以下颜色名。141个颜色名称是在HTML和CSS颜色规范定义的（17标准颜色，再加124）。下表列出了所有颜色的值，包括十六进制值。 <a href="https://www.runoob.com/html/html-colornames.html" target="_blank">https://www.runoob.com/html/html-colornames.html</a> <img src="Untitled%209.png" alt="Untitled"> <h2 id="html-脚本-javascript">Html 脚本 JavaScript</h2> <script>插入脚本的方法 ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com) ```