目 录CONTENT

文章目录

前端三剑客——HTML

smallkun
2022-06-29 / 0 评论 / 0 点赞 / 129 阅读 / 4,227 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-06-29,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我删除。

一、什么是 HTML?

HTML 是用来描述网页的一种语言。

  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
  • HTML 不是一种编程语言,而是一种标记语言 (markup language)
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页

二、常见的浏览器

浏览器 内核 备注
IE Trident IE、猎豹安全、360极速浏览器、百度浏览器
firefox Gecko 可惜这几年已经没落了,打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。
Safari webkit 从Safari推出之时起,它的渲染引擎就是Webkit,一提到 webkit,首先想到的便是 chrome,可以说,chrome 将 Webkit内核 深入人心,殊不知,Webkit 的鼻祖其实是 Safari。
chrome Chromium/Blink 在 Chromium 项目中研发 Blink 渲染引擎(即浏览器核心),内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。大部分国产浏览器最新版都采用Blink内核。二次开发
Opera blink 现在跟随chrome用blink内核。

三、HTML 标签

1、HTML 文档 = 网页

  • HTML 文档描述网页
  • HTML 文档包含 HTML 标签和纯文本
  • HTML 文档也被称为网页

Web 浏览器的作用是读取 HTML 文档,并以网页的形式显示出它们。浏览器不会显示 HTML 标签,而是使用标签来解释页面的内容:

<html>
<body>

<h1>我的第一个标题</h1>

<p>我的第一个段落。</p>

</body>
</html>

2、HTML 基本文档

<!DOCTYPE html>
<html>
<head>
<title>文档标题</title>
</head>
<body>
可见文本...
</body>
</html>

3、HTML头部

元素包含了所有的头部标签元素。在 元素中你可以插入脚本(scripts), 样式文件(CSS),及各种meta信息。

可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, 和 <base>。

4、HTML <title> 元素

<title> 标签定义了不同文档的标题。
<title> 在 HTML/XHTML 文档中是必须的。
<title> 元素:
  • 定义了浏览器工具栏的标题
  • 当网页添加到收藏夹时,显示在收藏夹中的标题
  • 显示在搜索引擎结果页面的标题

一个简单的 HTML 文档:

5、HTML <base> 元素

<base> 标签描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接,可以不加:

<head>
<base href="http://www.runoob.com/images/" target="_blank">
</head>

6、HTML <link> 元素

标签定义了文档与外部资源之间的关系。 标签通常用于链接到样式表:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

7、HTML <style> 元素

<style> 标签定义了HTML文档的样式文件引用地址.
在<style> 元素中你也可以直接添加样式来渲染 HTML 文档:
<head>
<style type="text/css">
    body {background-color:yellow}
    p {color:blue}
</style>
</head>

8、HTML <meta> 元素

meta标签描述了一些基本的元数据。

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

META 元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据。

元数据可以使用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他Web服务。

<meta> 一般放置于 <head> 区域
<meta> 标签- 使用实例

为搜索引擎定义关键词:

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

为网页定义描述内容:

<meta name="description" content="好好学java的网站">

定义网页作者:

<meta name="author" content="itnanls">

每30秒钟刷新当前页面:

<meta http-equiv="refresh" content="30">

语法:

方式一:
<meta charset="utf-8">

方式二:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

说明:http-equiv传送HTTP通信协议的标头。

HTML5 中默认的字符集是 UTF-8。 所有的 HTML 4 处理器都支持 UTF-8,所有的 HTML5 和 XML 处理器都支持 UTF-8 和 UTF-16。

9、HTML <script> 元素

<meta> 标签提供了元数据.元数据也不显示在页面上,但会被浏览器解析。
<script> 元素在以后的章节中会详细描述。

10、基本标签(Basic Tags)

<h1>最大的标题</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>最小的标题</h6>
 
<p>这是一个段落。</p>
<br> (换行)
<hr> (水平线)
<!-- 这是注释 -->

11、文本格式化(Formatting)

<b>粗体文本</b>
<code>计算机代码</code>
<em>强调文本</em>
<i>斜体文本</i>
<kbd>键盘输入</kbd> 
<pre>预格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong>
 
<abbr> (缩写)
<address> (联系信息)
<bdo> (文字方向)
<blockquote> (从另一个源引用的部分)
<cite> (工作的名称)
<del> (删除的文本)
<ins> (插入的文本)
<sub> (下标文本)
<sup> (上标文本)

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>

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; 等同于 > 
F&nbsp; 等同于空格

四、HTML5 新元素

HTML5 新元素

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

为了更好地处理今天的互联网应用,HTML5添加了很多新元素及功能,比如: 图形的绘制,多媒体内容,更好的页面结构,更好的形式 处理,和几个api拖放元素,定位,包括网页 应用程序缓存,存储,网络工作者等,咱们选择一些进行学习。

新多媒体元素

标签 描述
<audio> 定义音频内容
<video> 定义视频(video 或者 movie)

新的语义和结构元素

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

标签 描述
<footer> 定义 section 或 document 的页脚。
<header> 定义了文档的头部区域
<nav> 定义导航链接的部分。
<aside> 定义页面的侧边栏内容。
<time> 定义日期或时间。

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

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

1、浏览器支持

