HTML系列

塔尖遥望者

已于 2024-05-15 13:33:26 修改

阅读量35

点赞数 1

文章标签： html5 前端

于 2023-01-30 14:56:18 首次发布

本文链接：https://blog.csdn.net/very_good_luck/article/details/128801955

版权

HTML

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>title</title>
        <style type="text/css">
 
        </style>
    </head>
    <body>
        <div>
            
        </div>
    </body>
    <script type="text/javascript">
 
    </script>
</html>

后缀名

.html
.htm

以上两种后缀名没有区别，都可以使用。

什么是HTML

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

HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面

网页三要素

1.HTML标签:负责展示文字,图片,视频,音频,是动静态网页的基础构成部分.

2.CSS层叠样式表:负责网页的布局.例如:字体,颜色,间距.

3.JavaScript脚本:负责网页与用户交互.

剖析解释

1.定义

DOCTYPE标签是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档。

声明必须是 HTML 文档的第一行，位于标签之前。

2.作用：

声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。

document.compatMode：

BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。

CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。

这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat，浏览器按照自己的方式解析渲染页面，那么，在不同的浏览器就会显示不同的样式。

如果你的页面添加了那么，那么就等同于开启了标准模式

那么浏览器就得老老实实的按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。这就是的作用。

html

html标签是网页中最大的标签快。所有跟网页相关的信息，都需要放在此标签中。

head

head标签负责网页的设置信息。例如网页的标题等。

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

可以添加在头部区域的元素标签为:

title

定义了浏览器工具栏的标题
当网页添加到收藏夹时，显示在收藏夹中的标题
显示在搜索引擎结果页面的标题

style

标签定义了HTML文档的样式文件引用地址

在元素中你也可以直接添加样式来渲染 HTML 文档:

<head>
    <style type="text/css">
        body {
            background-color:yellow;
        }
        p {
            color:blue
        }
    </style>
</head>

link

标签定义了文档与外部资源之间的关系。标签通常用于链接到样式表:

<link rel="stylesheet" type="text/css" href="mystyle.css">

favicon 图标

使用方法一：把 ico 图标文件命名为 favicon.ico ,放在网站根目录下，网页会自动获取 ico 图标。

使用方法二：在网页中使用 link 标签自行引入 ico 文件。

<link rel="shortcut icon" type="images/x-icon" href="favicon.ico">

favicon 图标的制作

script

标签用于加载脚本文件，如： JavaScript

noscript

noscript 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。

元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。

只有在浏览器不支持脚本或者禁用脚本时，才会显示元素中的内容

<script>
    document.write("Hello World!")
</script>
<noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>

base

标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:

<head>
    <base href="http://www.runoob.com/images/" target="_blank">
</head>
页面中使用
<a href="">连接</a>   =====使用的是全局的地址

body

页面的书写区间~~~~不做详细描述了（标签的天堂）

script

js代码的书写区间~~~~不做详细描述了（语法的天堂）

跨界创建方式

emmet插件，专门用来生成各种各样的代码的

* 生成相同标签的数量
{ } 标签内自带文本
$ 自增符号，可用于文本与标签，属性
[ ] 用于添加属性 id/class/style.....等
+ 兄弟关系
> 父级关系

tab 自动生成

方式一

h1*6

    <h1></h1>
    <h1></h1>
    <h1></h1>
    <h1></h1>
    <h1></h1>
    <h1></h1>

方式二

h1*6>{一级标题}
{文本内容}
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>

方式三

h$*6>{$级标题}
$是自增
    <h1>1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>
    <h6>6级标题</h6>

方式四

((h2[id='echarts$']>{章节$})+p>{lorem100})*6

