前端学习之旅漫长悠远,犹如千日磨剑一朝起,寒光乍现惊九州,故而需耐下性子苦学基础,多学多记多练,方可成功。
目录
常用标签 (h1 , p , hgroup , em与strong , q , br , del与s , center , hr , div , span)
*浏览器默认字体大小是16px,默认字体最小为12px
meta:字节数标签; charset:字符集; utf-8:万国码;  ,&emsp,&ensp:空格; >:大于号;
<:小于号; ©:版权符号;
常用标签 (h1 , p , hgroup , em与strong , q , br , del与s , center , hr , div , span)
h1-6;标题标签:块元素,有默认样式
p;落标签:块元素,有默认样式,p标签含有默认的margin-top和margin-bottom,大小都为1em,即当前标签的字体大小(默认为16px),一般用来包裹文字或图片,标签里不能放块元素
hgroup;分组标签:包裹起来的内容化为一组,表面没有变化
em;倾斜(强调)
strong;加粗(强调)
strong与em强调的区别:strong强调内容;em强调语言语调
q;双引号标签:双引号在文中选不中,因为用到了伪类
br;换行标签
del;与s;删除线标签
center;居中标签
hr;分割线标签
布局标签
header:头部标签; main:主题标签; footer: 底部标签; nav:导航标签;
aside:侧边栏标签; artide:文章标签; section:独立块区,以上都不适用时,用这个
块元素(block element) 常用来布局
1、独占一行,自上而下一行一行的排列
2、块元素的宽度默认是父元素宽度的100%
3、块元素的高度默认是被内容撑开的
常用块元素:div p h1-h6 ul li ol header footer main nav
行内元素(inline element)
1、不会独占一行,自左向右排列,一行满了,就挪到下一行,再自左向右
2、行内元素的宽高都是被内容撑开的,不可以自定义高度
常用行内元素:span a i em strong del s
行内块元素
兼具行内元素,块元素特点
又不会独占一行,又可以设置宽高
常用行内块元素:img
display 实现不同元素的相互转换
可选值: none block inline inline-block
注意:
1、块元素是布局元素,里面什么都能放,能方块元素,能放行内元素,行内块元素
2、行内元素 一般就用来包裹文字
3、特殊的块元素 p 不能放块元素
4、特殊的行内元素 a 里面什么都能放,除了它自己
列表(list)
一组一组
1:有序列表 用ol标签创建,li表示列表项
2:无序列表 用ul标签创建,li表示列表项
disc,默认值,实心的圆点
square,实心的方块
circle,空心的圆
3:定义列表 用dl标签创建,使用dd对内容进行解释说明
注意:列表之间是可以互相嵌套的
可以使用type属性 更改项目符号
默认样式,li有项目符号,上下外边距,左内边距
a:超链接标签
功能:
- 1 跳转至新页面
- 2 当前页面跳转(楼梯导航)
- 3 下载
href:指向跳转的目标地址;
targrt:控制打开网址方式
- 1 target_self:当前页面打开
- 2 target_blank:新页面打开
空链接写法:target:“#”
img:图片
- src:引入图片的路径
- alt:图片悬停时显示内容
一般不同时设置宽高,会变形
锚点功能
给对应的位置,打一个id属性值
在href的属性值里,写:#id属性值
id属性值不能以数字开头,最好不要是汉字,独一无二的存在
图片的格式
JPEG(JPG)
- JPEG图片支持的颜色比较多,图片可以压缩,但是不支持透明
- 一般用来保存照片等颜色丰富的图片
GIF
- GIF支持的颜色少,只支持简单的透明,支持动态图
- 图片颜色单一或者是动态图时可以使用gif
PNG
- PNG支持的颜色多,并且支持复杂的透明,不支持动图
- 可以用来显示颜色复杂的透明的图片
专为网页而生的
webp
-谷歌新推出的专门用来表示网页的一种格式
-它具有其他图片格式的所有优点,而且文件格式还很小
-缺点:兼容性不好
base64
-讲图片使用base64编码,这样可以将图片转换为字符,通过字符形式来引入
-一般都是需要和网页一起加载的图片才会使用base64
图片的使用原则:
效果不一致,使用效果好的
效果一致,使用小的
网页加载流程
第一次请求:加载网页本身
第二次之后请求,加载外部资源
audio:音频
video:视频
- controls:控制用户是否可以播放
- autoplay:自动播放(基本不用)
- loop:循环播放