【前端学习笔记——HTML】

最新推荐文章于 2024-04-05 19:13:26 发布

tatakaiyi

最新推荐文章于 2024-04-05 19:13:26 发布

阅读量1.9k

点赞数

文章标签：前端 html css

本文链接：https://blog.csdn.net/weixin_45164294/article/details/122888371

版权

HTML

资料：

网页的语义结构 - HTML 教程 - 网道 (wangdoc.com)

1.格式

tag就是标签，标签用来告诉浏览器，如何处理这段代码。标签的内容就是浏览器所要渲染的、展示在网页上的内容。
注意首和尾的格式
有一些标签没有尾，这种单独使用的标签，通常是因为标签本身就足够完成功能了，不需要标签之间的内容。实际应用中，它们主要用来提示浏览器，做一些特别处理。
tag种类极多，所有tag介绍：HTML elements reference - HTML: HyperText Markup Language | MDN (mozilla.org)

tips：

HTML 标签名是大小写不敏感，比如<title>和<TITLE>是同一个标签。不过，一般习惯都是使用小写。
另外，HTML 语言忽略缩进和换行。HTML 语言有自己的空格处理规则。标签内容的头部和尾部的空格，一律忽略不计。
标签内容里面的多个连续空格（包含制表符\t），会被浏览器合并成一个。浏览器还会将文本里面的换行符（\n）和回车符（\r），替换成空格。
浏览器渲染网页时，会把 HTML 源码解析成一个标签树，每个标签都是树的一个节点（node）。这种节点就称为网页元素（element）。所以，“标签”和“元素”基本上是同义词，只是使用的场合不一样：标签是从源码角度来看，元素是从编程角度来看，比如<p>标签对应网页的p元素。

1.2页面组成

1.2.1 head

`head标签是一个容器标签，用于放置网页的元信息。它的内容不会出现在网页上，而是为网页渲染提供额外信息。

<head>的子元素一般有下面七个：

<meta>：设置网页的元数据。
<link>：连接外部样式表。
<title>：设置网页标题。
<style>：放置内嵌的样式表。
<script>：引入脚本。
<noscript>：浏览器不支持脚本时，所要显示的内容。
<base>：设置网页内部相对 URL 的计算基准。

meta:

meta标签用于设置或说明网页的元数据，必须放在head里面。一个标签就是一项元数据，网页可以有多个。标签约定放在内容的最前面。标签有五个属性:

charset 属性

用来指定网页的编码方式。该属性非常重要，如果设置得不正确，浏览器可能无法正确解码，就会显示乱码。

<meta charset="utf-8">

name 属性，content 属性

meta标签的name属性表示元数据的名字，content属性表示元数据的值。它们合在一起使用，就可以为网页指定一项元数据。

<head>
  <meta name="description" content="HTML 语言入门">
  <meta name="keywords" content="HTML,教程">
  <meta name="author" content="张三">
</head>

上面代码包含了三个元数据：description是网页内容的描述，keywords是网页内容的关键字，author是网页作者。

元数据有很多种，大部分涉及浏览器内部工作机制，或者特定的使用场景

http-equiv 属性，content 属性

meta标签的http-equiv属性用来覆盖 HTTP 回应的头信息字段，content属性是对应的字段内容。这两个属性与 HTTP 协议相关

title:

<title>标签用于指定网页的标题，会显示在浏览器窗口的标题栏。

<title>标签的内部，不能再放置其他标签，只能放置无格式的纯文本。

1.2.2 body

<body>标签是一个容器标签，用于放置网页的主体内容。浏览器显示的页面内容，都放置在它的内部。

1.2.3 base

<base>标签指定网页内部的所有相对 URL 的计算基准。整张网页只能有一个<base>标签，而且只能放在<head>里面。它是单独使用的标签，没有闭合标签，下面是一个例子。

<base href="https://www.example.com/files/" target="_blank">

<base>标签的href属性给出计算的基准网址，target属性给出如何打开链接的说明（参见《链接》一章）。已知计算基准是https://www.example.com/files/，那么相对 URL foo.html，就可以转成绝对 URL https://www.example.com/files/foo.html。

注意，<base>标签必须至少具有href属性或target属性之一。

1.3 实操

文档开始前需要写入doctype，表示文档类型，告诉浏览器如何解析网页。
<html>标签是网页的顶层容器，即标签树结构的顶层节点，也称为根元素（root element），其他元素都是它的子元素。一个网页只能有一个<html>标签。

该标签的lang属性，表示网页内容默认的语言。
```
<html lang="zh-CN">
```
上面代码表示，网页是中文内容。如果是英文内容，zh-CN要改成en。

注释快捷键：Ctrl+/

2.块级元素与内联元素

2.1 块级元素

eg：<div> <h1>-<h6> <p>

2.2 内联元素

eg：<a> <img> <em>

2.3 语义结构

HTML 标签的一个重要作用，就是声明网页元素的性质，使得用户只看标签，就能了解这个元素的意义，阅读 HTML 源码就能了解网页的大致结构。这被称为 HTML 的语义原则。

下面就是一个典型的语义结构的网页。

<body>
  <header>页眉</header>
  <main>
    <article>
      <h1>文章标题</h1>
      <p>文章内容</p>
    </article>
  </main>
  <footer>页尾</footer>
</body>

只看上面的代码，就可以知道，页面分成页眉（<header>）、主体（<main>）、页尾（<footer>）三个部分。

编写 HTML 网页，第一步就是写出语义结构的网页骨架。

2.4 常见的语义标签

2.4.1 header

header用在网页头部，则为页眉，通常放网站导航和搜索栏

用在文章头部，则放标题作者

如：

最低0.47元/天解锁文章

tatakaiyi

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
【前端学习笔记——HTML】

HTML资料：网页的语义结构 - HTML 教程 - 网道 (wangdoc.com)1.格式tag就是标签，标签用来告诉浏览器，如何处理这段代码。标签的内容就是浏览器所要渲染的、展示在网页上的内容。注意首和尾的格式有一些标签没有尾，这种单独使用的标签，通常是因为标签本身就足够完成功能了，不需要标签之间的内容。实际应用中，它们主要用来提示浏览器，做一些特别处理。tag种类极多，所有tag介绍：HTML elements reference - HTML: HyperText Markup
复制链接

扫一扫