Home > Article > Web Front-end > HTML基础内容详解
HTML(Htyper Text Markup Language):即超文本标记语言。
超文本:指可以包含图片、链接,甚至音乐、程序等非文字元素。
标记语言:由标记(标签)构成的语言。
由一对尖括号包裹的单词构成,例如:
标签不区分大小写, 和 一样,推荐使用小写。
有些标签使用一个标签即可,叫做自闭和标签,例如:
标签可以嵌套,但是不能交叉嵌套
通常是以键值对形式出现的,例如 name="nick"
属性只能出现在开始标签或自闭和标签中
属性名字全部小写
属性值必须使用双引号或单引号包裹 例如,name="nick"
如果属性值和属性名完全一样.直接写属性名即可,例如:readonly
<!DOCTYPE HTML> <html> <head> </head> <body> </body> </html>
使用Content-Type指定字符集<br><meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
直接使用charset指定字符集<br><meta charset="UTF-8" />
显示在浏览器的标题栏
为页面上的所有链接规定默认地址或默认目标。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <base href="https://segmentfault.com/u/jerry_fe/"/> <base target="_blank" /> </head> <body> <img src="jerry.png" alt="图片加载失败。。。"/> <a href="https://segmentfault.com/u/jerry_fe/">my blogs</a> </body> </html>
以上代码中,的src属性时一个相对路径,因为
中通过base标签设置了链接的默认地址,<br>所以img的src实际的地址是“https://segmentfault.com/u/je...”。<br>而a标签中只是指定了href,并未指定target属性,所以也会使用base中设置的target属性的值。引用外部文档,常见于引用外部样式。重要属性有三个:rel、href、type。<br>rel用于规定文档与被链接文档之间的关系【注:必须】:
rel="dns-prefetch" 预先解析缓存文档中使用的域名,目的是为了提高网页访问速度。使用场景:在一个网页频繁使用其他域名资源时。
rel="shortcut icon"或rel="icon" 在收藏和标题栏上用于显示的图标。示例:
rel="nofollow" 用于指示搜索引擎不要追踪(爬虫不要抓取),从而减少垃圾链接。使用场景:不希望被信任或是不希望被搜索引擎录入的网站。
href用于规定资源的路径(绝对路径/相对路径)【注:必须】。
type用于规定被链接文档的MIME类型,用于明确文件的打开方式,【注:非必须】。例如:.css文件的MIME类型为text/css,而.ico文件的MIME类型为image/x-icon。
用于定义与该HTML文档相关的元数据。最常见的用途是指定当前文档所用的字符集<meta charset="UTF-8"/>
<br>重要的属性有三个:http-equiv、name、content<br>http-equiv把content属性值关联到http头部,可能的值为:
content-type 用于规定浏览器接受的文档类型,一般为text/html,即content的值一般设为text/html。
refresh 用于规定网页自动刷新的频率,时间以秒为单位(切记不是毫秒),也可设定刷新后跳转的路径,即content的值一般设为刷新的间隔秒数以及跳转路径。
expires 用于设定网页到期时间,一旦到期,必须到服务器上重传。
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <meta http-equiv="refresh" content="2"> <meta http-equiv="refresh" content="2;URL=https://www.baidu.com"> <meta http-equiv="expires" content="6 Jun 2016"/>
name为content属性值赋予一个含义或功能,可能的值为:
keywords 将content值定义为供搜索引擎抓取信息的关键字
description 将content值定义为搜索引擎搜索后,在搜索结果中显示的简单网页描述
author 将content值规定为网页制作者的信息
generator 将content值规定为网页生成工具的信息
<meta name="keywords" content="我是关键字"> <meta name="description" content="我是简要描述"> <meta name="author" content="https://segmentfault.com/u/jerry_fe"> <meta name="generator" content="用以说明生成工具">
content 定义与http-equiv或name属性相关的元信息,是必要的属性。
<hr>块级元素:
、
、