一文带你了解前端三剑客之HTML（二）

9、HTML

标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。

更小的文本

重要的文本

（缩写）

（联系信息） （文字方向）

（从另一个源引用的部分） （工作的名称） （删除的文本） （插入的文本） （下标文本） （上标文本） ```

12、链接（Links）

普通的链接：<a href="http://www.example.com/">链接文本</a>
图像链接： <a href="http://www.example.com/"><img src="URL" alt="替换文本"></a>
邮件链接： <a href="mailto:webmaster@example.com">发送e-mail</a>
书签：
<a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>

13、图片（Images）

<img loading="lazy" src="URL" alt="替换文本" height="42" width="42">

14、样式/区块（Styles/Sections）

<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
<div>文档中的块级元素</div>
<span>文档中的内联元素</span>

15、无序列表

<ul>    
    <li>项目</li>    
    <li>项目</li> 
</ul>

16、有序列表

<ol>    
    <li>第一项</li>    
    <li>第二项</li> 
</ol>

17、定义列表

<dl>  
    <dt>项目 1</dt>    
    <dd>描述项目 1</dd>  
    <dt>项目 2</dt>    
    <dd>描述项目 2</dd> 
</dl>

18、表格（Tables）

<table border="1">  
    <thead>
        <tr>     
            <th>表格标题</th>     
            <th>表格标题</th>   
        </tr>
    </thead>
    <tbody>
       <tr>     
         <td>表格数据</td>     
         <td>表格数据</td>   
       </tr> 
    </tbody>
</table>

19、框架（Iframe）

<iframe src="https://www.itnanls.cn"></iframe>

表单算是HTML的核心啦

20、表单（Forms）

<form> 
    <input type="text" name="email" size="40" maxlength="50"> 
    <input type="password"> 
    <input type="checkbox" checked="checked"> 
    <input type="radio" checked="checked"> 
    <input type="submit" value="Send"> 
    <input type="reset"> <input type="hidden"> 
    <select> 
        <option>苹果</option> 
        <option selected="selected">香蕉</option> 
        <option>樱桃</option> 
    </select> 
    <textarea name="comment" rows="60" cols="20"></textarea>  
</form>

实体部分大家简单记一下就好啦 会用就行

21、实体（Entities）

&lt; 等同于 < 
&gt; 等同于 > 
&nbsp; 等同于空格

四、HTML5 新元素

HTML5 新元素 可以简化我们的的开发后续,当然后续学习css会有更进一步的美化

自1999年以后HTML 4.01 已经改变了很多,今天，在HTML 4.01中的几个已经被废弃，这些元素在HTML5中已经被删除或重新定义。HTML5 在 2012 年已形成了稳定的版本

为了更好地处理今天的互联网应用，HTML5添加了很多新元素及功能，比如: 图形的绘制，多媒体内容，更好的页面结构，更好的

形式 处理，和几个api拖放元素，定位，包括网页 应用程序缓存，存储，网络工作者等，咱们选择一些进行学习。

新多媒体元素

新的语义和结构元素

HTML5提供了新的元素来创建更好的页面结构：

当然html还有很多新增的标签和特性，有兴趣可以去看看

还有html5还移除了一部分标签，这里不再赘述。

1、浏览器支持

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持

注意: Internet Explorer 8 或者更早的IE版本不支持

2、HTML5 (视频)

如需在 HTML5 中显示视频，您所有需要的是：

实例

<video width="320" height="240" controls>   
    <source src="movie.mp4" type="video/mp4">  您的浏览器不支持Video标签。 
</video>
<video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。
<video> 元素支持多个 <source> 元素. <source> 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式：

同时 元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。

（1）视频格式与浏览器的支持

当前， 元素支持三种视频

• MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
• WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
• Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

（2）视频格式