HTML

最新推荐文章于 2021-06-28 22:40:39 发布

Ran? ?

最新推荐文章于 2021-06-28 22:40:39 发布

阅读量308

点赞数

本文链接：https://blog.csdn.net/weixin_46735316/article/details/107297849

版权

一

W3C标准：
结构：HTML用于描述页面的结构
表现：CSS用于控制页面中元素的样式
行为：JavaScript用于响应用户的操作

二.格式

<标签名>内容</标签名>
标题<h1>内容</h1>----> 1级标题…n级标题
段落<p>内容</p>
网页结构：

<html>
      <head>------->写在这里的不会出现在网页中
               <title> 网页标题</title>----->网页标题，内容出现在标题栏，不会显示在网页内容
      </head>
      <body> 内容 </body>    ----->显示给用户看的内容
</html>

<head>内容</head>中的内容不会出现在网页中，主要用于帮助浏览器或搜索引擎来解析网页
<meta>标签用来设置网页的元数据，例如网页的字符集，避免乱码
<title>中的内容会显示在浏览器的标题栏，搜索引擎根据title中的内容来判断网页的主要内容
<body>表示网页的主体，网页中所有的内容应该在body中
自结束标签:,
< !-- 解释说明的内容 -->中间可以放解释说明的内容，注释不可以嵌套
属性：在标签中（开始标签或自结束标签）可以设置属性，属性是一个名值对（x=y），属性和标签名之间用空格隔开
有些属性有属性值，有些属性没有属性值，如果有属性值，属性值应该用单引号或双引号引起来，一个标签内可有多个空格隔开的属性
文档声明（doctype）：指明当前网页的版本 Html5的文档声明：<! doctype html> 文档声明写在网页最开始处，因为浏览器解析网页是从上到下
编码：将字符转换为二进制的过程解码：将二进制转换为字符的过程字符集：编码和解码采用的规则开发时，使用的都是utf-8:<meta charset =“utf-8”>
meta常用数据：charset：指定网页的字符集 name：指定数据的名称 content：指定数据的内容
keywords表示网站的关键字，可以同时指定多个关键字，关键字的使用，需要隔开

 <meta name ="keywords" content="网上购物，网上商城">

description用于指定网站的描述

 	<meta name ="description" content="这是一个不错的网站">

将网页重定向到另一个网站

 	<meta http-equiv ="refresh" content="3;url=网页地址">

