标签：图片格式   复杂   html   来讲   根据   推出   tar   移动   相对   

HTML

浏览头上设置的meta，用于增加搜索可见度，content指示关键字

<meta charset="UTF-8" name="keywords" content="HTML5,CSS,前端">

description：指定网站的描述，网站的描述会显示在搜索引擎搜索结果中

<meta name="description" content="网站的描述">

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

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

列表

列表（list）:

• 铅笔
• 尺子
• 橡皮

html中也可以创建列表，一共有三种：

• 有序列表
• 无序列表
• 定义列表

无序列表ul

• 最常使用，作为网页的菜单选项
• 使用ul标签创建无序列表
• 并且使用li表示列表项

<ul></ul>

有序列表ol

定义列表dl

dt
-dd

超链接

使用标签<a>定义超链接，行内元素，里面可嵌套任何标签，除自身外

属性：

href 指定跳转的目标路径

相对路径

当我们需要跳转一个服务器内部的页面时，一般都会使用相对路径
相对路径会使用 . 或 .. 来开头：

• ./ 可以省略不学，默认自带
• ./ 表示当前文件所在的目录
• 在这里当前页面
• ./ 就等于当前文件所在目录
• ../ 表示当前文件所在目录的上一级目录

target属性：

用来指定超链接打开的位置
可选值：
_self 默认值 在当前页面中打开超链接
_blank 在一个新的页面中打开超链接

回到顶部

直接将超链接的href属性值设置为#，点击直接回到顶部

id属性（唯一不重复）

• 每一个标签都可以添加一个id属性
• id属性是元素的唯一标识，同一个页面不能出现重复的id属性

跳转到页面的指定位置

将href属性设置为 #目标元素的id属性值

超链接点击不发生事件

• 将href的属性设置为javascript:;
• 此时点击超链接不发生事件

图片标签

• 用于向当前页面引入一个外部图片
• 使用img标签引入外部图片，img标签为自结束标签
• img这种元素属于替换元素（块和行内元素之间，具有两种元素的特点）

属性：

• src 属性指定是外部图片的路径（路径规则和超链接是一样的）
  

• \<img src="./img.jpg">(路径可使用网络图片)
  

• alt 图片描述，这个描述默认情况下不会显示，有些浏览器会在图片无法加载时显示
  

• 搜索引擎会根据alt中的内容来识别图片，如果不写，则图片不会被搜索引擎检索
  

• width 图片宽度（单位像素）
  

• height 图片高度
  

• 宽度和高度如果只修改了一个，则另一个会等比例缩放
  **注意**
  

• 一般情况在PC端。不建议修改图片的大小，需要多大，就裁剪多大
  

• 但是在移动端，经常需要对图片进行缩放（大图缩小）
  

图片格式

• jpeg（jpg）：支持的原色比较丰富，不支持透明度，不支持动图，一般用来显示照片
• gif：支持的颜色比较少，支持简单透明，支持动图，颜色单一的图片，动图
• png：支持的颜色丰富，支持复杂透明，不支持动图，颜色丰富，复杂透明（转为网页而生）
• webp：这种格式是谷歌新推出的专门用来表示网页中的图片一种格式，它具备其他图片格式的所有特点，而且文件还特别小。缺点：兼容性不好
• base64：将图片使用base64进行编码，，这样可以将图片转换为自付，通过字符的形式来引入图片，一般是一些需要和网页一起加载的图片才会使用base64

效果一样，用小的。效果不一样，用效果好的。

内联框架iframe

用于向当前页面中引入一个其他页面

• src 指定要引入的网页路径
• frameborder 指定内联框架的边框

用的不多，主要存在问题，搜索引擎，不会检索到内联框架，而且影响SEO

音视频播放audio

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

属性：

• controls 是否允许用户控制播放
• autoplay 音频文件是否自动播放，如果设置了autoplay，则音乐会自动播放，但是大部分浏览器不会对音乐进行播放。
• src 导入目标路径
• loop 音乐是否循环播放

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

<audio>
<source src="./audio.mp3">
<source src="./audio.ogg">
<!-- 兼容IE8 -->
<embed src="./audio.mp3" type="audio.mp3" width="300" height="300">
</audio>

视频播放video

使用video标签，向网页中引入视频

<video controls>
    <!-- 兼容性 -->
    <source src="./video.webm">
    <source src="./video.mp4">
    <embed src="./video.mp4" type="">
</video>

HTML基础

标签：图片格式   复杂   html   来讲   根据   推出   tar   移动   相对   

原文地址：https://www.cnblogs.com/RashoMon/p/13276836.html