HTML与CSS(头部解析)-----3：

HTML 头部

HTML 头部（Head）是位于 HTML 文档的 <head> 标签中的一部分，包含了一些与文档相关的元数据和其他信息。HTML 头部不会在页面中直接显示，而是提供给浏览器和搜索引擎等工具使用。


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

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


<title>

<title>：用于定义网页的标题，显示在浏览器的标题栏或标签页上。

示例：

<title>网页标题</title>

<meta>

<meta>：用于指定文档相关的元数据，如编码方式、关键词、描述等。

示例：

<meta charset="UTF-8">
<meta name="keywords" content="关键词1, 关键词2, 关键词3">
<meta name="description" content="网页描述">

<link>：用于引入外部样式表（CSS 文件）或其他资源。

示例：

<link rel="stylesheet" type="text/css" href="mystyle.css">
<link rel="icon" href="favicon.ico" type="image/x-icon">

<script>

<script>：用于引入外部 JavaScript 文件或内嵌 JavaScript 代码。

Javascript 语言诞生主要是完成页面的数据验证。因此它运行在客户端，需要运行浏览器来解析执行 JavaScript 代码。

JS 是 Netscape 网景公司的产品，最早取名为 LiveScript;为了吸引更多 java 程序员。更名为 JavaScript。

JS 是弱类型，Java 是强类型。

示例：

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

<script>
  // 内嵌 JavaScript 代码
</script>

注意：

两种方式不能写在同一个script标签里面。

需要写在不同的script标签里面。


<style>

<style>：用于定义内部样式表（CSS）。

示例：

<style>
  /* CSS 样式定义 */
</style>

常见选择器

选择器是用于在HTML和CSS中选择特定元素的工具。


元素选择器

元素选择器通过元素名称来选择 HTML 元素。例如，p 选择器选择所有的 <p> 元素。

示例：

p {
  color: blue;
}

ID 选择器

ID 选择器通过元素的 ID 属性来选择元素。ID 属性值必须唯一，因此 ID 选择器只能选择一个元素。例如，#header 选择器选择具有 id="header" 的元素。

示例：

#header {
  font-size: 24px;
}

类选择器

类选择器通过元素的 class 属性来选择元素。一个元素可以有多个 class，同样的 class 值可以出现在不同的元素中。例如，.highlight 选择器选择具有 class="highlight" 的元素。

示例：

.highlight {
  background-color: yellow;
}

属性选择器

属性选择器通过元素的属性值来选择元素。

示例1：选择所有 href 属性值为 "https://www.example.com" 的链接，并将它们的文本颜色设为红色，并添加下划线样式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			a[href="https://www.example.com"] {
			  color: red;
			  text-decoration: underline;
			}
		</style>
	</head>
	<body>
		<a href="https://www.example.com">www.example.com</a><br>
		<a href="https://www.example.com1">www.example.com1</a><br>
		<a href="https://www.example.com2">www.example.com2</a><br>
		<a href="https://www.example.com3">www.example.com3</a>
	</body>
</html>

结果：

示例2：根据文件类型设置图标样式：通过属性值选择器可以根据文件的类型为下载链接添加相应的图标样式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			a[href$=".pdf"] {
			  background-image: url('https://www.loanezi.com.au/wp-content/uploads/2018/12/PDF-Icon.png');
			  background-size: cover;
			}
			
			a[href$=".doc"],
			a[href$=".docx"] {
			  background-image: url('https://www.clipartmax.com/png/middle/112-1126805_word-microsoft-word-icon-mac.png');
			  background-size: cover;
			}
		</style>
	</head>
	<body>
		<a href="test.pdf">123</a>
		<br><br>
		<a href="test.doc">123</a>
	</body>
</html>

结果：


示例3：选择特定类别的表单元素：通过属性存在选择器 [attribute] ，可以选择具有特定类别的表单元素，并为其应用样式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			input[type="text"] {
			  border: 1px solid gray;
			  color: red;
			}
			
			input[type="submit"] {
			  background-color: green;
			  color: white;
			}

		</style>
	</head>
	<body>
		<input type="text" value="请输入内容"/>
		<br>
		<input type="submit"/>
	</body>
</html>

结果：


后代选择器

后代选择器通过选取元素的子孙元素来选择元素。例如，ul li 选择器选择所有的 <li> 元素，但仅当它们是 <ul> 元素的后代时才适用。

示例：

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>
    Item 4
    <ul>
      <li>Subitem 1</li>
      <li>Subitem 2</li>
    </ul>
  </li>
</ul>

如果我们只想选择 <ul> 元素内的所有 <li> 元素，可以使用后代选择器。示例代码如下：

ul li {
  color: red;
}

上述代码将会把 <ul> 元素内的所有 <li> 元素的文本颜色设为红色。根据给定的 HTML 结构，应用样式后的结果如下：

  • "Item 1"、"Item 2"、"Item 3" 这三个 <li> 元素都符合条件，它们是 <ul> 元素的后代，所以它们的文本颜色会变为红色。
  • "Subitem 1" 和 "Subitem 2" 这两个 <li> 元素不符合条件，因为它们不是直接位于 <ul> 元素内，而是嵌套在另一个 <li> 元素内部。

<base>

<base> 标签是 HTML 中的一个非常重要的元素，它影响了网页中所有相对路径的链接、图片及样式文件的解析。

详细介绍：

  1. 语法：<base href="URL">

  2. 功能：定义页面上所有 URL 的基础 URL 地址。

  3. 用法：放置在 <head> 元素中，并且只能有一个 <base> 元素。

  4. 属性：

    • href：指定基础 URL 地址，必须存在。

    • target：指定默认的打开链接方式（如新窗口或原窗口），非必需。

  5. 描述：当浏览器解析网页时，它会根据 <base> 元素的 href 属性值来处理页面上使用相对路径的链接、图片及样式文件的解析。如果 <a> 元素的 href 属性值是相对路径，则该链接将相对于 <base> 元素的 href 属性值进行解析。

示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>Webpage Title</title>
  <base href="http://example.com/">
</head>
<body>
  <a href="about.html">About Us</a>
  <img src="images/logo.png">
</body>
</html>





posted @ 2022-08-09 22:59  猪无名  阅读(44)  评论(0)  编辑  收藏  举报