精华内容
下载资源
问答
  • HTML5页面结构标签
    千次阅读
    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:17
    HTML结构标签 结构便签,顾名思义,大多数是没有太多特殊的作用的,但是它是构建一个网页基本结构的主要元素,此次会列出大家经常用来搭建结构的基本标签。 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:52
    header 元素是一种具有引导和导航作用的结构元素,通常用来放置整个页面或页面内的一个内容区块的标题,但也可以包含其他内容,因此整个页面的标题应该放在页面的开头。 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
    什么是HTMLHTML是Hyper Text Markup Language的缩写,...HTML基本结构: &amp;lt;html&amp;gt;//用来标记HTML文档的开始 &amp;lt;head&amp;gt; //用来标记HTML文档头部的开始 &amp;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:35
    html的特征是基于标签识别渲染源码,更确切的说是标签树,都是从html这个根标签写起,其下常包括head和body两个处于同一级别的子标签,分别负责浏览器头部(可暂时理解为网址框)以及网页主体的设置。 <html> ...
  • HTML框架结构标签(frameset)

    万次阅读 多人点赞 2018-06-17 10:14:32
    第一次了解到竟然还有HTML框架结构标签()。为此小编在实例中应用了一下,但是在搭建框架之初就遇到 了问题。为此总结本博客,以便大家能及时解决问题。 什么是HTML框架结构标签(&amp;lt;frameset&amp;...
  • 下面通过浏览器来查看这个页面的源代码,如图所示,这些源代码就是浏览器可以理解并展示的一种计算机标签语言—HTML HTML 是 Hyper Text Markup Language 的缩写,中文翻译为超文本标记语言,是制作网页最基本的...
  • HTML——表格的结构标签

    千次阅读 2018-04-29 12:17:13
    HTML 中除了对表格的设计标签外,还有一些标签是用来明确表格结构的,这些标签在源码中清晰的区分表格结构HTML中规定了&lt;thead&gt;、&lt;tbody&gt;和&lt;tfoot&gt; 三个标签,分别...
  • 引言 在本节中,笔者将向大家讲述三部分内容,分别介绍HTML5时代的召唤,跟HTML4的区别,以及HTML5中带来的新的结构标签HTML5时代的召唤 HTML4与HTM
  • HTML5 新增结构标签(元素)

    千次阅读 2016-10-16 23:38:03
    本着学习并记录的态度,把看过的记录记录,为自己回顾用,和新人踩坑用。 注意:h5新标签用兼容性问题,不过现代浏览器基本可以不用考虑这个兼容性了。 HTML5新增主结构元素和非主结构元素
  • Html基本结构、语法规则、常用标记/标签 (h1-h6/p /i/em/b/hr/br/strong/b/sub/sup/del/)及空格符&nbsp; 注:自己总结的下面分开重点和不重点的地方 一、HTML的定义: HTML:是超文本标记语言(Hpyer text ...
  • HTML标签标签 <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:21
    HTML5基本网页结构以及标签的改变
  • react获取HTML结构,并正常渲染标签

    千次阅读 2019-09-17 11:20:40
    在工作中、项目中,有时候我们会遇到后端发来的数据为html结构,我们需要把他们正常渲染出来。 我们有两种方法: 使用原生方法:innerHTML:会写入内容并覆盖原内容 - 我们可以使用它来获取和写入某个元素标签的...
  • DW-HTML文件基本结构和基本标签

    千次阅读 2017-12-09 17:28:58
    html文件的结构:一个HTML文件是有自己固定的结构的。  网页标题  ...网页文件内容 ① 称为根标签,所有的网页标签都在>中。反思我们实践时出现的问题 ② 标签 用于定义文档的头部,它是所有头部...
  • HTML5系列 03 结构标签

    千次阅读 2021-07-13 15:36:01
    header 页眉标签 header标签代表一块内容区域的头部,一个页面中可以有一个或多个header标签。 它是一个块级标签: nav 导航标签 nav标签代表一块内容区域的导航,一个页面中可以有一个或多个nav标签。 它是一个...
  • 关于HTML--结构标签

    千次阅读 2017-04-17 21:18:47
    今天主要介绍一些html5新的结构标签
  • HTML基本组成结构标签

    千次阅读 2017-06-14 15:15:24
    其实组成结构用一张图来简单了解下如下 目前一般网站的结构是会如此不是很清晰简单 先来说说header头部 这样是不是更加清楚了 导航栏是引导用户查看网站内容的快捷入口,打个比方例如你去超市买...
  • html文档的基本结构标签标签标签负责组织。标签负责告诉浏览器这是一个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:53
    H5中新添加的结构标签种类常用 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:51
      html页面的基本结构如下,其中head为页面的头部信息,body为页面的主体信息。 <!DOCTYPE html> <html lang="zh-CN"> <head></head> <body></body> </html> 文档...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 428,376
精华内容 171,350
关键字:

html结构标签