7.11网页结构常用标签

wink在干嘛

已于 2022-07-11 19:11:36 修改

阅读量497

点赞数 1

分类专栏：前端0到1 文章标签： servlet java 前端

于 2022-07-11 19:09:37 首次发布

本文链接：https://blog.csdn.net/m0_61214373/article/details/125727333

版权

前端0到1 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

一、网页结构

1、网页结构

<!DOCTYPE html>
<!-- html  重点关注的是语义，而不是样式 -->
<html><!--根标签/根元素  一个页面只有一个html  所有的内容必须写在html-->
  <head><!--保存一些元信息 里面内容不会页面中展示  只是辅助浏览器编译页面-->
    <meta charset='UTF-8'><!--国际编码-->
    <meta name='Keyword' content='关键字'>
    <meta name='Description' content='描述'>
    <title><!--默认情况显示在浏览器的标题栏中  
       它最重要的作用帮助推广部门做SEO/SEM优化--></title>
    <style>
     
    </style>
  </head>
  <body>
     <!-- body标签  书写网页的主体内容， -->
  </body>
</html>


  <!--  属性  属性值  放在标签内部 -->
    <!-- meta 自结束标签  设置一些元信息  辅助浏览器编译代码
        charset  字符集  
           utf-8  万国码
           GB2312   中国
           GBK   中国扩展版
        编码  将字符转成二进制
        解码   将二进制转成字符   
        乱码  编码和解码参考的标准不一样
    -->

2、实体

a、什么是实体？

浏览器在编译代码的时候，有一些特殊的字符没有办法识别，例如空格，大于号，小于号

用一些额外的字符来表示，这些额外的字符，就叫实体

b、实体语法：&实体的名字;

c、常用的实体：

  空格

> 大于号

< 小于号

3、html规范:

a、html 不区分大小写但一般用小写

b、注释不能嵌套

c、浏览器的纠错一定要避免

d、html标签规范，要么成双成对，要么自结束

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

二、常用H5标签

1、常用标签

 <!-- 关注语义，而不是样式 -->
    <!-- 一：标题标签h1 ~ h6   注意语义  默认样式 -->
    <h1>同家新学派，普。</h1>
    <h2>他承国，车久人，狱。</h2>
    <h3>气她和不。</h3>
    <!-- 二：段落标签，段落标签用于表示内容中的一个自然段
       默认样式
       特殊的块元素  一般只用来包裹文字或图片，它里面不能放块元素
    -->
    <p>常书了之死报生金联妙娘，丹县那安，快不。</p>
    <p>九原前举位落陛，他。</p>
    <!-- 三：hgroup标签用来为标题分组，可以将一组相关的标题同时放入到hgroup-->
    <hgroup>
      <h1>要范欲刑。</h1>
      <h3>化训由帮。</h3>
    </hgroup>
    <!-- 四：em标签用于表示语音语调的一个加重， 行内元素（inline element）-->
    <!-- 五：strong表示强调，重要内容,强调   -->
    <em>反叹朗得。</em>
    <strong>了非爻，导化谭，太。</strong>
    <!--六： blockquote 引用别人说的话 长引用 会换行 块元素-->
    <blockquote>
      之老到能躲薪五严得灰报力一反秦为不订疾。
    </blockquote>
    <blockquote>了诗下，开而而落第。</blockquote>
    <!--七： q 表示短引用-->
    <q>病的子韩死故游六身，得如娇定生亓了常才。</q>
    <!-- 八：换行标签	-->
    <br />
    <!--九：分割线-->
    <hr />
    <!--十：使用del标签来表示一个删除的内容-->
    <del>199999</del>
    <s>掉洋快。</s>
    <!-- 十一：center  居中效果-->
    <center>
      承以冇看么我在司身。
      <p>我下落一死落子自明。</p>
    </center>

    <!-- 十二：div  布局的没有意义的块元素 -->
    <div>王惊五尹娟重皇县九。</div>
    <!-- 十三：span  没有任何语义，一般就用来包裹文字-->
    <span>为疾为战都他，后宋。</span>

2、结构标签（布局）

header 网页的头部

main 网页的主体部分（一般就一个）

footer 网页的底部

nav 网页的导航

aside 和主体相关的内容，侧边栏

article 文章之类的

section 独立的区块，上面的标签都不合适，就用这个

3、行内与块元素

元素在文档流中会区分

块元素（block element）常用来布局

a、独占一行,自上而下一行一行的排列

b、块元素的宽度默认是父元素宽度的100%

c、块元素的高度默认是被内容撑开的

常用块元素：div p h1-h6 ul li ol header footer main nav

行内元素（inline element）

a、不会独占一行,自左向右排列，一行满了，就挪到下一行，再自左向右

b、行内元素的宽高都是被内容撑开的，不可以自定义高度

常用行内元素：span a i em strong del s

行内块元素

a、兼具行内元素，块元素特点

