前端剑法第一式———砺锋

前端学习之旅漫长悠远，犹如千日磨剑一朝起，寒光乍现惊九州，故而需耐下性子苦学基础，多学多记多练，方可成功。

目录

常用标签  （h1 , p , hgroup , em与strong , q , br , del与s , center , hr , div , span）

布局标签

 块元素（block element） 常用来布局

 行内元素（inline element）

行内块元素

列表（list）

a：超链接标签

img：图片

图片的格式

audio：音频

video：视频

---

*浏览器默认字体大小是16px，默认字体最小为12px

meta：字节数标签；  charset:字符集；  utf-8：万国码；  &nbsp，&emsp,&ensp：空格；  &gt：大于号； 

&lt：小于号；  &copy：版权符号；

常用标签  （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:循环播放