html 标记语言

html语言是前端三剑客(html[页面骨架] css[骨架_样式] javascript[骨架_行为])其中一种标记语言!其html主要作用就是用来搭建整个页面的骨架!

html文档结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <!--html基本信息 兼容 ie 8 以上浏览器-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>html文档结构描述</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

html标记语言中是以 元素 属性 属性值 来表示当前标记该如何被处理!并由多个标记所组成的文本片段!

DOCTYPE

1
<!DOCTYPE html>

声明 html 文档 ,当浏览器打开 并以 html方式去处理和渲染显示!

html

1
<html lang="zh-CN"></html>

该html标记语言包含了文档模块的整个内容!

属性

属性名属性值描述
langzh-CN / en / cmn-hans该属性来表示文档编码格式

在html标签<html lang="en"></html>中有个属性叫lang，表示language，为全局属性，(即所有有元素都有这个属性)。
表示该元素内部使用的文字是哪一种自然语言书写而成。该属性在浏览器安装有某种插件时，可以触发浏览器的翻译行为、语音阅读等。

新的写法 !

1
<html lang="cmn-hans"></html>

cmn表示中国大陆官方用语，hans表示简体汉字。

1
<head></head>

该head标记语言描述 文档头部信息!

title

1
<title></title>

该title标记语言表示文档的标题!

meta

meta元素是文档的最基本的元信息。<meta>除了提供文档字符集、使用语言、作者等基本信息外，还涉及对关键词和网页等级的设定。
该元素设置的内容为用户不可见! 描述html文档的一些相关信息!

属性
属性名属性值描述
charsetutf-8定义文档的字符编码。
contenttext定义与 http-equiv 或 name 属性相关的元信息。
http-equivcontent-type / default-style / refresh把 content 属性关联到 HTTP 请求头部。
nameapplication-nam / author/ description/ generator/ keywords / robots(机器人向导)把 content 属性关联到一个名称。
1
2
<!-- 兼容移动端设备 不允许在移动设备上进行缩放 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0">
http-equiv属性

http-equiv相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

属性名作用
Expires(期限)设定网页的到期时间，一旦网页过期，必须到服务器上重新传输。
Pragma(cache模式)禁止浏览器从本地计算机的缓存中访问页面内容，访问者将无法脱机浏览。
Refresh(刷新)自动刷新并指向新页面。
Set-Cookie(cookie设定)如果网页过期，那么存盘的cookie将被删除。
Window-target(显示窗口的设定)强制页面在当前窗口以独立页面显示，用来防止别人在框架里调用自己的页面。
content-Type(显示字符集的设定)设定页面使用的字符集。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<head>	
  <!--html基本信息 兼容 ie 8 以上浏览器-->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- //必须使用GMT的时间格式 -->
	<meta http-equiv="expires" content="Tuesday, 12 Jan 2021 18:18:18 GMT">  
	<meta http-equiv="Pragma" content="no-cache">
    <!-- //在当前页面停留2秒钟后自动刷新到URL网址 -->
	<meta http-equiv="Refresh" content="2;URL=http://www.root.net">  
    <!-- //必须使用GMT的时间格 式,设置的cookie的值为 xxx -->
	<meta http-equiv="Set-Cookie" content="cookievalue=xxx; expires=Wednesday, 15-Apri-2021 18:18:18 GMT； path=/">   
	<meta http-equiv="Window-target" content="_top">
    <!-- //GB2312简体中文；BIG5繁体中文；iso-2022-jp日文；ks_c_5601韩文；ISO-8859-1英文；UTF-8世界通用的语言编码； -->
	<meta http-equiv="content-Type" content="text/html; charset=gb2312">  
</head>