b、又不会独占一行，又可以设置宽高

常用行内块元素：img

display 实现不同元素的相互转换

可选值：

none block inline inline-block

注意：

a、块元素是布局元素，里面什么都能放，能方块元素，能放行内元素，行内块元素

b、行内元素一般就用来包裹文字

c、特殊的块元素 p 不能放块元素

d、特殊的行内元素 a 里面什么都能放，除了它自己

4、列表

列表（list）一组一组

1:有序列表用ol标签创建，li表示列表项

2:无序列表用ul标签创建，li表示列表项

disc，默认值，实心的圆点

square，实心的方块

circle，空心的圆

3:定义列表用dl标签创建，使用dd对内容进行解释说明

注意：列表之间是可以互相嵌套的

可以使用type属性更改项目符号

默认样式，li有项目符号，上下外边距，左内边距

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>

    <ol type="i">
      <div></div>
      <li></li>
      <li></li>
    </ol>
    <ul type="circle">
      <li>一已光。</li>
      <li>身烦于有。</li>
      <li>他单卡，人。</li>
    </ul>
    <dl>
      <dt>html</dt>
      <dd>html5</dd>
      <dd>css3</dd>
      <dd>less</dd>
      <dd>sass</dd>
      <dt>js</dt>
      <dd>js基础</dd>
      <dd>DOM</dd>
      <dd>Bom</dd>
    </dl>
  </body>
</html>

5、超链接

2个功能，2个属性，1个补充

超链接行内元素，它里面可以放任何元素，除了它自己，可以是一个字，一段文字，图片，表格等

功能：

1、一个页面跳到另一个页面

2、当前页面的跳转（做楼梯导航）

3、下载

属性：

1、href 指向跳转的目标地址

绝对路径

相对路径 ./ ../

注意：你在哪里，你要去哪里

2、target 控制超链接打开方式

可选值：

_self 在当前页面打开

_blank 新开页面打开

锚点功能：

给对应的位置，打一个id属性值

在href的属性值里，写：#id属性值

id属性值：

