H5基本操作.包含meta标签 语义化标签 列表 超链接 图片标签 内联框架 音视频等

实体

在网页中编写的多个空格默认情况会自动被浏览器解析为一个空格

    在HTML中有些时候，我们不能直接书写一些特殊符号
        比如：多个连续的空格，比如字母两侧的大于和小于号

    如果我们需要在网页中书写这些特殊的符号，则需要使用html中的实体（转义字符）
    
    实体的语法：
            &实体的名字;
              空格
            > 大于号
            < 小于号
            © 版权符号

meta标签

meta主要用于设置网页中的一些元数据，元数据不是给用户看

元数据

charset 指定网页的字符集
name 指定的数据的名称
content 指定的数据的内容
keywords 表示网站的关键字，可以同时指定多个关键字，关键字间使用,隔开

< meta name=“Keywords” content=“网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东”/>
< meta name=“keywords” content=“网购,网上购物,在线购物,网购网站,网购商城,购物网站,网购中心,购物中心,卓越,亚马逊,卓越亚马逊,亚马逊中国,joyo,amazon”>

    description 用于指定网站的描述,网站的描述会显示在搜索引擎的搜索的结果中
    title标签的内容会作为搜索结果的超链接上的文字显示

< meta name=“description” content=“京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!”/>

< meta name=“keywords” content=“HTML5,前端,CSS3”>
< meta name=“description” content=“这是一个非常不错的网站”>

将页面重定向到另一个网站
   例子:   <meta http-equiv="refresh" content="3;url=https://www.mozilla.org">    
           <meta http-equiv="refresh" content="3;url=https://www.baidu.com"> 

一些语义化标签

基本标签

在网页中HTML专门用来负责网页的结构
所以在使用html标签时，应该关注的是标签的语义，而不是它的样式

        标题标签：
            h1 ~ h6 一共有六级标题
            从h1~h6重要性递减，h1最重要，h6最不重要
            h1在网页中的重要性仅次于title标签，一般情况下一个页面中只会有一个h1
            一般情况下标题标签只会使用到h1~h3，h4~h6很少用

        标题标签都是块元素
        在页面中独占一行的元素称为块元素（block element）
            <h1>一级标题</h1>
    		<h2>二级标题</h2>
     		<h3>三级标题</h3>
     		<h4>四级标题</h4>
     		<h5>五级标题</h5>
     		<h6>六级标题</h6>

hgroup标签用来为标题分组，可以将一组相关的标题同时放入到hgroup

  <hgroup>
        <h1>回乡偶书二首</h1>
        <h2>其一</h2>
  </hgroup>

p标签表示页面中的一个段落
p也是一个块元素

  <p>在p标签中的内容就表示一个段落</p>
  <p>在p标签中的内容就表示一个段落</p>

em标签用于表示语音语调的一个加重
在页面中不会独占一行的元素称为行内元素（inline element）

  <p>今天天气<em>真</em>不错！</p>

strong表示强调，重要内容！

  <p>你今天必须要<strong>完成作业</strong>！</p>

blockquote 表示一个长引用
鲁迅说:

< blockquote>这句话我是从来没有说过的！< /blockquote>

q表示一个短引用

  子曰<q>学而时习之，乐呵乐呵！</q>

br标签表示页面中的换行

  < br> 

规范内容

块元素（block element）
        - 在网页中一般通过块元素来对页面进行布局
    行内元素（inline element）
        - 行内元素主要用来包裹文字

        - 一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素
        - 块元素中基本上什么都能放
        - p元素中不能放任何的块元素

    浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正
        比如：
            标签写在了根元素的外部
            p元素中嵌套了块元素
            根元素中出现了除head和body以外的子元素
            ... ...  

//错误示范

布局标签（结构化语义标签）

    header 表示网页的头部
    main 表示网页的主体部分(一个页面中只会有一个main)
    footer 表示网页的底部
    nav 表示网页中的导航
    aside 和主体相关的其他内容（侧边栏）
    article 表示一个独立的文章
    section 表示一个独立的区块，上边的标签都不能表示时使用section

    div 没有语义，就用来表示一个区块，目前来讲div还是我们主要的布局元素
    span 行内元素，没有任何的语义，一般用于在网页中选中文字

列表

有序列表，无序列表，定义列表

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

超链接

超链接 使用a标签
        属性
            href 指定跳转的目标路径
                -值可以是一个外部网站的地址
                -也可以是一个内部页面的地址
        也是一个行内元素，在a标签中可以嵌套出它自身外的任何元素
        ./ 表示当前目录
        ../表示上一级目录