语义化标签
在标题标签中独占一行的元素称为块元素
在页面中不独占一行的元素是行内元素
标题标签都是块元素
标题标签：
h1~h6一共有六级标题
从h1~h6重要性递减，h1最重要，h6最不重要
h1在网页中重要性仅次于title标签，一般情况下一个页面只会有h1
一般情况虾标题标签只会使用h1-h3，h4~h6很少用
- p标签标示页面中的一个段落，p也是一个块元素
hgrooup标签用来为标题分组，可以将一组相关的标题同时放入hgroup中
em标签用于语音语调的加重，效果是字体倾斜 em是行内元素
strong标示强调重要内容，效果是字体加粗 strong是行内元素
blockquote表示一个长引用，效果是换行 blockquote是块元素
q表示一个短引用，不会换行 q是行内元素
br表示行内换行
块和行内：
块元素：在网页中一段通过块元素对页面进行布局
行内元素：主要用来包裹文字
一般情况下，会在块元素中放行内元素，而不在行内元素中中放块元素块元素中基本什么都可以放 p元素中不能放任何元素
浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正。比如：标签写在了根元素的外部；p元素中嵌套了块元素；根元素中出现了除head和body外的子元素
语义化标签：
结构化语义标签（布局标签）
header ---- 网页的头部
main ------- 网页的主体部分(一个页面中一个）
footer ------ 网页的底部
nav----------表示网页中的导航
aside--------和主体相关的其他内容（侧边栏）
ariticle-------表示一个独立的文章
section------表示一个独立的区块，上面的标签都不能表示时用section
div没有语义，就用来表示一个区块，就目前来说div是主要的布局元素
span是行内元素，没有任何语义，一般用于网页中选中文字
列表：成组出现的
在html中，有三种列表：1.有序列表 2.无序列表 3.定义列表

有序列表：使用ol标签创建有序列表，使用li表示列表项
无序列表：使用ul标签创建无序列表，使用li表示列表项
定义列表：使用dl标签创建定义列表，使用dt来表示定义的内容，使用dd来对内容解释说明
列表之间可以互相嵌套

超链接的简介
超链接可以让我们从一个页面跳转到其他页面，或者是当前页面的其他位置
使用a标签来定义超链接
超链接也是一个行内元素，在a内可以嵌套任何的元素，除a本身
href属性：指定跳转的目标路径，值可以是一个外部网站的地址，也可以是内部页面的一个地址
相对路径
当我们需要跳转到一个服务器内部的页面时，一般我们都会使用相对路径。相对路径都会使用.或…开头。./；…/
./可以省略不写，如果不写./也不写…/则就相当于写了./
./表示当前文件所在的目录:
在这里就相当页面就是09.html相对路径.html
./就等于09.html相对路径.html所在的目录path
<a href=“07.列表.html”>超链接</a>与<a href="./.列表.html">超链接</a>是等价的
…/表示当前文件所在目录的上一级目录
一个/表示一个文件夹
超链接的其他用法

target属性：用来指定超链接打开的位置

可选值：_self默认值，在当前页面打开超链接
_blank在一个新的页面中打开超链接

可以通过将超链接的href属性设置为#，这样点击超链接以后页面不会发生跳转，而是转到当前页面的顶部的位置
可以跳转到页面的指定位置，只需要将href属性设置#目标元素的id属性值
id属性（唯一不重复的）
每一个标签都可以添加一个id属性
id属性是元素的唯一标识，同一个页面不能出现重复id属性。
注意！！！属性值都是字母开头
在开发中，可以将#作为超链接的路径的占位符使用
也可以使用javascript:;作为href的属性，此时点击这个超链接，什么也不会发生
图片标签
图片标签用于向当前页面中一个外部图片
图片文件夹通过拖动即可添加到vscode
使用img标签来引入外部图片，img标签是一个自结束标签
img这种元素属于替换元素（块和行内元素之间，具有两种元素的特点）

属性：

   src 指定的是外部图片的路径（路径规则和超链接是一样的）即相对路径引入内部图片，或者直接src=网页中图片地址引入外部图片
   alt 图片的描述，默认情况下不会显示，但是部分浏览器会在图片无法加载时显示。搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎所收录
   width图片的宽度（单位是像素）
   height图片的高度（单位是像素）
宽度和高度若只修改了一个，另一个值会等比例缩收
一般情况下，在pc端不建议修改图片的大小，根据裁剪可以得出所需大小的图片

图片的格式：
jpg：支持的颜色比较丰富，不支持透明效果，不支持动图；一般用来显示照片
gif：支持的颜色比较少，支持简单透明，支持动图；适合表示颜色单一的图片
png：支持的颜色丰富，支持复杂透明，不支持动图；适合颜色丰富，复杂透明图片（专为网页而生）
webp：谷歌新推出的专门表示网页中的图片的一种格式。它具备了其他格式的所有优点，而且文件特别小。缺点：兼容性不好

base64：将图片使用base64加码，这样可以直接将图片转换为字符，通过字符的方式来引入图片。一般都是一些需要和网页一起加载的图片才会使用base64
图片转Base64
效果一样，用小的；效果不一样，用效果好的
内联框架
用于向当前页面中引入其他页面
src指定要引入的页面的路径 frameborder指定内联框架的边块

 <iframe src="https：//www.qq.com" "frameborder="0"></iframe>

音视频播放
audio标签用来向页面中引入一个外部的音频文件
音视频文件引入时，默认情况下不允许用户自己控制播放停止

属性：
controls 是否允许用户控制播放
autoplay音频文件是否自动播放（如果设置了autoplay，则音乐会在页面打开时自动播放，但是目前大部分浏览器都不会自动对音乐进行播放）
loop 音乐是否循环播放
以上三个属性都没有值，写出即可生效
除了通过src来指定外部文件的路径以外，还可以通过source来指定文件的路径以外，还可以通过source来指定文件的路径

使用video标签来向网页中引入一个视频
使用方式基本上和audio是一样的
可以通过直接复制网页视频的代码来引入其他网页视频

 <!doctype html>
 <html>
     <head>
             <meta charset="utf-8">
             <title>晴天日记</title>
     </head>
     <body>
             <h1>哈哈哈</h1>
    </body>
</html>

网页运行结果：

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <title>实体</title>
</head>
<body>
     <p>
         今天&nbsp;天气真不错
    </p>
</body>
</html>

网页效果：

 <!DOCTYPE html>
 <html lang="en">
 <head>
           <meta charset="UTF-8">
           <meta name="keywords" content="HTML5,前端，css3">
           <meta name=" description" content="这是一个不错的网站">
           <meta http-equiv="refresh" content="3;url=https://www.baidu.com">

          <title>Document</title>
 </head>
 <body>

 </body>
 </html>

网页效果：

 <!DOCTYPE html>
 <html lang="en">
 <head>
        <meta charset="UTF-8">

        <title>我爱臭憨憨</title>
 </head>
 <body>
       <h1>一级标题</h1>
       <h2>二级标题</h2>
       <h3>三级标题</h3>
       <h4>四级标题</h4>
       <h5>五级标题</h5>
       <h6>六级标题</h6>

 <hgroup>
       <h1>我爱臭憨憨</h1>
       <h2>臭憨憨是王德宝</h2>
 </hgroup>
 
       <p>在标签中的内容就表示一个段落</p>
       <p>在标签中的内容就表示一个段落</p>

       <p>今天<em>又</em>是<strong>爱</strong>臭憨憨的一天</p>

     席慕蓉说
    <blockquote>
             如何让你遇见我
    </blockquote>
     子曰:<q>学而时习之</q>
     <br>
       今天太热了
    </body>
    </html>

网页运行：

 <!DOCTYPE html>
 <html lang="en">
 <head>
        <meta charset="UTF-8">
        <title>Document</title>
</head>
<body>
         <ul>
              <li>结构</li>
              <li>表现</li>
              <li>行为</li>
         </ul>
         <ol>
             <li>结构</li>
             <li>表现</li>
             <li>行为</li>
         </ol>
         <dl>
             <dt>结构</dt>
             <dd>结构表示网页的结构，结构用来表示网页中哪里是标题，哪里是段落</dd>
         </dl>
         <ul>
               <li>
                  aa
                   <ul>
                       <li>hh</li>
                       <li>ll</li>
                   </ul>
               </li>
          </ul>
</body>
</html>

网页效果

 <!DOCTYPE html>
 <html lang="en">
 <head>
           <meta charset="UTF-8">
          <title>超链接</title>
 </head>
 <body>
       <a href="https://www.baidu.com">超链接</a>
        <br>
       <a href="https://www.baidu123.com">超链接</a>
 </body>
 </html>

网页效果

  <!DOCTYPE html>
  <html lang="en">
  <head>
         <meta charset="UTF-8">

        <title>Document</title>
 </head>
 <body>
       <iframe src="https://www.qq.com" width="800" height="600" frameborder="0">       </iframe>
  </body>
  </html>

网页效果

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
       <title>Document</title>
</head>
<body>
    <!-- <audio src="./source/audio.mp3" controls autoplay></audio>--> 
   <audio controls>
         对不起，您的浏览器不支持播放音频，请升级浏览器！
   <source src="./source/audio.mp3">
   </audio>
   <iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=q0034siz0n6" allowFullScreen="true"></iframe>
</body>
</html>

网页效果