image-20220629230633019

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持 <video>元素.

注意: Internet Explorer 8 或者更早的IE版本不支持 <video> 元素。

2、HTML5 (视频)

如需在 HTML5 中显示视频,您所有需要的是:

实例

<video width="320" height="240" controls>   
    <source src="movie.mp4" type="video/mp4">  您的浏览器不支持Video标签。 
</video>

<video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。
<video> 元素支持多个 <source> 元素. <source> 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式:

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

(1)视频格式与浏览器的支持

当前,<video> 元素支持三种视频格式: MP4, WebM, 和 Ogg:

浏览器 MP4 WebM Ogg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox YES YES YES
Safari YES NO NO
Opera YES (从 Opera 25 起) YES YES
  • MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
  • WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
  • Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

(2)视频格式

格式 MIME-type
MP4 video/mp4
WebM video/webm
Ogg video/ogg

(2)Audio使用

如需在 HTML5 中播放音频,你需要使用以下代码:

实例

<audio controls>   
    <source src="horse.ogg" type="audio/ogg">           <source src="horse.mp3" type="audio/mpeg"> 您的浏览器不支持 audio 元素。 
</audio>

<audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件,浏览器将使用第一个支持的音频文件

control 属性供添加播放、暂停和音量控件。

在<audio> 与</audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本 。

(3)音频格式及浏览器支持

目前,

浏览器 MP3 Wav Ogg
Internet Explorer 9+ YES NO NO
Chrome 6+ YES YES YES
Firefox 3.6+ YES YES YES
Safari 5+ YES YES NO
Opera 10+ YES YES YES

(4)音频格式的MIME类型

Format MIME-type
MP3 audio/mpeg
Ogg audio/ogg
Wav audio/wav

(5)HTML5 Audio 标签

标签 描述
<audio> 定义了声音内容
<source> 规定了多媒体资源, 可以是多个,在 <video> 与 <audio>标签中使用

4、HTML5 新的 Input 类型

HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。

本章全面介绍这些新的输入类型:

  • color

    选择你喜欢的颜色: <input type="color" name="favcolor">
    
  • date

    生日: <input type="date" name="bday">
    
  • datetime

    生日 (日期和时间): <input type="datetime" name="bdaytime">
    
  • datetime-local

    生日 (日期和时间): <input type="datetime-local" name="bdaytime">
    
  • email

    E-mail: <input type="email" name="email">
    
  • month

    生日 (月和年): <input type="month" name="bdaymonth">
    
  • number

    数量 ( 1 到 5 之间 ): <input type="number" name="quantity" min="1" max="5">
    

    使用下面的属性来规定对数字类型的限定:

    属性 描述
    disabled 规定输入字段是禁用的
    max 规定允许的最大值
    maxlength 规定输入字段的最大字符长度
    min 规定允许的最小值
    pattern 规定用于验证输入字段的模式
    readonly 规定输入字段的值无法修改
    required 规定输入字段的值是必需的
    size 规定输入字段中的可见字符数
    step 规定输入字段的合法数字间隔
    value 规定输入字段的默认值
  • range

    <input type="range" name="points" min="1" max="10">
    

    请使用下面的属性来规定对数字类型的限定:

    • max - 规定允许的最大值
    • min - 规定允许的最小值
    • step - 规定合法的数字间隔
    • value - 规定默认值
  • search

    Search Google: <input type="search" name="googlesearch">
    
  • tel

    电话号码: <input type="tel" name="usrtel">
    
  • time

    选择时间: <input type="time" name="usr_time">
    
  • url

    添加您的主页: <input type="url" name="homepage">
    
  • week

    选择周: <input type="week" name="week_year">
    

5、HTML5 新的表单属性

HTML5 的 <form> 和 <input>标签添加了几个新属性.

<input>新属性

  • autocomplete

    自动提示以前输入过的内容

  • autofocus

    autofocus 属性是一个 boolean 属性.

    autofocus 属性规定在页面加载时,域自动地获得焦点。

    First name:<input type="text" name="fname" autofocus>
    
  • height 与 width

    height 和 width 属性规定用于 image 类型的 标签的图像高度和宽度。

    注意: height 和 width 属性只适用于 image 类型的 标签。

    <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
    
  • min 与 max

    min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定(约束)

    注意: Internet Explorer 9及更早 IE 版本,Firefox 不支持 input 标签的 max 和 min 属性。

    <input type="number" name="quantity" min="1" max="5">
    
  • pattern (regexp)

    pattern 属性描述了一个正则表达式用于验证 元素的值。

    Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
    
  • placeholder

    placeholder 属性提供一种提示(hint),描述输入域所期待的值。

    简短的提示在用户输入值前会显示在输入域上

    <input type="text" name="fname" placeholder="First name">
    
  • required

    注意: Internet Explorer 9及更早 IE 版本,或 Safari 不支持 input 标签的 required 属性。

    required 属性是一个 boolean 属性.

    required 属性规定必须在提交之前填写输入域(不能为空)。

    Username: <input type="text" name="usrname" required>
    

<form>新属性:

  • autocomplete

    autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。

    当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项。

  • novalidate

    novalidate 属性是一个 boolean(布尔) 属性.

    novalidate 属性规定在提交表单时不应该验证 form 或 input 域。

0

评论区