或者
((h2[id='echarts$' class='box$' style='width:10px']>{章节$})+p>{lorem100})*6

    <h2 id="echarts1">章节1</h2>
    <p>lorem100</p>
    <h2 id="echarts2">章节2</h2>
    <p>lorem100</p>
    <h2 id="echarts3">章节3</h2>
    <p>lorem100</p>
    <h2 id="echarts4">章节4</h2>
    <p>lorem100</p>
    <h2 id="echarts5">章节5</h2>
    <p>lorem100</p>
    <h2 id="echarts6">章节6</h2>
    <p>lorem100</p>
    
    或
    <h2 id="echarts1" class="box1" style="width:10px">章节1</h2>
    <p>lorem100</p>
    <h2 id="echarts2" class="box2" style="width:10px">章节2</h2>
    <p>lorem100</p>
    <h2 id="echarts3" class="box3" style="width:10px">章节3</h2>
    <p>lorem100</p>
    <h2 id="echarts4" class="box4" style="width:10px">章节4</h2>
    <p>lorem100</p>
    <h2 id="echarts5" class="box5" style="width:10px">章节5</h2>
    <p>lorem100</p>
    <h2 id="echarts6" class="box6" style="width:10px">章节6</h2>
    <p>lorem100</p>

乱数假文

lorem ~~无用的文字

<b>这个文本是加粗的</b>
<strong>这个文本是加粗的</strong>
<big>这个文本字体放大</big>
<small>这个文本是缩小的</small>
<em>这个文本是斜体的</em>
<i>这个文本是斜体的</i>
这个文本包含<sub>下标</sub>
这个文本包含<sup>上标</sup>
<p>该段落文字从左到右显示。</p>  
<p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p>  


<-- 删除字/插入字 -->
<del>blue</del> 
<ins>red</ins>
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>




<code>计算机输出</code>
<kbd>键盘输入</kbd>
<tt>打字机文本</tt>
<samp>计算机代码样本</samp>
<var>计算机变量</var>


<-- 控制空格标签 -->
<pre>
此例演示如何使用 pre 标签
对空行和    空格
进行控制
</pre>


<--缩写  abbr / acronym-->
<abbr title="etcetera">etc.</abbr>
<acronym title="World Wide Web">WWW</acronym>

超链接

<a href="url">链接文本</a>
href 属性描述了链接的目标。
为空,表示回到顶部且刷新; 
为#,表示回顶部,不刷新;
为### 表示无效果.

href

1.普通链接

普通地址,例如百度

2.锚链接

id属性:全局属性,表示元素在文档中的唯一编号

3.功能链接

点击之后,出发某个功能:

执行js代码——javascript:

发送邮件——mailto:

<a href='mailto:邮箱地址'> 发送邮件 </a> 需要用户计算机上安装邮件发送软件

拨打电话——tel:

<a href='tel:电话号码'> 拨打电话 </a> 移动端触发或用户计算机上安装有拨号软件

target

_self：默认，当前页面跳转。

_blank：新窗口打开。
_parent：在父窗口中打开链接。
_top：在当前窗体打开链接，并替换当前的整个窗体(框架页)

属性

属性	值	描述
charset	char_encoding	HTML5 不支持。规定目标 URL 的字符编码。
coords	coordinates	HTML5 不支持。规定链接的坐标。
downloadNew	filename	指定下载链接
href	URL	规定链接的目标 URL。
hreflang	language_code	规定目标 URL 的基准语言。仅在 href 属性存在时使用。
mediaNew	media_query	规定目标 URL 的媒介类型。默认值：all。仅在 href 属性存在时使用。
name	section_name	HTML5 不支持。规定锚的名称。
rel	alternate author bookmark help license next nofollow noreferrer prefetch prev search tag	规定当前文档与目标 URL 之间的关系。仅在 href 属性存在时使用。
rev	text	HTML5 不支持。规定目标 URL 与当前文档之间的关系。
shape	default rect circle poly	HTML5 不支持。规定链接的形状。
target	_blank _parent _self _top framename	规定在何处打开目标 URL。仅在 href 属性存在时使用。 _blank：新窗口打开。 _parent：在父窗口中打开链接。 _self：默认，当前页面跳转。 _top：在当前窗体打开链接，并替换当前的整个窗体(框架页)。
type New	MIME_type	规定目标 URL 的 MIME 类型。仅在 href 属性存在时使用。注：MIME = Multipurpose Internet Mail Extensions。

注

设置 target 属性时， top 与 parent 的打开方式十分类似，需仔细区分。

比如网 A 中镶嵌了 iframe 网页 B，网页 B 又镶嵌了 iframe 网页C。

