当前位置：首页 > news >正文

html元素

news 文章来源：https://blog.csdn.net/lswdcyy/article/details/132377314 2024/12/29 12:08:37

文章目录

html基本结构
- 属性
- 语义化
- - 为什么要语义化
- 示例
- head中属性
- 样式
- 一些概念
- - 块级元素与行级元素
  - 空白折叠
html编程
- 没有css的html显示逻辑

html基本结构

html基本单元就是元素，每个元素有标记和属性，如：

<a href="...">www</a>

属性

局部属性
部分标签特有的属性
全局属性
每个标签都具备的属性

语义化

每个html标签都具有具体的含义
所有标签与展示效果无关，由css负责显示

为什么要语义化

为了搜索引擎优化(SEO)
搜索引擎可以更好的理解网页内容
为了让浏览器更好的理解网页
如一些浏览器功能：阅读模式、语音模式等；这些和显示无关，只需要专注html标签即可。

示例

<!DOCTYPE HTML> <!-- HTML5标准网页声明，DOCTYPE -- 文档类型，DocType -->
<HTML lang="zh-CN"> <!-- HTML为根标签，代表整个网页 --><head> <!-- head为头部标签，一般用来描述文档的各种属性和信息， 包括标题等--><meta charset="UTF-8"> <!-- 设置字符集为utf-8 --><title>my HTML</title> <!-- 设置浏览器的标题 -->
</head><!-- 网页所有的内容都写在body标签内 -->
<body> 我的第一个HTML网页
</body></HTML>

整体的html有两个部分，第一个部分是包含关于HTML文档的信息，可以包含一些辅助性标签。如 <title></title> ，<link />、<meta /> ，<style></style> ， <script></script> 等，但是浏览器除了会在标题栏显示 <title> 元素的内容外，不会向用户显示 head 元素内的其他任何内容。
第二个部分就是HTML文档的主体部分，在这个标签中可以包含 <p><h1><br> 等众多标签，<body> 标签出现在 </head> 标签之后，且必须在闭标签 </HTML> 之前闭合。

head中属性

<meta> 标签提供了 HTML 文档的元数据，定义了与文档相关联的名称/值对。位于文档的head部分，不包含任何内容，不会显示在客户端，但是会被浏览器解析。共有四个属性，它们分别是scheme属性、 http-equiv 属性和 name 属性，在 HTML5 中，有一个新的 charset 属性，它使字符集的定义更加容易，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。

charset 指定网页的编码方式<meta charset="UTF-8">
scheme 在 HTML5 不支持

name 属性主要用于描述网页，与之对应的属性值为 content，content 中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。语法格式为<meta name="参数" content="具体的参数值">，如：

<!-- keywords，关键字，告诉搜索引擎该网页的关键字。 -->
<meta name="keywords" content="关键字，可以有多个关键字" /><!-- description，网站内容的描述，用于告诉搜索引擎你网站的主要内容，有助于 SEO 搜索引擎优化。 -->
<meta name="description" content="对网站内容的描述" /><!-- viewport：窗口视图。 -->
<!-- width：设置 layout viewport 的宽度，为一个正整数，或字符串"width-device"。 -->
<!-- initial-scale：设置页面的初始缩放值，为一个数字，可以带小数。 -->
<!-- minimum-scale：允许用户的最小缩放值，为一个数字，可以带小数。 -->
<!-- maximum-scale：允许用户的最大缩放值，为一个数字，可以带小数。 -->
<!-- height：设置 layout viewport 的高度，这个属性对我们并不重要，很少使用 -->
<!-- user-scalable：是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes 代表允许。 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- author：标注网页的作者。 -->
<meta name="author" content="网页的作者"><!-- generator：网页制作软件。 -->
<meta name="generator" content="制作软件"><!-- copyright：说明网站版权信息。 -->
<meta name="copyright" content="版权">

http-equiv
http-equiv 相当于 http 的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容。

<!-- Expires：期限，可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。 -->
<meta http-equiv="expires" content="Fri,12 Jan 2022 18:18:18 GMT"><!-- Pragma：cache 模式，是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从 cache 中再调出。 -->
<!-- cache模式：允许脱机浏览。 -->
<!-- no-cache模式：无法脱机浏览。 -->
<meta http-equiv="peragma" content="no-cache" />        <!-- 当前无法脱机浏览 --> <!-- Refresh：刷新，自动刷新并指向新页面。 -->
<meta http-equiv="refresh" content="时间（秒为单位）;URL"><!-- Window-Target：显示窗口的设定。 -->
<!-- Window-Target 有四个属性值： -->
<!-- _top：表示页面以当前整个窗口显示，可以防止自己的页面被其他网页嵌套 -->
<!-- _blank： 表示页面以新打开的窗口显示 -->
<!-- _parent：表示页面以父容器或窗口显示 -->
<!-- _self：表示页面以当前容器或窗口显示 -->
<meta http-equiv="window-target" content="_top">

样式

样式有三种方式：

内联样式

<p style="border: red 12px; margin-top: 20px; background-color: brown;">内联样式</ p>

内部样式表

 <head><style>p {color : red;}</ style></ head>

外部应用

<link rel="stylesheet" type="text/css" href="http://192.168.232.220:8881/style.css">

一些概念

块级元素与行级元素

块级元素
在显示时会单独占一行的元素，如h、p
行级元素
在显示时不会单独占一行的元素，如span

空白折叠

在源代码中的连续空白字符(空格、换行、制表符)，在页面显示时，会被折叠为一个空格，不论标签内外

html编程

html编程分为两个层次，一个是html代码，他表征整个html功能，显示内容；一个是css，他表征整个html的显示方式。

因此，本质上，对于一个html文件，他的本质就是最基本的那些元素，如p、a、img...，而div、header...这些的存在有两方面功能，一种是更好的去进行编写css；另外一个方面是提供更好的语义。

没有css的html显示逻辑

没有css显示方式的编写，整个html一般就是两种，一种是块级元素，一种是行级元素，也就是说整个html元素会从上到下一个一个的进行显示，只不过有的元素会换行，而有的元素不会换行