HTML基础

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基础

上一篇:CSS3


下一篇:neural network robustness verification