如果网页 C 中连接设置 target=_parent，则跳转将网页 B 去掉直接在 A 中嵌入网页 C 中链接页面。

如果网页 C 中 target=_top ，则直接跳出所有 iframe 框架，直接转向 C 中链接页面。

图像标签

<img decoding="async" src="smiley-2.gif" alt="Smiley face" width="42" height="42">

标签有两个必需的属性：src 和 alt。

注释：从技术上讲，图像并不会插入 HTML 页面中，而是链接到 HTML 页面上。

属性	值	描述
align	top bottom middle left right	HTML5 不支持。HTML 4.01 已废弃。规定如何根据周围的文本来排列图像。
loading	eager：立即加载 lazy：延迟加载	指定浏览器是应立即加载图像还是延迟加载图像。
alt	text	规定图像的替代文本。
border	pixels	HTML5 不支持。HTML 4.01 已废弃。规定图像周围的边框。
crossorigin New	anonymous use-credentials	设置图像的跨域属性
height	pixels	规定图像的高度。
hspace	pixels	HTML5 不支持。HTML 4.01 已废弃。规定图像左侧和右侧的空白。
ismap	ismap	将图像规定为服务器端图像映射。
longdesc	URL	HTML5 不支持。HTML 4.01 已废弃。指向包含长的图像描述文档的 URL。
src	URL	规定显示图像的 URL。
usemap	#mapname	将图像定义为客户器端图像映射。
vspace	pixels	HTML5 不支持。HTML 4.01 已废弃。规定图像顶部和底部的空白。
width	pixels	规定图像的宽度。

图像映射

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>

表格

<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

列表

有序

无序

定义列表

表单

input type 类型

button checkbox color date datetime datetime-local email file hidden image month number password radio range reset search submit tel text time url week

框架

<iframe loading="lazy" src="demo_iframe.htm" width="200" height="200"  frameborder="0"></iframe>

练习：切换 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>
注意 iframe 的 name    a标签的 target

iframe 创建包含另外一个文档的内联框架(即行内框架)，简而言之，iframe标签是框架的一种形式，一般用来包含别的页面。

一、使用iframe的优缺点

优点:

1.iframe能够把嵌入的网页原样展现出来；

2.模块分离，便于更改，如果有多个网页引用iframe，只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷；

3.网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，增加代码的可重用；

4.如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决；

5.重载页面时不需要重载整个页面，只需要重载页面中的一个框架页；

6.方便制作导航栏。

缺点:

1.样式和脚本需要额外链入，调用外部页面,需要额外调用css,增加页面额外的请求次数，增加服务器的http请求；

2.代码复杂，在网页中使用框架结构最大的弊病是搜索引擎的“蜘蛛”程序无法解读这种页面，会影响搜索引擎优化，不利于网站排名；

3.框架结构有时会让人感到迷惑，滚动条除了会挤占有限的页面空间外会使iframe布局混乱，还会分散访问者的注意力，影响用户体验；

4.链接导航疑问。运用框架结构时，必须保证正确配置所有的导航链接，否则，会给访问者带来很大的麻烦。比如被链接的页面出现在导航框架内，这种情况下访问者便被陷住了，因为此时他没有其他地点可去；

5.产生多个页面，不易管理；

6.多数小型的移动设备（PDA 手机）无法完全显示框架，设备兼容性差。

二、为什么尽量少用iframe

iframes提供了一个简单的方式把一个网站的内容嵌入到另一个网站中。iframe的创建比其它包括scripts和css的 DOM 元素的创建慢了1-2个数量级。

使用iframe的页面一般不会包含太多iframe，所以创建DOM节点所花费的时间不会占很大的比重。但带来一些其它的问题：onload事件以及连接池(connection pool)，即iframe会阻塞主页面的Onload事件及iframe和主页面共享连接池，会影响页面的并行加载。

1.iframes阻塞页面加载，影响网页加载速度

及时触发 window 的 onload 事件是非常重要的。onload 事件触发使浏览器的 “忙” 指示器停止，告诉用户当前网页已经加载完毕。当 onload事件加载延迟后，它给用户的感觉就是这个网页非常慢。