示例
  1. 将meta文档类型描述,体现在http请求头中!
    1
    <meta http-equiv="content-Type" content="text/html; charset=gb2312">
  2. 关于name属性的相关示例

    有利于搜索引擎搜索

    1
    2
    3
    4
    5
    6
    7
    8
    <!-- 搜索引擎 搜索关键字 -->
    <meta name ="keywords" content="science,education,culture,politics,ecnomics，relationships, entertaiment, human">
    <!-- 搜索引擎 html 文档描述 -->
    <meta name="description" content="This page is about the meaning of science, education,culture.">
    <!-- content的参数有all,none,index,noindex,follow,nofollow 默认是all -->
    <meta name="robots" content="none">   
    <!-- 搜索引擎 author 作者信息 -->
    <meta name="author" content="root,root@21cn.com">
  3. 自动刷新并指向新的页面
    1
    2
    <meta http-equiv=″refresh″ content=″２; URL=http://blog.sina.com.cn/s/articlelist_1842736075_11_2.html″>  
    <!-- 使当前某一个网页在２秒后自动转到指定页面中去 -->
  4. 实现网页转换时的动画效果
    1
    2
    <meta http-equiv="Page-Enter" content="revealTrans(duration=５.０, transition=２０)">
    <meta http-equiv="Page-Exit" content="revealTrans(duration=５.０, transition=２０)">
注意: 所加网页不能是一个Frame页!

link 标签常用与应用css外联样式表文件的引用,处理这方面还有其他引用方式!

注释：link 元素是空元素，它仅包含属性。

注释：此元素只能存在于 head 部分，不过它可出现任何次数。

属性
属性属性值描述
charsetchar_encodingHTML5 不支持该属性。定义被链接文档的字符编码方式。
hrefURL定义被链接文档的位置。
hreflanglanguage_code定义被链接文档中文本的语言。
mediamedia_query规定被链接文档将显示在什么设备上。
relstylesheet必需。定义当前文档与被链接文档之间的关系。
sizesHeight x Width any定义了链接属性大小，只对属性 rel="icon" 起作用。
typeMIME_type规定被链接文档的 MIME 类型。
示例
  • type

    该属性用于指定链接资源的MIME类型。例如，当链接到一个CSS样式表时，可以指定其类型为 text/css 。大多数情况下，浏览器可以自动识别资源类型，所以 type 属性不是必需的。

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

  • media

    该属性允许您指定样式表适用于哪些媒体类型。例如，您可以创建专门针对打印的样式表，当用户打印页面时使用。

    1
    <link rel="stylesheet" href="print.css" media="print">

  • sizes

    当使用 link 标签链接到多个尺寸的图标时，可以使用 sizes 属性指定图标的大小。这对于根据设备显示不同大小图标的情况很有用。

    1
    2
    <link rel="icon" href="icon-48x48.png" sizes="48x48">
    <link rel="icon" href="icon-96x96.png" sizes="96x96">

  • preload

    rel="preload" 可以用于提前加载重要的资源，例如字体、图片或脚本。这可以优化页面加载性能。

    1
    <link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

  • crossorigin

    当链接到跨域资源时，可以使用crossorigin 属性指定资源的CORS（跨源资源共享）设置。如：4.preload

  • prefetch

    使用rel="prefetch" 可以预先获取并缓存资源，以便在后续页面中使用。这对于预加载页面中可能用到的资源很有用。

    1
    <link rel="prefetch" href="pre-page.html">

script

script 脚本标签 可引用外部脚本文件，也可以在html文档中内嵌脚本!

属性
属性属性值描述
asyncasync立即下载脚本，但是不妨碍页面其他操作，通俗一点就是异步加载js并执行，它和dom的渲染是异步，async只对外部脚本文件有效。
charsetchar_encoding定义被引入文档的字符编码
deferdefer表示脚本可以延迟到文档完全被解析和显示之后再执行，只对外部文件有效，通俗的说就是js文件与dom结构一起加载，但是js文件会等html渲染完之后再执行。
srcsrc表示包含要执行代码的外部文件
typeMIME规定被引入文档的 MIME 类型 默认值是 "text/javascript"。
示例
  • src

    该属性用于指定外部脚本文件的 URL。

    1
    <script src="script.js"></script>

  • type

    该属性用于指定脚本文件的 MIME 类型。例如，当引入一个JavaScript文件时，可以指定其类型为 text/javascript 。大多数情况下，浏览器可以自动识别资源类型，所以 type 属性不是必需的。

  • defer

    等html文档加载完毕后 在加载js

    1
    <script src="script.js" defer></script>
  • async

    与html文档加载不冲突，异步加载js,也不妨碍html文档加载!

    1
    <script src="script.js" async></script>

