[网页编程]-02 HTML5 基本结构及标签

已于 2024-01-04 15:10:17 修改
阅读量380 收藏 6
点赞数 5
文章标签： 学习 前端 开发语言 学习方法 java 改行学it
于 2023-12-12 15:52:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xuebajiaoyu/article/details/134951516
版权

重点内容及常用标签

  • HTML(Hyper Text Markup Language)：超文本标记语言 。
  • HTML的主体结构有head标签 ,body标签
  • charset 标签用于定义外部脚本文件中所使用的字符编码。
  • title是文档的标题。
  • meta 元素可提供有关页面的元信息（meta-information），针对搜索引擎和更新频度的描述和关键词。
  • http-equiv属性:相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，中的内容其实就是各个参数的变量值。
  • h1~h6 标签可定义标题。
  • pre按照我们指定的格式输出。
  • hr 会在屏幕中出现一道分割线。

基本结构级常用标签

参考代码

Head标签的子标签

<!DOCTYPE html>
<!--HTML中的文档约束（DTD）
	
	HTML5的文档约束  <!DOCTYPE html>
	HTML  4.01文档约束   <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
                                 "http://www.w3.org/TR/html4/strict.dtd">
	
-->
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		
		<!--搜索引擎优化-->
		<meta name="author"  content="朱自清，张三" />
		<meta name="description" content="盼望着盼望着东风来了" />
		<meta name="keywords" content="东风，盼望" />
		
		<!--自动刷新网页-->
		<meta http-equiv="refresh" content="5;http://www.chaoge.com" />
		
		<!--禁止网页缓存  (了解)-->
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Cache-Control" content="no-cache" />
		<meta http-equiv="expires" content="0" />
		
	</head>
	<body>
		
	</body>
</html>

body中基本标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!--标题标签  h1-h6  自动的加粗加黑  会自动的换行   align:调整标签的位置 （默认是left） -->
		【新时代·幸福美丽新边疆】西藏：代代接力守护绿色家园
		<h1 align="right">【新时代·幸福美丽新边疆】西藏：代代接力守护绿色家园</h1>
		<h2>【新时代·幸福美丽新边疆】西藏：代代接力守护绿色家园</h2>
		<h3>【新时代·幸福美丽新边疆】西藏：代代接力守护绿色家园</h3>
		<h4>【新时代·幸福美丽新边疆】西藏：代代接力守护绿色家园</h4>
		<h5>【新时代·幸福美丽新边疆】西藏：代代接力守护绿色家园</h5>
		<h6>【新时代·幸福美丽新边疆】西藏：代代接力守护绿色家园</h6>
		<!--<h7>【新时代·幸福美丽新边疆】西藏：代代接力守护绿色家园</h7>-->
		
		<!--分割线标签   width：宽度  500px:像素   color:颜色  align:位置（默认center）  size:垂直方向的大小 -->
		<hr width="500px" color="red" align="left" size="20px"/>
		
		
		<!--p段落标签   br:换行    &nbsp;空格-->
		
		<p>&nbsp;&nbsp;新华网阿里5月11日电（张宸 雪珍）55岁的白玛加布看着在<br />
			玛旁雍错边飞舞的海鸥和欢呼的游客，脸上露出了欣慰的笑容。</p>
			
		<p>&nbsp;&nbsp;新华网阿里5月11日电（张宸 雪珍）55岁的白玛加布看着在<br />
			玛旁雍错边飞舞的海鸥和欢呼的游客，脸上露出了欣慰的笑容。</p>
			
		<!--预文本标签  按照我们指定的格式输出 （灵活性比较的大）-->
		<pre>
			
			新华网阿里5月11日电（张宸 雪珍）
			55岁的
			白玛加布      看着在
			玛旁雍错边飞舞的海鸥
			和欢呼的游客，脸上露出了欣慰的笑容
			
		</pre>
		
	</body>
</html>

body中基本标签2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!--下划线标签-->
		<u>好好学习</u>
		<!--斜体标签-->
		<i>好好学习</i>
		<!--加粗加黑标签-->
		<b>好好学习</b>
		<!--删除线标签-->
		<del>好好学习</del>
		<!--上标标签-->
		2<sup>3</sup>
		<!--下标标签-->
		log<sub>7</sub>
		<!--字体变小标签-->
		<small>好好学习</small>
		<!--字体放大-->
		<big>好好学习</big>
		
		<!--字体标签  face：指定字体的风格-->
		<!--好好学习-->
		<font color="red" size="25px" face="宋体">好好学习</font>
		
		<span>好好学习</span>
		
		<hr />
		 <!--列表标签{[1]有序列表，[2]无序列表，[3]自定义列表}-->
		<!--
			作用：
			 【1】树形菜单
			 【2】导航栏的布局
			
			
		-->
		<!--[1]有序列表-->
		<ol type="I">
			
			<li>javaSE</li>
			<li>javaEE</li>
			<li>javaME</li>
		</ol>
		
		
		<!--[2]无序列表-->
		<ul type="square">
			
			<li>javaSE</li>
			<li>javaEE</li>
			<li>javaME</li>
		</ul>
		
		<!--[3]自定义列表-->
		<dl>
			<dt>java</dt>
			<dd>javaSE</dd>
			<dd>javaEE</dd>
			<dd>javaME</dd>
		</dl>
		
		<!--跑马灯标签-->
		
		<marquee direction="right" scrollamount="40px">好好学习</marquee>
		
	</body>
