-
2020-07-07 10:11:25
HTML5页面结构标签
<header>......</header>//头部 <nav>........<nav> //导航 <section>......</section> //定义文档中的节,比如说章节,页眉之类的 <aside>......<aside> //侧边栏 <footer>......<footer> //页脚 <article>......</article> //代表一个独立的、完整的相关内容块,可独立于页面其他内容使用, //例如一篇完整的论坛帖子,一篇博客文章,一个用户评论等等...布局效果显示:111
更多相关内容 -
HTML的结构标签
2019-03-24 19:51:17HTML的结构标签 结构便签，顾名思义，大多数是没有太多特殊的作用的，但是它是构建一个网页基本结构的主要元素，此次会列出大家经常用来搭建结构的基本标签。 div 盒子标签 没有任何的样式 双标签 P 段落标签 默认...展开全文HTML的结构标签
结构便签，顾名思义，大多数是没有太多特殊的作用的，但是它是构建一个网页基本结构的主要元素，此次会列出大家经常用来搭建结构的基本标签。
- div 盒子标签 没有任何的样式 双标签
- P 段落标签 默认有上下外边距 双标签
- h1~h6 标题标签 字体逐次减小 双标签 默认上下边距 字体加粗 字体变大 h1为主标签 其余为副标签 主标签一个网页只能出现一次
- span 空元素标签 没有任何意义 双标签
- em和i 斜体字标签 双标签 虽然都是斜体字标签，但是em标签具有强调语义，强调作用是针对浏览器的，用户从界面上看不出来两个的区别
- strong与b 加粗字体标签 双标签 strong具有强调的语义
下面是代=代码举例：
<!--网页基本结构--> <!doctype html> <!--文档申明 !(申明） doc(document 文档) html (html5) --> <html> <!--整个网页结构的最顶层元素 根标签--> <!-- 标签之间的关系 包含关系 （父子关系） html 里面包含head和body标签 子级相对于父级标签用一个tab或者4个空缩进 并列关系（兄弟关系） head和body是兄弟关系 --> <head><!-- 头部标签 看不见但是又和我们本身相关的一些东西(标签)--> <!-- 计算机只认识机器语言 0 1 字符集（charset） 内容（content） 目标（meta） utf-8 通用编码 大小无所谓 gbk 中文编码 文件编码和申明的编码不一致时会出现乱码问题 name,content都是标签的属性 一个标签可以有多个属性，中间用空格隔开 属性=“值” --> <meta charset="UTF-8" /><!-- 申明当前网页的字符编码 保存时的编码和这里的要一致--> <!-- 网页的标题 --> <title>今天是第一节课</title> <!-- 对网页的描述 产品说明书 --> <meta name="description" content="我们今天学了网页的制作，我很ok" /><!-- 网页的描述，完整的句子 --> <meta name="keywords" content="结构,形式,行为" /><!-- 网页的关键词：一个个描述的词语 --> <style type="text/css"> div,p,h1{ border:1px solid red; } </style> </head> <body><!-- 身体标签（可视标签）能够看得见东西 () --> 好开心啊！！好开心！ <!-- 便签的分类 看不见的标签(head) 可视标签(body) 用来搭建结构（结构标签） 特殊的功能 ctrl +b 快捷在浏览器中打开 用标签搭建结构的过程中，尽量的去选择语义贴近的标签去做 --> <div>我是盒子div</div><!-- 盒子标签 无任何默认样式 语义用来装东西的盒子--> <p>我是段落P标签</p><!-- 段落标签，有默认的上下外边距 语义就是个段落--> <h1>我是标题标签h1</h1><!-- 标题标签，有默认的上下外边距，字体默认加粗变大 语义就是个标题 --> <h2>我是标题标签h2</h2> <h3>我是标题标签h3</h3> <h4>我是标题标签h4</h4> <h5>我是标题标签h5</h5> <h6>我是标题标签h6</h6><!-- 标题一共有6个，其中h1是核心标题，其他都是副标题，核心标题同一个网页只能用一次 --> <span>空元素标签</span><!-- span (跨度) 空元素标签，没有任何语义和形式，什么时候都可以使用 --> <!-- 斜体标签 em i em 强调的含义 i 单纯的斜体 默认字体斜体 --> <em>em斜体标签，含强调的语义</em> <i>i斜体标签，单纯斜体</i> <!-- 加粗字体 strong b strong 强调的含义 b 单纯的加粗 默认加粗字体 --> <strong>加粗字体strong(有强调的含义)</strong> <b>加粗字体</b> </body> </html>网页制成样式：
这是代码编写的产生效果，更容易让学者参考代码进行学习。
-
HTML基本结构标签
2021-09-01 19:28:52header 元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但也可以包含其他内容，因此整个页面的标题应该放在页面的开头。 header 定义文档的页眉，在一个网页中可以多...展开全文HTML基本结构标签
<header>......</header>//头部 <nav>........<nav> //导航 <section>......</section> //定义文档中的节,比如说章节,页眉之类的 <aside>......<aside> //侧边栏 <footer>......<footer> //页脚 <article>......</article> //代表一个独立的、完整的相关内容块,可独立于页面其他内容使用, //例如一篇完整的论坛帖子,一篇博客文章,一个用户评论等等...布局效果显示:
定义标题栏：header
header 元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但也可以包含其他内容，因此整个页面的标题应该放在页面的开头。
header 定义文档的页眉，在一个网页中可以多次使用 header 元素。
语法&案例：
<header> <h1>网页标题</h1> </header> <article> <header> <h2>文章标题</h2> </header> <p>文章正文</p> </article>定义标题组：hgroup
hgroup 元素可以为标题或者子标题进行分组，通常与 h1~h6 元素组合使用，一个内容块中的标题及其子标题可以通过 hgroup 元素组成一组。但是，如果文章只有一个主标题，不需要此元素。
语法：
<header> <hgroup> <h1>主标题</h1> <h2>副标题</h2> </hgroup> </header>定义导航块：nav
nav 元素是一个可以用作页面导航的链接组，其中的导航元素链接到其他页面或当期页面的其他部分。只需要将主要的、基本的链接组放进 nav 元素即可。
语法：
<nav> 语义 :定义导航栏 </nav>定义侧边栏：aside
asdie 元素用来表示当前页面或文章的附属信息部分，可以包含当前页面或主要内容相关的引用、侧边栏，以及其他类似的有别于主要内容的部分。
主要由以下两种用法：
1、作为主要内容的附属信息部分
2、作为页面或站点全局的附属信息部分
语法：
<aside>定义其所处内容之外的内容</aside>定义主要区域：main
main 元素表示网页中的主要内容。该区域应该为每一个网页中所特有的内容，不能包含整个网站的导航图、版权信息等整个网站内部的共同内容。
每个网页内部只能放置一个 main 元素。不能将 main 元素放置在任何 article、aside、footer、header 或 nav 元素内部。
语法：
<main>网页的主要内容</main>定义文章块：article
article 元素用来表示文档、页面中独立的、完整的、可以独自被外部引用的内容。
语法：
<article> 语义: 定义文章</article>定义内容块：section
section 元素用于对网站或应用程序中页面上的内容进行分区，section 元素关注内容的独立性。
语法：
<section> 语义： 定义区域</section>定义脚注栏：footer
footer 元素可以作为内容块的脚注，可以在内容块中添加注释，或者在网页中添加版权信息等。脚注信息有很多形式，如作者、相关阅读链接及版权信息等。
在页面中可以重复使用 footer 元素。
语法案例：
<footer> <ul> <li>关于</li> <li>导航</li> <li>联系</li> </ul> </footer>
-
Web前端 HTML 基本结构标签
2022-03-22 18:55:03每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写。 标签名 定义 说明 <html> </html> HTML标签 页面中最大的标签，我们称为 根标签 <head&...展开全文第一个HTML
每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写。
标签名 定义 说明 <html> </html> HTML标签 页面中最大的标签，我们称为 根标签 <head> </head> 文档头部 注意在head标签中我们必须要设置的标签是title <title> </title> 文档标题 让页面拥有一个属于自己的页面标题 <body> </body> 文档的主体 元素包含文档所有内容，页面内容基本都是放到body里面 接下来我们创建一个记事本文件，编写代码，规范的代码编写是要有层级关系的，父子层级和兄弟层级，例如<html>标签是<head>标签的父标签，<head>标签和<body>是兄弟标签。
这样我们可以更加直观的观察我们写的代码。
写好后将txt文件格式改成html文件格式，然后打开
由此可见，我们<title>标签的内容显示在了我们网站的最上面，也就是网页标签
<body>标签的内容显示在了我们网页内容部分里
以上的标签是html的基本标签，也是骨架标签，是每个网站必须要有的标签，需要牢记。
下面请我们的小猪佩奇来给我们演示一下，这些基础标签分别代表着网页的什么部分
代码开头我们可以用<!DOCTYPE html>标签来声明使用的html版本（这个是文档类型声明标签，所以并不属于html里面的内容，要把这个标签写在第一行）
<html>标签，网页最大的标签，也就是根标签，所有标签都要写在这个标签里面 。
<head>标签，文档的头部，小猪佩奇的头（鼓风机），用于设定一些网页的属性
<title>标签，网页标题，放在<head>标签里，也是头部标签必须要有的标签
<body>标签，文档的主体，页面内容基本都是放到<body>标签里面。
用记事本文件编写有很多的不便利，代码都要自己一个个敲写，个人觉得新手刚学可以用用基础的记事本文件，可以加深印象，有基础后可以使用上面的工具，写网页的工具很多，但写代码都差不多，只要学会其中一种，其他的就都很容易上手。
可以按照自己的爱好下载自己喜欢的编写代码的工具
下面我们用VSCode演示一下编辑过程
VSCode的使用
1.双击打开软件。
2.新建文件(Ctrl+N )。
3.保存(Ctrl+S ),注意移动要保存为.html文件
4.Ctrl +加号键, Ctrl +减号键可以放大缩小视图
5.生成页面骨架结构。
输入!按下Tab键。
6.利用插件在浏览器中预览页面:单击鼠标右键,在弹出出口中点击"Open In Default Browser"。
这个软件默认是英文，可以安装一个中文插件
推荐安装的插件
<!--注释内容--> 这是一个注释标签，搜索引擎不会读取，就像Python的#号和""" """一样，起到注释代码的作用，可以方便起到维护和阅读的作用。
<!DOCTYPE html> <!--告诉浏览器这个页面使用html5版本来显示页面的--> <html lang="en"> <!--lang="en"告诉浏览器或搜索引擎这是一个英文网站-->> <head> <meta charset="UTF-8"> <!--必须写的代码，采取UTF-8编码格式保存文字，如果不写容易导致网页乱码或显示错误。-->> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>这里可以写网页标签</title> </head> <body> 这里可以书写页面显示内容 <h1>一级标题</h1> <!--标题共有六个的等级，h1~h6，h1标题为最大的标题--> <p>段落标签</p> <!--可以将一个网页分为若干个段落--> </body> </html><h1>段落标签</h1>
<p>这是一个段落标签</p>网页文字内容若想分段，必须用到<p>分段标签，不能想word文档一样可以空格回车换行，浏览器会将多个空格视为一个空格，没有分段标签就不会换行，将所有内容挤在一起。
写网页时可以用若干个<p> 内容 </p>标签将文档分为若干个段落。
<br />这是一个换行标签 (brack的缩写，意为打断、换行) 特殊标签，单身标签，只有一个在HTML中网页内容通常从左到右排序，到了最右端才会自动换行，若想希望某段文本强制换行显示，则可使用强制换行标签<br />，代码在执行到<br />标签时，会立刻换行，不管右侧空间还有多少，直接换行。
注意：<br />是个单标签。
若果没有标题标签和分行标签的文章打开就会挤在一团，即使你在写的时候已经分好行了也不行
写好标题标签和分段标签的代码：
-
HTML5 结构标签
2021-06-13 02:33:07一、定义标题栏：headerheader 元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但也可以包含其他内容，因此整个页面的标题应该放在页面的开头。header定义文档的页眉... -
HTML基本结构及基本标签
2018-08-11 08:56:47什么是HTML： HTML是Hyper Text Markup Language的缩写，...HTML基本结构： &lt;html&gt;//用来标记HTML文档的开始 &lt;head&gt; //用来标记HTML文档头部的开始 &lt;/... -
html文档的基本结构和常用标签
2019-08-17 03:44:43什么是HTML2.标签、元素3.html文档的基本结构二、HTML中常用标签1.标题标签<h1>--<h6>2.段落标签<p>3.常见的转义字符4.<i>和<em>5.<b>和<strong>6.<u>7.<br>... -
HTML5基本结构及标签
2020-05-22 14:24:02<!DOCTYPE html> <html> <head> ...我的第一个HTML5页面<... 你好，HTML5!.../html>...HTML5HTML5基本结构DOCTYPEbasemetastylelinkscriptboby注释字符实体图像文件HTML4.01转换为H -
html标签
2021-06-16 01:36:46第一部分什么是 HTMLHTML(HyperText Markup Language) 不是一门编程语言，而是一种用来告知浏览器如何组织页面的标记... 一对标签(tags)可以为一段文字或者一张图片添加超链接，将文字设置为斜体，改变字号，等等。... -
html基础-1-树形标签结构
2020-05-05 22:58:35html的特征是基于标签识别渲染源码，更确切的说是标签树，都是从html这个根标签写起，其下常包括head和body两个处于同一级别的子标签，分别负责浏览器头部（可暂时理解为网址框）以及网页主体的设置。 <html> ... -
HTML框架结构标签（frameset）
2018-06-17 10:14:32第一次了解到竟然还有HTML框架结构标签（）。为此小编在实例中应用了一下，但是在搭建框架之初就遇到 了问题。为此总结本博客，以便大家能及时解决问题。 什么是HTML框架结构标签（&lt;frameset&... -
HTML 基础【1】 -- 入门介绍 / 基本结构 / 块级标签 / 行内标签
2022-01-13 14:16:55下面通过浏览器来查看这个页面的源代码，如图所示，这些源代码就是浏览器可以理解并展示的一种计算机标签语言—HTML HTML 是 Hyper Text Markup Language 的缩写，中文翻译为超文本标记语言，是制作网页最基本的... -
HTML——表格的结构标签
2018-04-29 12:17:13在HTML 中除了对表格的设计标签外，还有一些标签是用来明确表格结构的，这些标签在源码中清晰的区分表格结构，HTML中规定了<thead>、<tbody>和<tfoot> 三个标签，分别... -
Html5 学习系列（二）HTML5新增结构标签
2018-08-15 12:31:36引言 在本节中，笔者将向大家讲述三部分内容，分别介绍HTML5时代的召唤，跟HTML4的区别，以及HTML5中带来的新的结构标签。 HTML5时代的召唤 HTML4与HTM -
HTML5 新增结构标签（元素）
2016-10-16 23:38:03本着学习并记录的态度，把看过的记录记录，为自己回顾用，和新人踩坑用。 注意：h5新标签用兼容性问题，不过现代浏览器基本可以不用考虑这个兼容性了。 HTML5新增主结构元素和非主结构元素 -
Html基本结构、语法规则、常用标记/标签
2020-09-18 09:47:43Html基本结构、语法规则、常用标记/标签 （h1-h6/p /i/em/b/hr/br/strong/b/sub/sup/del/）及空格符 注：自己总结的下面分开重点和不重点的地方 一、HTML的定义: HTML:是超文本标记语言（Hpyer text ... -
HTML的基本结构标签（html，head，title，body）
2020-05-20 17:47:50HTML标签 根标签 <head> </head> 网页头部 网页head标签中必须要设置title标签 <title> </title> 网页标题 <body> </body> 网页的主体 页面的内容基本都是在body里 ''' <... -
HTML标签
2021-05-21 14:42:21基本结构标签 常用标签 标题标签 - 段落标签 换行标签 语法规范 HTML标签是由尖括号包围的关键词，如<html> HTML标签通常是成对出现的，如<html>和</html>，称为双标签（开始标签... -
HTML5基本网页结构以及标签的改变
2017-07-29 11:07:21HTML5基本网页结构以及标签的改变 -
react获取HTML结构，并正常渲染标签
2019-09-17 11:20:40在工作中、项目中，有时候我们会遇到后端发来的数据为html结构，我们需要把他们正常渲染出来。 我们有两种方法： 使用原生方法：innerHTML：会写入内容并覆盖原内容 - 我们可以使用它来获取和写入某个元素标签的... -
DW-HTML文件基本结构和基本标签
2017-12-09 17:28:58html文件的结构：一个HTML文件是有自己固定的结构的。 网页标题 ...网页文件内容 ① 称为根标签，所有的网页标签都在>中。反思我们实践时出现的问题 ② 标签 用于定义文档的头部，它是所有头部... -
HTML5系列 03 结构系标签
2021-07-13 15:36:01header 页眉标签 header标签代表一块内容区域的头部，一个页面中可以有一个或多个header标签。 它是一个块级标签： nav 导航标签 nav标签代表一块内容区域的导航，一个页面中可以有一个或多个nav标签。 它是一个... -
关于HTML--结构化标签
2017-04-17 21:18:47今天主要介绍一些html5新的结构化标签 -
HTML基本组成结构与标签
2017-06-14 15:15:24其实组成结构用一张图来简单了解下如下 目前一般网站的结构是会如此不是很清晰简单 先来说说header头部 这样是不是更加清楚了 导航栏是引导用户查看网站内容的快捷入口，打个比方例如你去超市买... -
html文档的基本结构由哪三对标签负责组织
2021-06-10 16:28:38html文档的基本结构由标签、标签和标签负责组织。标签负责告诉浏览器这是一个HTML文档；标签是所有头部元素的容器；标签负责定义文档的主体。html文档的基本结构由标签、标签和标签负责组织。(推荐教程：html教程)... -
HTML之框架结构标签的简单使用
2017-11-27 22:51:23框架标签的简单使用 框架： 通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面...框架结构标签 该标签定义如何将窗口分割为框架，每个frameset定义了一系列行或列（rows或cols），他们的值规定了每行或每列占 -
第六章：HTML结构与基本标签
2021-09-06 11:16:34图3-1是HTML的基本结构，从中我们可以看出，一个页面是由4个部分组成的。 文档声明：。 html标签对：。 head标签对：。 body标签对：。 一个完整的HTML页面，其实就是由一对对的标签组成的（当然也有例外）。接下来... -
HTML中结构化标签的使用
2016-02-17 23:42:53H5中新添加的结构标签种类常用 main标签 article标签 section标签 aside标签 nav标签 header标签 footer标签 为什么用这些结构标签H5中新添加的结构标签种类（常用）main标签main标签表示页面的主要显示内容，页面有... -
HTML超链接标签（重点）
2021-01-02 18:32:58在HTML标签中，<a>标签用于定义超链接，作用是从一个页面链接到另一个页面。 第一部分：超链接的语法格式 <a href="跳转目标" target="目标窗口的弹出方式">文本成图像</a> 单词anchor的缩写，意... -
HTML5 标签汇总
2020-10-28 17:11:51html页面的基本结构如下，其中head为页面的头部信息，body为页面的主体信息。 <!DOCTYPE html> <html lang="zh-CN"> <head></head> <body></body> </html> 文档...