style

style 标签用于定义HTML文档的样式。可用于内部样式。

示例

给予body添加背景颜色!

1
2
3
4
5
<style>
  body {
      background-color: #f00;
  }
</style>

base

使用<base>指定相对URL的基地址：Demo:base

<base> 必须位于 <head> 元素内，且每个HTML文档中最多只能有一个。
建议将 <base> 作为 <head> 元素的首个子元素。这样，该基地址就可用于 <head> 中的其他相对URL。

示例
1
2
3
4
5
6
7
<head>
  <base href="http://www.example.com/base/" target="_blank">
</head>
<body>
  <!-- http://www.example.com/base/logo.png -->
  <img src="logo.png" width="24" height="39" alt="Stickman">
</body>

body

1
<body></body>

body是绘制可见内容的标签, 标签又可分为块级元素和行内元素, 块级元素会独占一行,行内元素会在同一行内显示!
当然还有语义化标签, 语义化标签 是指html文档中用来描述文档内容的标签, 语义化标签可以让html文档更加结构化, 便于搜索引擎抓取, 也便于开发者理解!

语义化标签

语义化标签是指html文档中用来描述文档内容的标签, 语义化标签可以让html文档更加

块级元素 可以设置宽度, 高度, 边框, 背景等属性, 行内元素不能设置宽度, 高度, 边框, 背景等属性!

行内元素 不能设置宽度, 高度, 边框, 背景等属性! 若需要设置可以通过css属性display: block | inline-block来改变!

块级元素

块级元素会独占一行

标签描述
div定义文档中的节（section）或区域。
p定义段落。
h1定义文档的标题。
h2定义文档的二级标题。
h3定义文档的三级标题。
address定义文档的作者/拥有者。
pre定义预格式文本。
blockquote定义长的引用。
ol定义有序列表。
ul定义无序列表。
dl定义定义列表。
li定义列表项。
dd定义定义列表的项目。
dt定义定义列表的项目。
form定义 HTML 表单。
table定义表格。
caption定义表格标题。
th定义表格的表头。
tr定义表格行。
td定义表格单元格。
thead定义表格的表头部分。
tbody定义表格的主体部分。
tfoot定义表格的表尾部分。
col定义表格的列。
colgroup定义表格的列组。
br定义换行。
hr定义水平线。
ins定义被插入的文本。

行内标签

行内元素会在同一行内显示!

标签描述
a定义链接。
abbr定义缩写。
acronym定义首字母缩写。
b定义加粗文本。
bdo定义文本方向。
big定义大号文本。
cite定义引用文本。
code定义计算机代码文本。
del定义被删除的文本。
dfn定义定义的文本。
em定义强调文本。
font定义字体。
i定义斜体文本。
ins定义被插入的文本。
kbd定义键盘文本。
q定义短的引用。
samp定义计算机代码样例。
small定义小号文本。
span定义文本范围。
strike定义带删除线的文本。
strong定义强调文本。
sub定义下标文本。
sup定义上标文本。
tt定义电子文本。
img定义图像。
object定义嵌入对象。
param定义对象参数。
embed定义嵌入的内容。
map定义图像映射。
area定义图像映射的区域。
noscript定义无客户端脚本的文档。
video定义视频。
audio定义声音。
source定义声音的多媒体资源。
canvas定义图形。

语义化标签

语义化标签是指html文档中用来描述文档内容的标签, 语义化标签可以让html文档更加结构化, 便于搜索引擎抓取, 也便于开发者理解!

