1. head
1. title
<title> 网页工具栏标题</title>
2. base
- 为页面上的所有标签规定默认地址。
- 空标签。
- 使用多个base 元素，以第一个href 和 target 生效，其余忽略。
- 属性： href，target
<head>
<base href="https://www.example.com/">
<a href="#anchor">Anker</a>
a 实际指向的地址是： https://example.com/#anchor
<base target="_blank">
<base target="_top" href="https://example.com/">
</head>
3. link
- 定义外部资源与文档的关系。
- 常用于连接样式表，网页图标icon 。
- 空标签。
- 属性： rel ， href， type
sizes (仅在rel="icon" 时有效)
media
最简单的代码例子：
<link rel="stylesheet" href="style.css" >
<link rel="stylesheet" type="text/css" href="mystyle.css">
<link rel="icon" href="favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="favicon144.png">
<link href="print.css" rel="stylesheet" media="print">
<link rel="preload" href="style.css" as="style">
<link rel="preload" href="main.js" as="script">
详细使用情况：
导入一个 stylesheet
<link href="style.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="mystyle.css">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="favicon144.png">
<link href="basic.css" rel="alternate stylesheet" title="Basic">
提供可选的stylesheets
<link href="default.css" rel="stylesheet" title="Default Style">
<link href="fancy.css" rel="alternate stylesheet" title="Fancy">
<link href="basic.css" rel="alternate stylesheet" title="Basic">
为不同的内容提供图标链接
<!-- third-generation iPad with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="favicon144.png">
<!-- iPhone with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon114.png">
<!-- first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon72.png">
<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="favicon57.png">
<!-- basic favicon -->
<link rel="icon" href="favicon32.png">
Conditionally loading resources with media queries
<link href="print.css" rel="stylesheet" media="print">
<link href="mobile.css" rel="stylesheet" media="all">
<link href="desktop.css" rel="stylesheet" media="screen and (min-width: 600px)">
<link href="highres.css" rel="stylesheet" media="screen and (min-resolution: 300dpi)">
4. meta
- 提供文档元数据，不在页面显示。
- 通常用于规定页面的描述，关键词，文档作者，最后修改时间，以及其他元数据 。
- 空标签。
- 属性： name ，content，charset
<meta name="keywords" content="HTML, CSS, XML" />
<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />
<meta name="author" content="Li Lei"/>
5. script
- 提供文档元数据，不在页面显示。
- 通常用于规定页面的描述，关键词，文档作者，最后修改时间，以及其他元数据 。
- 属性：src ，type
基本语法
<script src="javascript.js"></script>
<script type="text/javascript">
document.write("Hello World!")
</script>
<script>
alert("Hello World!");
</script>
Module fallback支持module的浏览器使用module的script
<script type="module" src="main.js"></script>
<script nomodule src="fallback.js"></script>
6. style
- 提供当前文档样式。
- 多个style 冲突， 以最后一个为准，前面的被覆盖。
- 属性： type ， media， title （这些属性，不写也行）
<style type="text/css" >
li { background-color: pink }
</style>
<style>
p {
color: red;
}
</style>
网友评论