前端剑法第一式———砺锋
前端学习之旅漫长悠远，犹如千日磨剑一朝起，寒光乍现惊九州，故而需耐下性子苦学基础，多学多记多练，方可成功。
目录
常用标签 （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：万国码；  ，&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:循环播放
前端剑法第一式———砺锋相关推荐
- 前端剑法第二式————淬焰
金石砺身,赤焰淬魄,困燥褪去,幽玄寒锋,神兵天成 前端的学习总是繁多而细腻,需要去背诵记忆,不可好高骛远,眼高手低,切记切记 今日学习内容如下: 目录 网页 css -层叠样式表 -设置网页中元素的样 ...
- 前端剑法第三式————碎岩
忽而一剑金石碎,绿梢下,勿回首,天下无处不可游 今日学习内容 目录 长度单位 1:像素 px 2:百分比 % 3.em 4.rem 颜色单位: 字体样式 1:color ...
- 前端剑法第五式————平乱
清溪牧者宿云田,忽梦村林鸡鸣起, 佳影轩窗,心思潸然起 马嘶人吼惊怒起,何人? 一剑平乱四下寂 纵马疾行,少年意气志天涯 今日学习内容 目录 文档流(normal flow) 盒子模型 1:内容区(c ...
- 前端剑法第四式————御风
御扶摇而上者九万里,绝云气,负青天 风往矣,吾亦往矣 今日学习内容 目录 一,表格 1.table tr和td 2.合并单元格 rowspan和colspan 二,表格样式 表格单线边框border- ...
- 剑法三套，程序员也能挣大钱
1 引子 都说海阔凭鱼跃,又有多少鱼能跃出大海?都说天高任鸟飞,但真正能一飞冲天的,也不过是寥寥数鹰而已:在IT圈里流浪的程序员,当青春逝去.渐至而立之年时,又有多少人黯然退出?30岁,似乎宣告了程序 ...
- 剑法三套，程序员也能挣大钱（一）
(本文共分三部分,现在打开的是<第一部分>,欢迎继续阅读<第二部分>和 <第三部分>) 1 引子 都说海阔凭鱼跃,又有多少鱼能跃出大海?都说天高任鸟飞,但真正能一飞 ...
- 程序员之剑法三套-（原来程序员也是“剑客”）
1 引子 都说海阔凭鱼跃,又有多少鱼能跃出大海?都说天高任鸟飞,但真正能一飞冲天的,也不过是寥寥数鹰而已:在IT圈里流浪的程序员,当青春逝去.渐至而立之年时,又有多少人黯然退出?30岁,似乎宣告了程序 ...
- vue中向数组去重_「前端剑指offer第3期」来，手写一下数组去重
数组去重一般来说就这么几种方法,理解代码,记住就好!Map.Set.reduce.filter~ 方法1 .Map 创建一个Map对象,把数组的值作为Map对象的索引,再获取所有的索引. const ...
- 8cm等于多少像素_「前端剑指offer第5期」物理像素、逻辑像素、CSS像素、PPI、设备像素比是什么...
# 提问 物理像素.逻辑像素.CSS像素.PPI.设备像素比是什么? # 回答 物理像素代表屏幕上有多少个点,比如1080x2340表示屏幕一排包含1080个物理像素点. 逻辑像素表示屏幕展示物体的视 ...
最新文章
- Android 中一些常用类的常用方法（Math、Random、Color、Paint、Canvas、Bitmap、BitmapFactory）...
- python连接文本文件_Python连接文本文件
- JavaWeb_检查用户是否登录的过滤器
- angularjs $watch
- Java“地铁”表（JavaFX）
- 工业级交换机的功率和管理功能详解
- XPath和lxml类库
- C/C++ OpenCV图像的尺寸变化
- houdini 常用
- 2019区块链将走向何方？硅谷知名投资大咖如是说
- 博图SCL 选择排序
- Java随机生成4位随机数字+字母
- 软件测试中的Fault、Error和Failure
- 你知道各调的特点吗？
- longitudinal models | 纵向研究 | mixed model
- windows10 下 Haskell 环境搭建2020
- UE4项目开启光线追踪
- window10桌面管理器占内存太高解决办法
- 墨者学院01 SQL手工注入漏洞测试(MySQL数据库)
- DPDK and XDP and ebpf