不能以数字开头，最好不要是汉字，独一无二的存在

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>超链接</title>
  </head>
  <body>
    <a href="#dixia">去底部</a>
    <a href="#center">去中间</a>
    <p>后到元尚，我真胆天李年使所仆瞠玉子，了责重书年生总其也历百的应了厄服意知，不李谭一化尺等关说不，保中之婵助，德作爻行不魂同评人于谋对活也或，看大我是玉家生希，那畴虽洪，病宋气使头联起亲高而至以资为尘互起，撒主那天我者言杂后请松乐长韩攻，俭太已能得场，恶样。</p>
    <p>后到元尚，我真胆天李年使所仆瞠玉子，了责重书年生总其也历百的应了厄服意知，不李谭一化尺等关说不，保中之婵助，德作爻行不魂同评人于谋对活也或，看大我是玉家生希，那畴虽洪，病宋气使头联起亲高而至以资为尘互起，撒主那天我者言杂后请松乐长韩攻，俭太已能得场，恶样。</p>
    <p>后到元尚，我真胆天李年使所仆瞠玉子，了责重书年生总其也历百的应了厄服意知，不李谭一化尺等关说不，保中之婵助，德作爻行不魂同评人于谋对活也或，看大我是玉家生希，那畴虽洪，病宋气使头联起亲高而至以资为尘互起，撒主那天我者言杂后请松乐长韩攻，俭太已能得场，恶样。</p>
    <p>后到元尚，我真胆天李年使所仆瞠玉子，了责重书年生总其也历百的应了厄服意知，不李谭一化尺等关说不，保中之婵助，德作爻行不魂同评人于谋对活也或，看大我是玉家生希，那畴虽洪，病宋气使头联起亲高而至以资为尘互起，撒主那天我者言杂后请松乐长韩攻，俭太已能得场，恶样。</p>
    <p>后到元尚，我真胆天李年使所仆瞠玉子，了责重书年生总其也历百的应了厄服意知，不李谭一化尺等关说不，保中之婵助，德作爻行不魂同评人于谋对活也或，看大我是玉家生希，那畴虽洪，病宋气使头联起亲高而至以资为尘互起，撒主那天我者言杂后请松乐长韩攻，俭太已能得场，恶样。</p>
    <p id="center">后到元尚，我真胆天李年使所仆瞠玉子，了责重书年生总其也历百的应了厄服意知，不李谭一化尺等关说不，保中之婵助，德作爻行不魂同评人于谋对活也或，看大我是玉家生希，那畴虽洪，病宋气使头联起亲高而至以资为尘互起，撒主那天我者言杂后请松乐长韩攻，俭太已能得场，恶样。</p>
    <p>后到元尚，我真胆天李年使所仆瞠玉子，了责重书年生总其也历百的应了厄服意知，不李谭一化尺等关说不，保中之婵助，德作爻行不魂同评人于谋对活也或，看大我是玉家生希，那畴虽洪，病宋气使头联起亲高而至以资为尘互起，撒主那天我者言杂后请松乐长韩攻，俭太已能得场，恶样。</p>
    <p>后到元尚，我真胆天李年使所仆瞠玉子，了责重书年生总其也历百的应了厄服意知，不李谭一化尺等关说不，保中之婵助，德作爻行不魂同评人于谋对活也或，看大我是玉家生希，那畴虽洪，病宋气使头联起亲高而至以资为尘互起，撒主那天我者言杂后请松乐长韩攻，俭太已能得场，恶样。</p>
    <p>后到元尚，我真胆天李年使所仆瞠玉子，了责重书年生总其也历百的应了厄服意知，不李谭一化尺等关说不，保中之婵助，德作爻行不魂同评人于谋对活也或，看大我是玉家生希，那畴虽洪，病宋气使头联起亲高而至以资为尘互起，撒主那天我者言杂后请松乐长韩攻，俭太已能得场，恶样。</p>
    <p>后到元尚，我真胆天李年使所仆瞠玉子，了责重书年生总其也历百的应了厄服意知，不李谭一化尺等关说不，保中之婵助，德作爻行不魂同评人于谋对活也或，看大我是玉家生希，那畴虽洪，病宋气使头联起亲高而至以资为尘互起，撒主那天我者言杂后请松乐长韩攻，俭太已能得场，恶样。</p>
    <p>后到元尚，我真胆天李年使所仆瞠玉子，了责重书年生总其也历百的应了厄服意知，不李谭一化尺等关说不，保中之婵助，德作爻行不魂同评人于谋对活也或，看大我是玉家生希，那畴虽洪，病宋气使头联起亲高而至以资为尘互起，撒主那天我者言杂后请松乐长韩攻，俭太已能得场，恶样。</p>
    <p>后到元尚，我真胆天李年使所仆瞠玉子，了责重书年生总其也历百的应了厄服意知，不李谭一化尺等关说不，保中之婵助，德作爻行不魂同评人于谋对活也或，看大我是玉家生希，那畴虽洪，病宋气使头联起亲高而至以资为尘互起，撒主那天我者言杂后请松乐长韩攻，俭太已能得场，恶样。</p>
    <p>后到元尚，我真胆天李年使所仆瞠玉子，了责重书年生总其也历百的应了厄服意知，不李谭一化尺等关说不，保中之婵助，德作爻行不魂同评人于谋对活也或，看大我是玉家生希，那畴虽洪，病宋气使头联起亲高而至以资为尘互起，撒主那天我者言杂后请松乐长韩攻，俭太已能得场，恶样。</p>
    <p id="dixia">后到元尚，我真胆天李年使所仆瞠玉子，了责重书年生总其也历百的应了厄服意知，不李谭一化尺等关说不，保中之婵助，德作爻行不魂同评人于谋对活也或，看大我是玉家生希，那畴虽洪，病宋气使头联起亲高而至以资为尘互起，撒主那天我者言杂后请松乐长韩攻，俭太已能得场，恶样。</p>
    <a href="#">去顶部</a>
    <a href="javascript:;">空链接</a>
  </body>
</html>

6、图片标签

使用img标签来向网页中引入一个外部图片，

img这种元素属于替换元素（基于块和行内元素之间，具有两种元素的特点）

src 引入图片的路径

alt 对图片的描述，帮助浏览器收录图片，有一定的seo效果

width 控制图片的宽度

height 控制图片的高度

注意：一般不会同时设置宽高

img标签是行内块元素，自结束标签

7、图片格式

JPEG(JPG)

- JPEG图片支持的颜色比较多，图片可以压缩，但是不支持透明

- 一般用来保存照片等颜色丰富的图片

GIF

- GIF支持的颜色少，只支持简单的透明，支持动态图

- 图片颜色单一或者是动态图时可以使用gif

PNG

- PNG支持的颜色多，并且支持复杂的透明，不支持动图

- 可以用来显示颜色复杂的透明的图片

专为网页而生的

webp

-谷歌新推出的专门用来表示网页的一种格式

-它具有其他图片格式的所有优点，而且文件格式还很小

-缺点：兼容性不好

base64

-讲图片使用base64编码，这样可以将图片转换为字符，通过字符形式来引入

-一般都是需要和网页一起加载的图片才会使用base64

图片的使用原则：

效果不一致，使用效果好的

效果一致，使用小的

网页加载流程:

第一次请求：加载网页本身

第二次之后请求，加载外部资源

8、音视频

src 引入音视频的路径

controls 控制用户是否可以播放

autoplay 自动播放（基本被废止）

loop 循环播放

    <!-- audio标签 用来向页面中引入一个外部的音频文件 -->
    <audio src="" controls autoplay loop ></audio>
    <!-- video标签来向页面中引入一个视频，使用方式跟音频基本上一样的 -->
    <video src=""></video>