html标签大全

本文涉及的产品
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
云解析 DNS,旗舰版 1个月
简介: 第一章自结束标签像<p> </p> <title> </title> <h1> </h1> 这类标签是需要有结束标签的而 自结束标签(自己结束自己)是不需要结束标签的 如:<img> <input> 还可以写成<img /> <input />

第一章

自结束标签

<p></p>  <title></title><h1></h1>  这类标签是需要有结束标签的

而 自结束标签(自己结束自己)是不需要结束标签的 如:<img><input>  还可以写成

<img /><input />

注释

<!--

HTML的注释,注释中的内容会被浏览器所忽略,不会在网页中直接显示 ,

但是可以在源代码中查看注释,注释用来对代码进行解释说明的

注释还可以将一些不希望显示的内容隐藏

注释不能嵌套

-->

标签中的属性

属性,在标签中(开始标签或自结束标签)还可以设置属性

属性是一个键值对(x=y)

属性用来设置标签中的内容如何显示

属性和标签名或其他属性应该使用空格隔开

属性不能瞎写,应该根据文档中的规矩填写

有些属性有属性值,有些没有,如果有属性值,属性值应该使用引号引起来

文档声明(doctype)

文档使用

html的根标签(元素),网页中的所有内容都要写在根元素的里边

head是网页的头部,head中的内容不会在网页中直接出现,主要用来帮助浏览器或搜索引擎来解析网页

meta标签用来设置网页的元数据 这里meta用来设置网页的字符集,避免乱码问题

<meta charset="utf-8"> </meta>

title中的内容会显示在浏览器的标题栏,搜索引擎会主要根据title中的内容来判断网页的主要内容

body是html的子元素,表示网页的主体,网页中所有可见内容都应该写在body里

h1网页的一级标题

!+ tab 快捷编辑格式

p+tab 会变为<p></p>

实体

在网页中编写的多个空格默认情况会自动被浏览器解析为一个空格,换行也就相当于多个空格,最后也会合并解析成一个空格

在HTML中有些时候,我们不能直接书写一些特殊符号

比如,多个连续的空格,比如字母两侧的大于和小于号(a<b>c)

如果我们需要在网页中书写这些特殊的符号,则需要使用html中的实体(转义字符)

实体的语法:

&实体的名字;

&nbsp;空格

&gt;大于号

&lt;小于号

&copy;版权符号

meta标签

meta主要用于设置网页中的一些元数据,元数据不是给用户看的

charset 指定网页的字符集

name 指定的数据的名称

content 指定的数据的内容

<meta name="keywords" content="HTML5,前端,css3">

keywords 表示网站的关键字,可以同时指定多个关键字,关键字间使用,隔开

<meta name="description" content="京东xxxxxxxxxxx">

description 用于指定网站的描述,网站的描述会显示在搜索引擎的搜索的结果中

title标签的内容会作为搜索结果的超链接上的文字显示

<meta http-equiv="refresh" content="3;url=https://www.baidu.com">

将页面重定向到另一个网站

3代表的是你想要几秒重定向到另一个网站

语义化标签

在网页中HTML专门用来负责网页的结构

所以在使用html标签时,应该关注的是标签的语义,而不是它的样式

标题标签

h1 ~ h6 一共有六级标题

从h1 - h6重要性递减,h1最重要,h6最不重要

h1在网页中的重要性仅次于title标签,一般情况下一个页面中只会有一个h1

一般情况下标题标签只会使用h1-h3,h4-h6很少用

标题标签都是块元素

在页面中独占一行的元素我们称为块元素(block element)

ctrl + 回车   只是让光标下移换行,但是后面内容不换行

p标签表示页面中的一个段落

所以p也是一个块元素

<hgroup></hgroup>标签用来为标题分组,可以将一组相关的标题同时放入hgroup

<em></em>标签用于表示语音语调的一个加重,语气重要,内容不重要。

   在页面中不会独占一行的元素,称为行内元素(inline element)如:em标签,strong标签

<strong></strong>表示强调,重要内容!

<blockquote></blockquote>表示一个长引用,引用别人的话,有一个缩进的效果,是一个块元素,会独占一行

