目录一、网页结构二、meta标签三、标签之间的关系四、标签之间的分类五、标签的嵌套规则一、网页结构shift 生成网页开发的结构!-- html环境的注释 --三种不同的语言有不同的语言环境默认在html文件默认开启的就是html语言环境html主要用来搭建网页的结构 毛坯房css: 修饰页面 装修js: 页面交互 交互html语言搭建网页的结构主要是用各种标签去搭建每个标签意义作用/语义不一样!doctype html--注意很重要 docment 文档 type类别文档的类型是html文档这个标签主要是给浏览器看的告诉浏览器程序员以下开发的代码规范是html规范请浏览器在编译的时候按照html规范去编译防止出现编译错误乱码html langenhtml标签 根标签一个页面只有一个根标签所有结构都要写在根标签内lang(属性) en(属性值) 语言 英文 head标签:主要用来配置元数据配合浏览器进行编译title标签:是html中语义最重的标签开发一个页面目的是让更多的用户看到使用这就离不开推广推广主要分两类一类是付费推广(竞价推广)一类是seo优化(通过提高页面的内容质量页面的编译速度浏览器抓取的速度...,用户点击越多排名越靠前)提高页面被抓取的概率其中有一项就是标签的语义化浏览器在抓取页面时会先检索页面的标题body标签:开发页面主体所有用户看到的页面内容都在body内chinese lorem 模拟生成文本jw 数字 随机生成的汉字)lorem 数字 随机生成的英语单词程序员写的内容不合html规范浏览器会给你进行调整html语言是一种宽泛的语言但我们尽量按照规范去写。浏览器的调整是消耗资源它调整的不一定是你需要的二、meta标签meta标签:本身是没有任何作用但是配置上不同的属性以及属性值它就有不同的作用charset(属性)UTF-8(属性值)charset(属性)配置编译 字符集(密码本)将页面内容 编 成底层存储的二进制将底层存储的二进制 译 成页面内容UTF-8属性值:万国码 (密码本的一种)GB国标版GBK属性值国标扩展版meta charsetUTF-8name属性 viewport属性值viewport视口content(属性)widthdevice-width(属性值), initial-scale1.0(属性值)widthdevice-width(属性值), initial-scale1.0(属性值)用来配置完美视口主要用于移动端开发meta nameviewport contentwidthdevice-width, initial-scale1.0!-- 用来适配ie浏览器的最高版本 --meta http-equivX-UA-Compatible contentIEEdgitge /!-- 用来配置网页的描述信息 --metanamedescriptioncontent小米官网直营小米公司旗下所有产品包括Xiaomi手机系列Xiaomi 14、MIX、Redmi 红米系列、Redmi Note 13、K70、电视、笔记本、米家智能家居等同时提供小米官方服务及售后支持./!-- 配置关键字搜索什么能搜索到当前页 --metanamekeywordscontentXiaomi,redmi,Xiaomi14,Redmi Note 13,Xiaomi MIX Alpha,小米商城/三、标签之间的关系父子关系直接嵌套和被嵌套的关系父标签例如html标签子标签例如head标签祖先后代关系间接嵌套和被嵌套的关系包含父子关系祖先标签例如html标签后代标签例如meta标签,head标签兄弟关系拥有共同的父标签兄标签例如head标签弟标签例如body标签四、标签之间的分类标签的分类按形式/语法单标签:meta双标签:head,title,body按特点块标签搭建框架的1.独占一行div2.如果不设置宽度宽度默认是父标签的100%如果不设置高度高度是被内容撑开的3.可以设置宽高常用块标签h1-h6,p,div,center,header,main,footernav,aside,ul,ol,li,.......行内标签:用来填充具体内容1.不会独占一行2.不可以设置宽高宽高被内容撑开常用行内标签:span,a,strong,em,del,i,u,b,......行内块标签每个标签有自己独特的语义1.不会独占一行可以设置宽高2.标签与标签之间会有大概3像素左右的间距常用的行内块标签;img,button,input,textare,......五、标签的嵌套规则1.块标签可以包裹任意标签包裹块行内行内块...2.行内标签一般只包裹文字不能包裹块3.特殊的块标签p标签,p里面一般只包裹文字不能包裹块4.特殊的行内标签a标签,它什么都能包裹除了它自己