标签描述
article定义文章。
aside定义侧边栏。
nav定义导航链接。
section定义文档中的节（section）或区域。
header定义文档的头部。
footer定义文档的底部。
hgroup定义文档的标题。
figure定义独立的图形，图像，照片，图表，代码等。
figcaption定义figure元素的标题。
mark定义标记文本。
time定义日期/时间。
meter定义度量衡。
progress定义进度条。
ruby定义ruby注释。
rt定义ruby文本。
rp定义ruby文本。
bdi定义文本方向。
bdo定义文本方向。
output定义输出文本。
wbr定义可在文本中换行的位置。
summary定义details元素的标题。
details定义详细信息。
dialog定义对话框。
menu定义菜单。
menuitem定义菜单项目。
slot定义插槽。
template定义模板。
command定义命令。
keygen定义密钥。
datalist定义可选输入项。

HTML5新增标签

标签描述
canvas定义图形。
video定义视频。
audio定义声音。
source定义声音的多媒体资源。
track定义媒介轨道。
datalist定义可选输入项。
details定义详细信息。
summary定义details元素的标题。
time定义日期/时间。
meter定义度量衡。
progress定义进度条。
dialog定义对话框。
menu定义菜单。
menuitem定义菜单项目。
command定义命令。
keygen定义密钥。
output定义输出文本。
wbr定义可在文本中换行的位置。

实用标签

iframe框架标签

标签描述属性
iframe在网页中嵌入内容或其他文件src 嵌入的资源地址, width 宽度, height 高度, frameborder 边框, allowfullscreen 全屏, allowtransparency 透明, scrolling 滚动条!

iframe实际应用:

  1. 在网页中嵌入其他页面!
  2. 与超链接或表单的target配合,展示不同内容

a标签通过target属性关联iframe,当点击a标签时,a标签中的链接会指定到iframe嵌入框架之中!

1
2
<a href="http://www.baidu.com" target="content">百度</a>
<iframe name="content" width="100%" height="100%" frameborder="0" allowtransparency="true" scrolling="no"></iframe>

iframe不止可以嵌套页面, 还可以嵌套其他文件! .pdf .jpg .gif .zip
当路径文件是.zip时,浏览器会跳出下载框提示用户下载!

1
<iframe src="./file/test.zip" width="100%" height="100%" frameborder="0" allowtransparency="true" scrolling="no"></iframe>

a超链接标签

标签描述属性
a定义超链接href 链接地址, target 目标, rel 关联, title 标题

target属性

target属性用来指定跳转方式!

属性描述
_self默认, 当前窗口打开
_blank新窗口打开
_parent父窗口打开
_top整个窗口打开

rel属性

rel属性用来指定链接的关系!

属性描述
alternate定义备用版本

download属性

download属性用来指定下载文件!

属性描述
download下载文件

a标签打开文件

实用a标签打开文件在浏览器中进行预览!
浏览器中支持打开的文件类型: .pdf .jpg .gif .zip .mp4

1
2
3
4
5
6
<!-- 下载文件 -->
<a href="./file/test.zip" download="test.zip">下载</a>
<!-- 预览文件 -->
<a href="./file/test.pdf" target="_blank">预览</a>
<a href="./file/test.mp4" target="_blank">预览</a>
<a href="./file/test.jpg" target="_blank">预览</a>

a标签链接锚点

锚点是html文档中用来定位的标签,可以在其他元素标签上添加id属性,然后在a标签中通过href属性指定锚点的id即可!

1
2
<a href="#test">锚点</a>
<h2 id="test">点</h2>

a标签唤起指定应用

可以通过href特殊值唤起指定应用!

属性描述
tel定义电话号码
sms定义短信地址
mailto定义邮件地址
geo定义地理位置
callto定义电话号码
sip定义SIP地址
fax定义传真号码
1
2
3
4
5
6
7
8
<!-- 唤起电话 -->
<a href="tel:1234567890"></a>
<!-- 唤起邮箱 -->
<a href="mailto:test@test.com"></a>
<!-- 唤起地理位置 -->
<a href="geo:31.234567,121.456789"></a>
<!-- 唤起SIP地址 -->
<a href="sip:1234567890@1234567890"></a