前端-HTML相关使用

实体

• &实体的名字;
  •   空格
  • > 大于号
  • < 小于号
  • © copy
  • 链接: https://www.w3school.com.cn/html/html_entities.asp

标签

meta标签

• 设置网页中的元数据，给程序看的
  • charset 指定网页的字符集
  • name 指定数据的名称
  • content 指定数据的内容

    •   <meta name="keywords" content="HTML5,前端,CSS3">
        <!-- keywords表示网站的关键字,可以同时指定多个关键字,关键字之间用,隔开 -->
        
        <meta name="description" content="这是一个非常不错的网站">
        <!-- description表示网站的描述,会显示搜索的结果中 -->
        
        <title>标题</title>
        
        <meta http-equiv="refresh" content="3;url=https://www.baidu.com">
        <!-- 3秒后跳到百度 -->
      
      
      

语义化标签

• h1 ~ h6一共有六级标题
  • h1最重要,h6最不重要
  • h1在网页中的重要性仅此于title，一般情况下一个页面只会有一个h1
  • 一般情况下标题标签只会使用到h1_h3，h4h6很少用
• hgroup标签用来为标题分组，可以将一组相关的标题同时放到hgroup
• em标签用于表示语音语调的一个加重
• strong表示强调，重要内容
• blockquote表示一个长引用
• q表示一个短引用
• br标签表示换行

块元素

• 在页面中独占一行的元素称为块元素block element，在网页中一般通过块元素来对页面进行布局
  • title
  • h1~h6
  • p元素中不能放任何块元素

行内元素

• inline element，行内元素主要用来包裹文字，一般情况下都是在块元素中放行内元素，不会在行内元素中放块元素

布局标签

• header表示网页的头部
• main表示网页的主体部分（一个页面中只有一个main）
• footer表示网页的底部
• nav表示网页中的导航
• aside表示和主体相关的其他内容（侧边栏）
• article表示一个独立的文章
• section表示一个独立的区块，上面的标签都不能表示时用section
• div没有语义,就用来表示一个块元素，目前来讲div还是我们主要的布局元素
• span没有语义，就是用来表示一个行内元素，一般用于网页中选中文字

列表

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

​

超链接

• a标签用来定义超链接，是一个行内元素，可以嵌套除它自身外的其他任何元素
  • href指定跳转的目标路径
    • 值可以写一个外部网站的地址
    • 也可以写一个内部网页的地址
    • #可以直接回到顶部，可以作为占位符
    • #id值可以跳转到指定id值的标签位置
    • javascript:;作为占位符，无任何作用
  • target指定超链接打开的位置
    • _self在当前页面中打开超链接
    • _blank在一个新的页面打开超链接

图片标签

• img标签引入图片
  • src属性指定内部图片，也可以指定外部图片
  • alt图片的描述，搜索引擎是通过这个来识别图片的
  • width图片高度，只修改一个的话，另一个会等比例缩放
  • height图片高度，移动端会进行缩放，PC端不建议修改图片大小
• 图片格式
  • jpeg(jpg)
    • 支持的颜色比较丰富，不支持透明效果，不支持动图
    • 一般显示照片
  • gif
    • 支持的颜色比较少，支持简单透明，支持动图
    • 颜色单一的图片，动图
  • png
    • 支持的颜色丰富，支持复杂透明，不支持动图
    • 颜色丰富，复杂透明图片（专为网页而生）
  • webp
    • 谷歌新推出的专门网页中的图片的一种格式
    • 具备了其他图片格式的所有优点，而且文件还特别小
    • 缺点: 兼容性不好
  • base64
    • 将图片使用base64进行编码，将图片转换为字符，通过字符的形式来引入图片
    • 一般都是需要和网页一起加载的图片才会使用base64
  • 总结
    • 图片展示效果一样，用小的
    • 图片展示效果不一样，用效果好的

内联框架

• iframe用于想当前页面中引入一个其他页面
  • frameborder内联框架边框，0表示没有，1表示有
  • width内联框架宽度
  • height内联框架高度

音频标签

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

  • src指定文件位置

  • controls是否允许用户控制播放，加上即可

  • autoplay是否自动播放，加上即可，大部分浏览器都不会自动对音乐进行播放

  • loop是否循环播放，加上就循环播放

  • <audio controls>
        对不起，您的浏览器不支持播放器
        <source src="./1.mp3">
        <source src="./1.ogg">  <!-- 第一个不支持，会识别第二个，第二个不支持，就显示上面的字 -->>
        <embed src="./1.mp3" type="audio/mp3" height="100" width="50">  <!-- IE8使用 -->>
    </audio>
    

视频标签

• video标签用来向页面中引入一个视频文件

  • src指定文件位置

  • controls是否允许用户控制播放，加上即可

  • autoplay是否自动播放，加上即可

  • loop是否循环播放，加上就循环播放

  • <video controls loop>
        <source src="./1.wepm">  <!-- 不支持wepm会自动识别下一个source -->>
        <source src="./1.mp4">
        <embed src="./1.mp4" type="video/mp4">
    </video>