块和行内
块元素
- 网页一般会通过块元素来对页面布局
- 一般情况下,会在块元素内放行内元素,但是不会反过来
- 块元素中基本上什么都可以放
- p元素中不能放任何块元素
行内元素
主要用来包裹文字
浏览器在解析网页的时候会自动将那些不会符合规范的内容进行修正
1.标签写在了根元素的外部
2.p元素中嵌套了块元素
3.根元素中出现了除了head和body以外的子元素
语义化标签
布局标签(结构化标签)
header标签
网页头部
mian标签
网页主体,一个页面只有一个
footer标签
网页底部
nav标签
网页的导航
aside标签
和主体相关其他内容,侧边栏
article标签
文章
section标签
表示一个独立的区块
div标签
没有语义,,就用来表示一个区块,主要的布局元素
span标签
行内元素,没有任何语义,一般用于网页中选中文字
列表(list)
列表可以有三种
1.有序列表 <ol> <li></li>....
2.无序列表 <ul> <li></li>....
3.定义列表 <dl> <dt></dt> dt:表示定义的内容 dd:表示对内容进行解释说明
列表之间可以互相嵌套
超链接简介
当前页面跳转到其他页面,或者是当前页面的其他位置 a标签定义超链接,行内元素,在a标签中可以嵌套任何元素,唯独自己不可以嵌套自己 属性:href指定那个跳转的目标路径,值可以为外部网站的地址,也可以为内部页面的地址
相对路径
当我们需要跳转一个服务器内部的页面时,一般我们都会使用相对路径,相对路径都会用.或者..开头 ./可以省略不写,如果./不写,../也不写,则相当于写了./ ./:表示当前文件所在的目录 ../:表示当前文件的上一级文件所在目录
超链接其他用法
属性:target,用来指定超链接打开的位置 可选值:_self ,在当前页面打开 _blank, 在一个新的页面中打开
跳转到页面的顶部
直接将href的属性设置为#号,点击超链接,页面不会发生跳转,会直接回到当前页面顶部的位置 可以跳转到页面的指定位置,只需设置href属性值设置#目标元素的ID属性 ID属性:(唯一不重复) 每一个标签都可以添加一个ID属性,ID属性是元素的唯一标识,同一个页面不可以出现同样的ID属性,区分大小写,基本所有的属性应该都是字母开头
开发中,可以将#号作为超链接的路径占位符,但是有缺陷,所以写 javascrip:;点击超链接什么也不会发生
图片标签
图片标签用于向当前页面引入一个外部图片,使用img标签来引入外部图片,是一个自结束标签,属于一种替换元素(不显示本身内容,而是被某些东西替换),介于块元素和行内元素之间(有行内元素特点,也有块元素的特点)
src属性:外部图片的路径(路径规则都一样)
alt属性:图片的一个描述,描述一般默认情况下不会显示,一些浏览器在图片出不来的时候,描述会显示(并不是所有浏览器都这样哦),搜索引擎会根据alt内容识别图片,如果不写,不会被搜索引擎收录
- width 指定图片宽度(单位是像素)
- height 指定图片高度
- 高度,宽度中只改一个,另外一个会等比例修改;一般pc端,不建议设置图片的大小(大变小,浪费内存;小变大,失真),要多大,切多大;移动端一般大图缩小
图片的格式
- jpeg(jpg):支持的颜色丰富,不支持透明效果,不支持动图(一般显示照片)
- gif:支持颜色比较少,支持简单透明,支持动图(适合表示颜色单一的图片,动图)
- pmg:支持的颜色丰富,支持复杂透明,不支持动图(颜色丰富,复杂透明图片,转为网页而生,但是具体情况,具体看)
- webp:谷歌新推出的专门用来表示网页中图片的格式,具备其他图片格式的所有优点。效果好,内存小。缺点:兼容性不好
效果一样,用小的(内存小)
效果不一样,选好的,但是还要看一下下内存
base64:将图片使用base64进行编码,这样可以将图片转换为字符,通过字符的形式来引入图片,一般都是一些需要和网页一样加载的图片才会使用
页面的加载,一般图片的显现会有时差,用base64就会非常快,但是也会有其他缺陷
内联框架
- 用于向当前页面中引入其他页面
- src:指定引入的网页的路径
- frameborder:指定内联框架的边框,0表示没有框架,非0表示有框架, 一般情况下都不怎么会使用这个
音视频播放
audio音频标签
引入一个外部的音频文件,
- 默认情况下,音视频文件引入时,不允许用户自己控制播放停止的,要想控制,需要加入其他属性,controls:这个属性没有值,允许用户控制播放
- autoplay:一打开页面,自动播放。一些浏览器,写了autoplay但是,一打开,不会自动播放,要先手动打开后,再次进入可以自动播放 为提升用户体验,大部分浏览器都不会对音乐自动进行播放,IE可以
- loop:循环播放
- 除了通过src指定外部文件的路径以外,还可以通过source标签
- embed标签,老版本的浏览器引入音视频文件,标签要指定width和height才行,要稳定,要设置type的值,可以audio/mp3指定具体格式
video标签
向网页引入视频文件,使用方式和audio一样
快捷键:
- 1.复制:alt+shift+方向标下
- 2.跳回下一行:Ctrl+回车
- 3.注释:ctrl+/
- 4.lorem+tab键
- 5.ctrl+a:全选