html标签大全

本文涉及的产品
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: 第一章自结束标签像<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>行内元素,没有任何的语义,一般用于在网页中选中文字(行内)


相关文章
|
16天前
|
数据采集 移动开发 前端开发
HTML代码的革命:语义化标签的魅力,让你的网页结构焕然一新!
【8月更文挑战第26天】本文探讨了Web前端开发中的语义化标签概念及其重要性。语义化标签通过使用具有明确含义的HTML标签来构建页面结构,提升了网页的可访问性及搜索引擎优化效果,并增强了代码的可读性和维护性。文章还讨论了实际开发中遇到的问题及未来发展趋势。
26 0
|
2月前
|
移动开发 JavaScript Java
关于Android中如何过滤HTML标签
关于Android中如何过滤HTML标签
45 0
|
1月前
|
移动开发 搜索推荐 前端开发
HTML结构的基本标签
HTML结构的基本标签
|
2天前
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
24 13
|
1天前
|
搜索推荐 SEO
HTML中各种标题标签的正确使用方法及其特点
在HTML中,标题标签(`&lt;h1&gt;`至`&lt;h6&gt;`)用于定义文档的标题结构。`&lt;h1&gt;`表示主标题,每个页面应只有一个;`&lt;h2&gt;`至`&lt;h6&gt;`分别表示不同层级的子标题,可用于细分内容。正确使用这些标签不仅有助于文档的层次分明和可读性提升,还能优化SEO。使用时需注意保持层级结构连续、内容描述清晰。
|
1天前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML基础知识(1)常用标签的使用 h、p、img、meta、a、iframe...
该博客文章详细介绍了HTML的基础知识,包括注释、标签属性、常用标签、实体、图片引入、meta标签、内联框架、超链接的使用,并通过代码示例和测试结果截图展示了这些元素在网页中的应用效果。
HTML基础知识(1)常用标签的使用 h、p、img、meta、a、iframe...
|
14天前
|
移动开发 数据安全/隐私保护 UED
HTML表单标签详解:如何用HTML标签打造互动网页?
通过合理使用HTML表单标签,可以构建功能丰富、用户友好的互动网页。HTML表单的元素和属性提供了丰富的输入选项和验证功能,使得收集和处理用户输入成为可能。随着HTML5的发展,表单元素的功能性和用户体验将继续得到提升。开发者应充分利用这些工具,为用户打造流畅、互动性强的网页体验。
29 4
HTML中font标签用法
这篇文章详细介绍了HTML中`<font>`标签的用法,包括如何分别设置字体风格(`font-style`)、字体粗细(`font-weight`)、字体大小(`font-size`)和字体类型(`font-family`),并通过实例代码演示了如何综合使用这些属性来定义文本的字体样式。
HTML中font标签用法
|
18天前
|
移动开发 前端开发 开发者
从 HTML4 到 HTML5 的迁移标签
【8月更文挑战第24天】
27 0