网页结构初步认识

Rlyya

已于 2024-02-29 19:53:52 修改

阅读量1.5k

点赞数 45

文章标签： html

于 2024-02-29 19:01:26 首次发布

本文链接：https://blog.csdn.net/Rlyya/article/details/136378168

版权

测试编辑器

编辑器：vscode hbuildx pycharm jupybook ···

下载网址：1.https://www.dcloud.io/hbuilderx.html

2. https://code.visualstudio.com/Download

1:安装VSCode

2:打开html文件

3:创建一个新的网页

4:安装插件

chinese

live server

auto rename tag

auto close tag

chinese lorem

(1):设置中文：

>configure display language

(2):改字体大小

(3): 保存和自动更新，随时改，随时更新

Files: Auto Save

Files: Auto Save Delay

注释

面试题：

怎么去开发一个网站：（网页三剑客）

html 搭建网页结构毛胚房

css 修饰网页内容装修

JavaScript 交互开发智能家居的安装

注释快捷键：ctrl+/

注释符号内的内容不会被浏览器解析

注意：

1、养成注释的习惯

2、注释尽可能简洁明了

3、注释不能嵌套

网页结构

网页结构快捷键： shift+!

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>

</body>

</html>

文档声明

文档类型：html文档声明，在代码的最开始，跟浏览器约定好，网页开发的文档类型是html程序员需要按照html文档规范去编写代码，浏览器也按照html规范去编译代码，防止出现乱码，让开发陷入怪异模式

<!doctype html>

html标签 根标签所有的内容都要写在根标签内, 一个页面就一个根标签

head标签 主要是配置元信息，它里面的内容，是帮助浏览器编译代码

正常情况下，用户是看不到

body标签 书写网页的主体内容，是给用户看的，

用户看的所有网页内容，都写在body标签内

简单的网页结构

<!-- 最简单的网页结构 -->
<!DOCTYPE html>
<html>

<head>
    <title></title>
</head>

<body>
    <!-- 知识点1 -->
    <!-- 自动生成假中文：jw+数字   默认产生128个汉字-->
    责希妄妙极极，得、极，但圣为普千的向了不联，远未孔后不叩担尹低艳下叩娇自衣褒，三的保者郭锐者在当妙高帝沾请尝，杀骂是丰人有们实动俭，日骨德夫的馆，挟作俭九何羊亡卑到后屯弄韩才之畴秦的，吾谢这知战了争沉了土人得事欲，其己鼓洪事他会小帮厄与互由台担同天没，他。
    <!-- 自动生成英文：lorem+数字  -->
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit officiis quae quam vel dolor! Rem eaque obcaecati,
    adipisci quidem voluptate, nemo dolor porro quae quis veritatis sint vero voluptas aspernatur!
</body>

</html>

知识点1
自动生成假中文：jw+数字默认产生128个汉字
责希妄妙极极，得、极，但圣为普千的向了不联，远未孔后不叩担尹低艳下叩娇自衣褒，三的保者郭锐者在当妙高帝沾请尝，杀骂是丰人有们实动俭，日骨德夫的馆，挟作俭九何羊亡卑到后屯弄韩才之畴秦的，吾谢这知战了争沉了土人得事欲，其己鼓洪事他会小帮厄与互由台担同天没，他。
自动生成英文：lorem+数字
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit officiis quae quam vel dolor! Rem eaque obcaecati, adipisci quidem voluptate, nemo dolor porro quae quis veritatis sint vero voluptas aspernatur!

知识点2:
元素（标签）之间的关系
父子关系：直接包含与被包含的关系
父元素直接包含子元素
子元素直接被父元素包含
祖先后代关系：直接或间接包含与被包含的关系，包含父子关系
兄弟关系：拥有共同的父元素

title标签

csdn的网站标题及图标

<title>CSDN - 专业开发者社区</title> 
 <link rel="shortcut icon" href="https://g.csdnimg.cn/static/logo/favicon32.ico" type="image/x-icon">

京东的网站标题及图标

<title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>
  <link rel="icon" href="https://www.jd.com/favicon.ico" mce_href="//www.jd.com/favicon.ico" type="image/x-icon" />

title标签：设置网站的标题

它更重要的功能：帮助浏览器检索网站，帮助seo推广部门进行网站的推广

推广部门： seo 搜索引擎优化

sem 竞价推广

meta标签

meta标签，本身没有作用，可以配置属性及属性值，从而帮助浏览器解析

属性=“属性值” 是写在开始标签或者自结束标签尖括号内部的

charset="utf-8"

charset 属性配置字符集，设置密码本

utf-8 属性值字符集的一种叫万国码

编码将文字，图片，各种音视频等都转二进制

解码将二进制转成对应的文字，图片，音视频等

密码本编码和解码参考的标准

乱码编码和解码的参考标准不一

<meta charset="utf-8">

<meta name="description" content="京东JD.COM是国内专业的款智能手机网上购物商城,提供款智能手机价格,报价,参数,评价,图片,品牌等信息.买款智能手机,上京东就购了.">

<meta name="keywords" content="款智能手机，款智能手机价格，款智能手机图片，款智能手机怎么样，款智能手机品牌 ,京东">

标签的分类

1、按形式分：

双标签：开始标签和结束标签， eg：html、body、title

单标签(自结束标签)：开始标签和结束标签就它自己 eg:meta

2、按特点分

块标签，行内标签，行内块标签

完整的网页结构

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <!-- 配置移动端完美（理想）视口 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>网站标题</title>
</head>

<body>
  考览书德是，呼葬家。
   </body>
</html>

知识点1:

格式化代码 shift+alt+f

知识点2:html的部分规范

1、html是不区分大小写，一般使用小写居多

2、标签必须写完整，

3、标签可以嵌套，但不能交叉嵌套

4、html是一种宽泛的编程语言，它允许一些小错误，浏览器在编译的时候，会自动纠错

这种情况要尽可能避免，一方面会影响浏览器编译的速度，