01 软件介绍

使用的是VSCode-64，以下为软件安装包：

链接：https://pan.baidu.com/s/1iHdWUdnp8ZarCl-NuET9hw
提取码：gglu

注：百度网盘链接。

02 网页结构

1.使用快捷键Shift+!，然后回车，生成模板：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
</html>

2.解析：

（1）文档声明告诉浏览器我是按照html规范编写，如果不写的话，会让页面陷入一种怪异模式，从而出现乱码

（2）html标题：根标签/根元素一个页面就一个html，所有内容必须写在html中

（3）head标签：保存一些元信息，不会在页面中展示，只是帮助浏览器解析页面

（4）body标签网页主体内容都写在body里面

（5）meta 标签，自结束标签设置一些元信息，标签里可以放属性，属性值（例如UTF-8）

charset属性：设置字符集

编码：将字符转成二进制

解码：将二进制转成字符显示

编码和解码参考的密码本就是字符集

常用的字符集：

UTF-8：万国码

GB ：中国的

GBK ：中国扩展码

（6）title标签：标题标签，默认显示在浏览器的标题栏中；

最重要的功能: 帮助浏览器收录页面，然后显示给用户，对我们的网站推广，非常重要

以下为上述代码解析总和解析界面

<!--注释快捷键：ctrl+/   和  alt+shift+A  注意： 1：注释不能嵌套2：养成注释的习惯
-->
<!-- <!DOCTYPE html>   文档声明 告诉浏览器我是按照html规范编写，如果不写的话，会让页面陷入一种怪异模式，从而出现乱码 -->
<!DOCTYPE html>
<!-- html标题  根标签/根元素 一个页面就一个html，所有内容必须写在html中--><html lang="en">  <!-- head标签  保存一些元信息，不会在页面中展示，只是帮助浏览器解析页面 -->
<head><!-- meta 标签 设置一些元信息标签里可以放属性，属性值charset属性：设置字符集编码：将字符转成二进制解码：将二进制转成字符显示编码和解码参考的密码本就是字符集常用的字符集：UTF-8：万国码GB   ：中国的GBK  ：中国扩展码--><meta charset="UTF-8"><!-- 以下两个配置：移动端（手机端、平板端等） --><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- title 标签  默认显示在浏览器的标题栏中最重要的功能: 帮助浏览器收录页面，反馈给用户--><title>你看我在哪里</title>
</head><!--body标签  网页主体内容都写在body里面  -->
<body>这是我的第一个界面
</body>
</html>

03 实体

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 实体1.什么是实体浏览器会有预留字符，例如：空格、大于号、小于号，没有办法直接写要用特殊的，额外的字符来表示2.实体的语法&实体的名字；3.常用的实体空格:&nbsp;大于号：&gt;小于号：&lt;版权符号：&copy;更多的实体https://www.w3school.com.cn/html/html_entities.asp-->何张恒，    完何张恒,&nbsp;&nbsp;&nbsp;&gt;&gt;&lt;&lt;&lt;&copy;&copy;&copy;&copy;完</body>
</html>

04 常用的标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="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><!-- 1:标题标签 h1-h6从样式看：一级标签最大，六级最小从语义上看，一级标签的语义最重标题标签对于搜索引擎收录页面来说，他的重要性仅次于title--><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标签</h4><h5>五级标签</h5><h6>六级标签</h6><!-- 2:段落标签 P标签表示一个自然段 段落和段落之间有间距--><p>低端货卡接电话较好的卡合电机</p><p>gshacbkjcdsj电视剧防水层地方会绝世风华好发 合肥会带动</p><!-- 3：hgroup标题分组的 从语义上做区分--><hgroup><h1>古诗</h1><h3>作者</h3></hgroup><!-- 4：em强调标签：会有一点斜体  强调语音语调--><!-- 5：strong强调标签：会加粗    强调内容的重要性-->今天天气<em>真热</em>今天天气<strong>真热</strong><!-- 6：换行标签 br -->黄金时代差多少分VN孙女士科，<br/>技部海上繁花上端均反倒是减,<br/>肥上开设VS就设计费设计费VS飞机杯v就还是不是.<!-- 7：分割线 hr  在页面中就会有一条水平线 --><hr><!-- 8：center 产生居中效果 --><center><h1>何张恒</h1><p>恒哥</p><p>恒哥</p></center><!-- 9：引用标签 q标签，blockquote --><q>电视剧粉红色的</q><br>孔子曰：<blockquote>换肤大师解封了看发可怜上方</blockquote></body>
</html>

HTML5-----网页结构相关推荐

详解HTML5网页结构
HTML5的网页结构 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...
HTML5 新增结构元素分为主体结构元素和非主体结构元素
做移动端有一段时间,今天有同事问了我 article 和 section 标签的使用,模模糊糊的解释了下,他似懂非懂,有点小尴尬.忽然间觉得自己有必要再翻翻书籍,重温下 html5 的新元素.今天先介 ...
经典html5网页,HTML5网页设计经典
知名HTML5专家及教育学博士新著,深受欢迎的设计师完全养成手册案例典型,涉及四大行业类型:咖啡屋.宠物医院.度假村和瑜伽馆题型多样,章末包含选择题.填空题.简答题.应用题以及案例实战等及时穿插FAQ ...
（三）html5的结构
一.新增的主题结构元素在html5中,为了使文档的结构更加清晰明确,追加了几个页眉.页脚.内容区块等文档结构相关的结构元素, 1.article元素 article元素代表文档.页面或者应用程序中独 ...
html5 手机站点,HTML5移动端手机网站基本模板 HTML5基本结构
HTML5移动端最基本网页模板代码(以下HTML代码可直接拷贝复制使用): 手机网站最基本HTML模板 body{font-size:62.5%;font-family:"Microsoft ...
JAVA制作网页的软件有哪些,html5开发工具(开发html5网页的软件有哪些)
html5开发工具 1.SublimeText SublimeText是一个跨渠道的代码编bai辑器,一起支持duWindows.Linux.MacOSX等操作系统,也是HTML和散文zhi先进的文本 ...
html网页页面制作用到了什么技术,技术干货｜常用的HTML5网页制作软件，这些你有在用吗？...
原标题:技术干货|常用的HTML5网页制作软件,这些你有在用吗? 1.Sublime Text Sublime Text是一个跨平台的代码编辑器,同时支持Windows.Linux.Mac OS X等 ...
HTML5基本结构及标签
<!DOCTYPE html> <html><head><title>我的第一个HTML5页面</title></head>&l ...
HTML5交互性是什么意思,HTML5的结构和语义(5):交互
HTML5的结构和语义(5):交互互联网发布时间:2008-10-17 18:55:30 作者:佚名我要评论 http://www.webjx.com/html_xhtml/2008 ...
jre是否支持html5,html5的结构
目录一.新增的主体结构元素 1.1.article元素 1.2.section元素 1.3.nav元素 1.4.aside元素 1.5.time元素 1.6.pubdate元素二.新增的非主体结构 ...

HTML5-----网页结构

01 软件介绍

02 网页结构

03 实体

04 常用的标签

HTML5-----网页结构相关推荐

最新文章

热门文章