<q></q>表示一个短引用,没有换行,是一个行内元素,不会独占一行,会给你在句子两边加引号。

块和行内

块元素(block element)  标签p/h1/h2也是块元素,块元素的宽度跟父元素一样宽

-在网页中一般通过块元素来对页面进行布局

行内元素(inline element)

-行内元素主要包裹文字

-一般情况下会在块元素中放行内元素

 而不会在行内元素中放块元素

-块元素中基本上什么都能放

-p元素中不能放任何的块元素

浏览器在解析网页时,会自动对网页中不符合规范的内容进行修正

比如

标签写在了根元素的外部

p标签中嵌套了块元素

根元素中出现了除head和body以外的子元素

语义化标签(2)

布局标签(结构化语义标签)

<header> 表示网页的头部

<main> 表示网页的主体部分(一个页面中只会有一个main,如果有多个main那就没有主要了)

   <footer> 表示网页的底部

<nav> 表示网页中的导航,关注语义,是一个导航

<aside> 和主体相关的其他内容(侧边栏)

<article> 表示一个独立的文章

<section>表示一个独立的区块,上边的标签都不能表示时使用section(就是一个其他的意思)

<div> 没有语义,就用来表示一个区块,目前来讲div还是我们主要的布局元素,可以替代上面的任何一个(块)

<span>行内元素,没有任何的语义,一般用于在网页中选中文字(行内)


相关文章
|
2月前
|
移动开发 HTML5
HTML5标签的类型
HTML5标签的类型。
65 5
|
1月前
|
移动开发 搜索推荐 UED
HTML5的新语义化标签
HTML5引入的这些新语义化标签,通过明确标识内容的结构和意义,使得网页结构更加清晰,易于理解和维护。使用这些标签不仅提升了网页的可读性和可访问性,还增强了搜索引擎和辅助技术对网页内容的解析能力。在实际开发中,合理使用这些语义化标签,能够显著提升网页的质量和用户体验。
94 49
|
4月前
|
数据采集 移动开发 前端开发
HTML代码的革命:语义化标签的魅力,让你的网页结构焕然一新!
【8月更文挑战第26天】本文探讨了Web前端开发中的语义化标签概念及其重要性。语义化标签通过使用具有明确含义的HTML标签来构建页面结构,提升了网页的可访问性及搜索引擎优化效果,并增强了代码的可读性和维护性。文章还讨论了实际开发中遇到的问题及未来发展趋势。
64 0
|
24天前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
36 5
|
1月前
|
移动开发 编解码 UED
除了 `<audio>` 和 `<video>` 标签,HTML5 还支持哪些多媒体格式?
【10月更文挑战第19天】HTML5对多种多媒体格式的支持,为网页开发者提供了丰富的选择,能够更好地满足不同类型多媒体内容在网页中的展示和交互需求,提升了网页的用户体验和多媒体应用的多样性。
|
1月前
|
存储 移动开发 前端开发
|
2月前
|
前端开发
【HTML】img标签和超链接标签
【HTML】img标签和超链接标签
52 2
|
2月前
|
移动开发 前端开发 JavaScript
【HTML】HTML页面和常见标签
【HTML】HTML页面和常见标签
43 1
|
3月前
|
前端开发
前端基础(二)_HTML常用标签(块级标签、行级标签、行块级标签)
本文详细介绍了HTML中的常用标签,包括块级标签(如`h1`至`h6`、`p`、`div`等)、行级标签(如`span`、`b`、`strong`、`i`、`em`、`sub`、`sup`、`del`、`a`等),以及行块级标签(如`img`)。文章解释了这些标签的用途、特点和基本用法,并通过示例代码展示了如何在HTML文档中使用它们。
181 1
|
3月前
|
移动开发 开发者 UED
HTML5中video标签controlslist属性的使用方法
`controlsList`属性为开发者提供了更多控制HTML5视频播放器行为的能力,让视频内容的集成更加灵活和符合需求。通过精心设计的控制列表,可以提升用户体验,同时保持内容的安全性和专业性。这种细节的控制和定制能力是现代Web开发的一个重要方面,反映了HTML5对开发者和内容创作者需求的响应。
352 1