</html>

想了解web前端课程的同学，可以扫码添加客服微信哦

学坝教育
关注
HTML5系列 03 结构系标签
weixin_43422005的博客
07-13 2408
header 页眉标签 header标签代表一块内容区域的头部，一个页面中可以有一个或多个header标签。 它是一个块级标签： nav 导航标签 nav标签代表一块内容区域的导航，一个页面中可以有一个或多个nav标签。 它是一个块级标签： main 主内容标签 mian标签代表主要内容区域，一个页面中可以有一个或多个main标签，但通常只会定义一个。 它是一个块级标签： footer 页脚标签 footer标签代表一块内容区域的页脚，一个页面中可以有一个或多个footer标签，通常与header标签
静态网页的基本结构及标签
weixin_45860871的博客
07-03 4473
静态网页的基本结构及标签 HTML概念 超文本标记语言HTML是生成WWW网页文件的语言，用以生成超文本文档。在文档中，可以加入任何元素(文本、图像、动画、声音等)的链接 使用浏览器浏览的网页就是HTML文档 通常是使用记事本作为HTML文档的编辑器，利用浏览器浏览文档内容 HTML发展史 网页三兄弟 HTML 负责整体框架以及内容 JavaScript 负责数据验证数据交互 CSS 负责网页的美化 特效 数据验证 静态网页 静态网页称为普通网页 所谓的静态网页文件里面..
HTML5结构标签
GUIDM的博客
04-30 1857
GUIDM在这里祝大家节日快乐！ 博主有话说：我没有很系统的学过前端，如果有描述错误之处请大家纠正。让我们可以一起学习一起进步。 个人主页：GUIDM的主页 内容专栏：HTML5干货系列 此块内容为纯纯的干货，略显乏味枯燥，是笔记向的blog。如果觉得还不错，希望你可以一键三连，非常感谢。 官方解说：使用结构标签可以提升网页文档的可读性，并有利于搜索引擎优化。 GUIDM解说：格局打开，咱能用则用。 1、<section></section>: 定义文档中的节.
HTML5 快速标记参考（二）
最新发布
龙哥盟
08-15 942
原文：HTML5 Quick Markup Reference 协议：CC BY-NC-SA 4.0 九、HTML5 组织：文档内容层次结构 让我们讨论一下允许开发者在 HTML5 设计中实现内容层次结构的标签，例如不同级别的文档内容，称为标题，使用六个不同级别的“h”标签，以及 DTP(桌面出版)工具，例如地址区域和水平规则，以可视方式划分内容。这些允许你把你的文档内容组织成逻辑的主题部分。它们也被搜索引擎用来索引基于文本的内容和对基于文本的内容进行 SEO 排名。 在本章中，我将介绍实现文档内容层次
初学HTML5：结构化（语义化）标签
lalala_dxf的博客
07-23 1574
Html5新增了很多语义化标签，这些标签多为块元素，其表现形式与div完全一致，即没有特殊样式。但是div是无意义的块元素，而Html5新增的这些元素多为有意义元素，例如header表达了头部的意思，在网页中任意暗含头部的结构都可以使用header标签。什么是语义化标签语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化），便于开发者阅读和写出更优雅的代码的同时，让浏览器的爬虫和机器很好的解析。为什么要语义化1、语义化的HTML在没有CSS的情况下也能呈现较好的内容结构与代码结构......
html5 结构化标签,HTML5常用标签之结构化标记
weixin_30491017的博客
06-15 521
值得注意的是HTML元素是经常和HTML标签互用，还有一点就是一般用小写来码标签的。结构化标记和语义化标记：前者是描述标题和段落的元素；后者是表达特定含义的标记。下面我们来正式学习一下我们常用的标签，要求你把以下的标签学明白了，走起。一，标题1. ：字号最大，用在主标题，这个应该可以很好理解，相信你们都看过报纸哈。2. ：用在子标题。3 ：如果下面还有小标题，可以用。以此类推，我们还有,,标签，记...
html5结构化标签
susanzxl的专栏
03-13 354
为了方便搜索引擎更加快速的抓取网页的内容，
HTML基本标签及结构详解
01-18
1.HTML概述 1.HTML：超文本标记语言。是一种标识性语言，非...这一行代码意思：下面的文档标签将以html5进行解析--> <html> <!-头部.用来完成一个网页的相关设置-> <head> <meta charset=utf-
商业编程-源码-一个从网页tag里面分析url和url标题的类.zip
06-23
DOM解析器如BeautifulSoup（Python）或Jsoup（Java）可以创建一个可遍历的HTML结构，使我们可以轻松找到`<a>`和`<title>`标签。正则表达式则是一种更直接的方法，但可能需要更多的维护，因为HTML结构的变化可能导致...
网页前端高级编程-实验报告-DIV静态页面布局.doc
08-21
1. **HTML与CSS基础**：实验中使用HTML创建基本的页面结构，包括`<div>`标签用于内容区域划分，`<img>`标签插入图片，`<h1>`标签定义大标题，`<ul>`和`<li>`标签创建导航菜单。CSS则负责样式设计，通过`<link>`标签...
商业编程-源码-伊风文章(html)系统.zip
06-24
1. HTML基础：如何使用HTML标记语言创建网页结构，包括标题、段落、列表、链接、图片等元素。 2. CSS样式设计：如何使用CSS控制网页的布局和视觉效果，包括颜色、字体、尺寸、定位等。 3. JavaScript交互：如何通过...
html的基本结构及主要的标记
06-08
适合一些初学者学习了解html的结构及主要的几个标记
html5标签
weixin_30316097的博客
06-14 338
结构标签：(块状元素) 有意义的div 　<article> 标记定义一篇文章 <header> 标记定义一个页面或一个区域的头部 <nav> 标记定义导航链接 <section> 标记定义一个区域 <aside> 标记定义页面内容部分的侧边栏 <hgroup> 标记定义文件中...
html 结构化文档,HTML5 引入的新的结构化标签
weixin_39889337的博客
06-04 124
HTML5 引入的新的结构化标签清晰定义您的内容块 , Web 应用程序架构师, Binary Neuron L.L.C.简介： HTML5 引入了许多新标签，包括几个用于更好地描述文本结构的标签。在本文中，我们将了解这些 HTML5 引入的新的结构化标签以及如何使用它们将一个文档划分成几个内容块。文中的示例代码有助于举例说明这些概念。什么是 HTML5 ？HTML5 是超文本标签语言 (Hype...
HTML之结构化标签
MoeCodeFree的博客
09-02 533
HTML之结构化标签 今天主要介绍一些html5新的结构化标签 h5新增加了一些新的结构化标签，其目的呢想必是为了更直观的表达 这就不得不提到HTML的语义化了 我所理解的语义化呢就是选用合适的标签做合适的事然后更加直观的体现页面的内容 比如说你一看见 <img/>标签就应该知道这是一个放图片的标签了 所以呢h5也新增加了一些语义化更好的标签 好了，介绍之前呢，我找了一张图，方便大家直观的理解 相信大家已经从图中应该可以了解到我今天所要介绍的这些标签了 我们一个个的来看一下 section 表
【HTML5】使用结构标签进行网页布局
Need not to know
03-10 1955
使用结构标签进行网页布局 标签名 说明 <header></header> 标记头部区域的内容 <footer></footer> 标记脚部区域的内容 <section></section> Web页面中的一块独立区域 <article></article> 独立的文章内容 ...
html5结构标记
白二的诗的博客
12-07 562
1.header：页头，文档头 2.section：主体 3.nav：导航 4.aside：侧边栏 5.footer：底部 其中，header，section，footer使用频率较高。
HTML语义化、结构化标签（个人小结）
weixin_34293059的博客
12-10 638
结构化的标签，它在一个网页结构中，可以清楚的表示该部分在文档中的结构含义。 HTML5关注的不仅是呈现出一个页面的效果，它更加关注如何构造一个结构化的代码内容优雅地页面。HTML5新增的结构化标签虽然本质上都是div标签，但它用语义化的命名方式使得一个HTML页面更加有结构和清晰，在日后如果遇到重构等问题也更加方便。 语义化标签，顾名思义...
HTML5结构标签的学习
BANDGAP的博客
09-23 2233
HTML5的学习 HTML5中添加了拥有具体含义的HTML标签。 一、结构标签 1、&lt;section&gt; 定义文档中的节，用来表现普通的文档内容或应用区块，一般会带有标题。 例： &lt;section&gt; &lt;h1&gt;This is a test&lt;/h1&gt; &lt;article&gt; &lt;h2&gt;a story&lt;/h2&gt;
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值