2020年4月27日总结(二)
一、a元素补充
1.1.锚点链接
- 跳转到网页中的具体位置
- a href="#id"
1.2.伪链接
- 没有指明具体链接地址的链接
- 点击连接后具体要做什么事情，需要编写对应的JavaScript代码
- 有时候可以把链接当作按钮来使用
1.3.a元素和img元素结合
- 跳转到新页面
- 下载资源
二、URL->input
-
浏览器访问https://www.baidu.com/img/bdlogo.gif的过程
-
域名：www.baidu.com 方便记忆
-
主机地址：183.232.231.173
-
DNS：将域名解析成主机地址
-
URL的全称是Uniform Resource Locactor(统一资源定位符)
-
URL就是资源的地址、位置，互联网上的每个资源都有一个唯一的URL
-
通过一个URL，能找到互联网上唯一的一个资源
-
URL的基本格式 = protocol://hostname/path = 协议://主机地址/路径
-
协议：不同的协议，代表着不同的资源查找方式、资源传输方式
-
主机地址：存放资源的主机的IP地址(域名)
-
路径：资源在主机中的具体位置
-
URL常见的协议：
- http：超文本传输协议，访问的是远程的网络资源，格式是http://
- https：相当于http协议的安全版
- file：访问的是本地计算机的资源，格式是file://
- mailto：访问的是电子邮件地址，格式是mailto:
- ftp：访问的是共享主机的文件资源，格式是ftp://
-
URL更具体地格式：
- protocol://hostname[:port]/path/;parameters?query#fragment
- port：端口号，范围是0到65535，HTTP的默认端口号是80，FTP默认端口号是21
- query：请求参数，提交给服务器的数据
- fragment：锚点位置
三、认识CSS
3.1.什么是CSS？
- CSS的作用是：可以给网页中的每个元素设置样式，让网页更加精美
- 没有CSS的网页就是一堆从上到下，从左到右挨在一起的文字和图片
- CSS的全称是Cascading Style Sheets，层叠样式表
3.2.CSS简史
- CSS1 -> CSS2 -> CSS2.1->CSS2.2
- CSS3：是CSS2.x以后对一些CSS模块进行升级更新后的称呼，其实并没有完全的CSS3
3.3.常用CSS属性
3.4.CSS官方文档
- mdn
- caniuse.com查询CSS属性是否可用
3.5.CSS样式的书写格式
- color: red
- 冒号: 左边是样式名，冒号:右边是样式值
四、CSS的写法
4.1.CSS提供了三种方法，可以将CSS样式应用到元素上
- 内联样式(inline style)
- style="属性名: 属性值;属性名: 属性值;" 直接在元素标签内部引入
- 文档样式表(document style sheet)、内嵌样式表(embed style sheet)
- 需要在head元素中加入style元素编写css属性
- 外部样式表(external style sheet)
- 开发网页特性: 结构和样式分离
- link引入样式：rel="stylesheet" href="../css/style.css"
- style引入样式：@import url(./css/style.css);
- 不管是link引入还是style引入，都需要把重要的那一个css文件放在后面引入，因为它会把之前引入的css文件相同属性的给覆盖掉
- css文件中引入其他css文件：@import url(./base.css);
- css文件中必须规定编码集：@charset "utf-8";
五、CSS基础选择器
5.1.什么是CSS选择器？
- 按照一定的规则选出符合条件的元素，为之添加CSS样式
5.2.通用选择器(universal selector)
- 所有元素 *
- 一般所有元素的做一些通用性的设置，比如内边距，外边距
- 效率比较低，尽量不要使用
5.3.元素选择器(type selector)
- 标签选择器
5.4.类选择器(class selector)
- .类名选择
- 一个元素可以有多个类，以空格分开
- 类的名字规范：
- 尽量见名知意
- 当有多个单词时，用什么进行连接：
- -连接：large-font
- _连接：large_font
- 驼峰连接：largeFont
5.5.ID选择器(ID selector)
- #ID
- 强调：id名称在一个页面中不要重复(代码规范)
六、CSS常见的属性
- color： 前景色(文字颜色)
- font-size：文字大小
- background-color：背景色
- width：宽度
- height：高度
- div{outline: 2px solid green !important}
七、颜色空间RGB
7.1.rgb:
十进制：
- red: 0-255
- green: 0-255
- blue: 0-255
- alpha: 0-1
- 1不透明
- 0透明
- 一种颜色是按一个字节表示的，所以最大数值就是255
- transparent：表示rgb和alpha都是0
十六进制：
- #FF0000
- #00FF00
- #0000FF
八、快捷键补充
8.1.一次选中多个内容：
- alt + 鼠标点击
- alt + shift + 鼠标拖动
九、标签语义化
9.1.什么是标签语义化？
- 选择标签的时候要尽量让每一个标签都有正确的语义
- 虽然很多标签之间互换之后也能实现功能，但还是要遵守“标签语义化”
- 比如用strong实现a、img的功能
9.2.标签语义化的好处
- 方便代码维护
- 减少开发者之间的沟通成本
- 能让语音合成工具正确识别网页元素的用途，以便做出正确的反应
- 让搜索引擎能够正确识别重要的信息