window的onload 事件需要在所有 iframe 加载完毕后(包含里面的元素)才会触发，就会影响网页加载速度。通过 JavaScript 动态设置 iframe的SRC可以避免这种阻塞情况。

2.唯一的连接池

对每个 web 服务器来说，浏览器只打开极少的几个连接数。老的浏览器，包括 IE 6/7 和 Firefox 2，每个主机只有2个连接。在新的浏览器中，连接数增加鸟。Safari 3+和Opera 9+增至4个，Chrome 1+、IE 8及Firefox 3增至6个。

在大多数浏览器中，连接被主页面和它的 iframe所共享，这意味着有可能iframe中的资源占用了可用连接而阻塞了主页面的资源加载。如果iframe中的内容同等重要，或比主页面更重要，这很好。然而在通常情况下iframe中的内容对页面来说不太重要，iframe 占用连接数是不可取的。一个解决方案是在优先级更高的资源下载完成后再动态的给iframe的src赋值。

总之，iframe会给你的页面性能带来冲击，尽可能不使用iframe，当确实需要时，谨慎地使用他们。目前框架的优点可以使用Ajax实现，这在某种角度也是一种替代方案。

三、iframe的一些应用场景

iframe的页面和父页面（parent）是分开的，所以它意味着，这是一个独立的区域，不受 parent的CSS或者全局的JavaScript的影响。

1.典型的，比如所见即所得的网页编辑器；

2.跨域通信。JavaScript跨域总结与解决办法，类似的还有浏览器多页面通信，比如音乐播放器，用户如果打开了多个tab页，应该只有一个在播放；

3.历史记录管理，解决ajax化网站响应浏览器前进后退按钮的方案，在html5的history api不可用时作为一种替代；

4.纯前端的utf8和gbk编码互转。比如在utf8页面需要生成一个gbk的encodeURIComponent字符串，可以通过页面加载一个gbk的iframe，然后主页面与子页面通信的方式实现转换；

5.用iframe实现无刷新文件上传，在FormData不可用时作为替代方案；

6.创建一个全新的独立的宿主环境。iframe还可以用于创建新的宿主环境，用于隔离或者访问原始接口及对象，比如有些前端安全的防范会覆盖一些原生的方法防止恶意调用，通过创建一个iframe，然后从iframe中取回原始对象和方法来破解这种防范；

7.用来加载广告，例如联盟广告；

8.一般邮箱使用iframe，如QQ邮箱；

9.一些简单的后台页面。

关于iframe在跨域的使用，这里稍微强调一下

首先，我们要了解什么是跨域。简单地理解就是因为JavaScript同源策略的限制，a.com 域名下的js无法操作b.com或是c.a.com域名下的对象。JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象，但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。网络上已经有非常多可行的方案，我们只限定在iframe中去讲解几种跨域方案。

1、document.domain+iframe的设置

document.domain，这是浏览器暴露出来的一个准只读属性（之所以说它是准只读属性，是因为它可以设置为当前域名的超级域），利用这个特性，可以实现主域名相同子域名不同的网页实现通信。

2.使用HTML5 postMessage

HTML5提供的API，可以安全的启用跨域通信。

语法:targetWindow.postMessage(data, targetOrigin)，data参数是指要传递的数据。

如何在目标窗口接收到数据呢？编写如下代码即可：

window.addEventListener('message', function(evt) {

    console.log(evt.data);

}, false);

evt.data即是postMessage中传递过来的数据。

特别注意两点

1.如果是协议和端口造成的跨域问题“前台”是无能为力的。

2.在跨域问题上，域仅仅是通过“URL的首部”来识别而不会去尝试判断相同的ip地址对应着两个域或两个域是否在同一个ip上。

塔尖遥望者

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML系列

HTML系列
复制链接

扫一扫

HTML系列

HTML

后缀名

什么是HTML

网页三要素

剖析解释

1.定义

2.作用：

html

head

title

style

meta

link

script

noscript

base

body

script

跨界创建方式

方式一

方式二

方式三

方式四

乱数假文

标签

标签嵌套

标签分类

元素的包含关系

标签

内联元素

标题标签

水平线

注释

换行

文本格式化

超链接

图像标签

表格

列表

表单

框架

“相关推荐”对你有帮助么？