*****************常用,我老忘!!!写完就其实就记住了*****************
 target属性,用来指定a标签打开的位置
        _self 默认值 在当前页面打开
        _blank 在一个新的页面打开超链接  
		
		<a href="07.列表.html" target="_blank">超链接</a>

#在开发中作为超链接的路径的占位符使用
把位置先占上,但是#有功能,不太好,就用javascript:;

<a href="#">这是一个新的超链接 href 为#</a>

可以使用javascript:; 来作为href属性,此时点击这个超链接 什么也不会发生

<a href="javascript:;">这是一个新的超链接 js无效链接</a>

可以直接将超链接的href属性 设置为#,这样点击超链接以后页面不会发生跳转,而是回到页面顶部的位置

可以跳转到页面指定的位置,只需要将href属性设置  
    #目标元素的id属性值
    id属性 唯一不重复的
        每一个标签都可以添加一个id 属性

 <a href="#bottom">去底部</a>
 <a href="#page3">去第三段</a>				//有一段文本的id设置为 page3了
 <a href="#" id="bottom">去顶部</a>         //  去底部和去顶部是一对

图片标签

图片标签 用于相当页面引入一个标签

使用img标签来引入外部图片, 自结束标签
     
      img属于替换元素 (块和行内元素之间,具有两种元素的特点)
          
          属性:
                scr 外部图片的路径
                alt 图片的描述,默认不会显示,有些浏览器图片无法加载时显示
                        搜索引擎会根据alt内容来识别图片
                        如果不写alt则不会被搜索引擎收录
                width 图片的宽度 单位像素
                height 图片的高度
                        宽度和高度,如果只修改了一个,另外一个也会改变
                
                一般在pc端,不建议修改图片大小,需要多大裁剪多大的
                大了失帧.小了占内存
                在移动端,经常需要对图片进行缩放(大图缩小)
    
    图片格式: 
        jpg 支持颜色丰富,不支持透明 不支持动图
            一般用来显示照片
        gif 支持颜色较少,支持简单透明,支持动图
            颜色单一的图片,动图
        png 支持颜色丰富,支持复杂透明,不支持动图
            颜色丰富,复杂透明图片--专为网页而生
        webp
            谷歌新推出的专门用来表示网页中的一种格式
            具备其他图片格式的所有优点 文件特别小
            兼容性不好
        base64
            图片使用base64编码,将图片转换为字符,通过字符的形式来引入图片
            和网页一起加载出来
            可以再网页搜索base64进行转换

    效果一样,用小的  效果不一样用效果好的

代码

 <img src="./img/1.gif" alt="松鼠">
 <img width="400" src="http://5b0988e595225.cdn.sohucs.com/images/20200408/d07470b6a80e4937bc07a9a6d675f963.jpeg" alt="">

内联框架

内联框架,用于向当前页面引入一个其他页面,可以用于当期页面视频带宽内存占用过大之类的

• src 指定要引入的网页的路径

• frameborder 指定内联框架的边框

     <iframe src="https://www.qq.com" width="800" frameborder="0"></iframe>
  

音视频

audio 标签用来向页面中引入一个外部音频文件

• 音视频文件引入时,默认不允许用户自己控制播放停止

    属性
        controls 是否允许用户控制播放
        autoplay 音频文件是否自动播放
            -如果设置里autoplay 则音乐在打开页面时是会自动播放
             但目前来讲大部分浏览器不会自动对音乐进行播放,ie除外
             某一些浏览器会在你播放过之后,再次刷新后自动播放
             防止突然出现,用户体验不好
        loop 音乐是否循环播放
  

代码片段

 <audio src="./source/audio.mp3" controls autoplay loop></audio>
 <audio src="./source/audio.mp3" controls></audio>

除了通过src来指定外部文件的路径以外,还可以通过source来指定文件路径

	html执行顺序是自上而下的,,他这个提示语句,和写三种方式任选一个

    <audio controls>
    对不起,您的浏览器不支持播放音频!请升级浏览器!
    <source src="./source/audio.mp3">
    <source src="./source/audio.ogg" type="">
    <embed src="./source/audio.mp3" type="audio/mp3" width="300">
	</audio>

使用video标签来向网页中引入一个视频

   使用方式和audio 基本是是一样的
   webm 和mp4类似,体积更小 谷歌的一种视频格式 

	     <video controls>
	        <source src="./source/flower.webm">x
	        <source src="./source/flower.mp4">
	        <source src="./source/flower.mp4" type="video/mp4">
	     </video>

 <iframe src="//player.bilibili.com/player.html?aid=77217003&bvid=BV1XJ411X7Ud&cid=132019904&page=27" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>