关于软件测试第二天---标签和CSS

标签

4.strong标签

5.em标签 双标签

6.img标签(image)单标签 图片标签

• 6.1 属性1：src：填写需要展示的图片的位置(路径)；路径可以是本地路径，也可以是网络路径。
• 6.2 属性2：alt：当前图片无法显示的时候对用户做出文字性解释
• 6.3 关于属性：1.在标签内写属性。2.属性名 = “属性值”
• 6.4 属性3：width：图片宽；不带单位
• 6.5 属性4：height：图片高；不带单位
• 6.6 为了让图片不失真，一般设置大小要等比例缩放。

7.a标签 双标签 超链接标签

• 属性1：href：表示要跳转的位置，该位置可以是本地的，也可以是网络的。
• 属性2：target_blank：打开一个空白的页面进行跳转。
• 空连接方式一：href = “###”
• 空连接方式二（标准空连接）：href = “Javascript:void(0)”
• 回到顶部：href = “#”
• 锚点

8.hr标签 单标签 横线

**9.列表标签 双标签 **

• 无序标签 ul un-order-list
• 有序标签 ol order-list
• 列表子项 li list

图片的路径

本地路径

• 相对路径：从当前位置开始，一直到资源所在位置结束，所形成的路径
  1. .代表当前位置(可以省略不写)
  2. …代表往外走一层
  3. /代表往里走一层

• 绝对路径：从电脑的根目录开始，一直到资源所在的位置结束，所形成的路径。

网络路径

• 图片所在的位置的网址；由http或者https开头的路径。

HTML标签的自身特性：行元素和块元素

行元素

• 不独占一行，可以在一行显示
• 不支持设置宽高，其大小由内容撑出
• 不支持上下的margin和padding值
• strong em img a span

块元素

• 独占一行
• 支持设置宽高，如果不设置，默认宽度与其父级宽度一样，高度由内容撑起。
• 支持上下的margin和padding值
• p h1~h6 br hr ul ol li div

嵌套规则

1.块元素可以嵌套部分块元素，和所有行元素

2.行元素只能嵌套行元素，不能嵌套块元素。

3.p标签不能嵌套块元素。

4.h1~h6标签里不能嵌套块元素。

CSS

什么是CSS?

• Cascading Style Sheets(层叠样式表)
• 作用：如何显示html元素。
• 如何写CSS？
  1. 行间CSS
  2. 内联CSS
  3. 外联CSS

常用的CSS样式

• 宽 width；单位：px em rem rpx %
• 高 height
• 背景色 background-color(美式)
• 文字颜色 color
• 字体大小 font-size
• 行高 line-height
• 文本对齐方式 test-align
• 字体粗细 font-weight
• 圆角 border-radius
• 边框 border
• 透明度 opacity
• font-weight 字体粗细：bold bolder normal
• 字体：font-family
• 背景(背景色，背景图片)：background

border有三个值

• 值1：边框粗细 1px 2px 2.5px
• 值2：边框样式 solid(实线) dashed(虚线) dotted(虚线)
• 值3：边框颜色：计算机三原色(光学三原色) 1.单词 red darkred 2.十六进制 3.rgb() 4.rgba(值1，值2，值3，值4)

如何写CSS

1.行间CSS样式

• 语法格式：标签内书写属性style=“样式名1:样式值1；样式名2:样式值2；…”
• 注意事项：CSS样式可以被覆盖。

优点：针对性强，优先级高
缺点：可复用性差，不符合W3C理念；

2.内联CSS

• 标签选择器(元素选择器)：
  1. 语法：标签名+(样式)
  2. 作用：能找到当前文档里所有的与标签名相同的标签。

• id选择器

  1. 语法：#id名{}
  2. 作用：找到当前文档里设置了id属性且id值为id名的元素，该元素只能找到唯一一个元素，因为id值唯一

• class选择器

  1. 语法：class名{}
  2. 作用：该选择器能找到所有的设置了class属性且值为class名的标签；一个class名可以被多个元素使用。一个元素可以设置多个class名，中间用空格隔开。

• 群组选择器

  1. 语法：选择器1，选择器2，选择器n{样式}
  2. 作用：能找到当前文档里所有内容的各个选择器选择到的元素。

• 子选择器:语法：选择器1>选择器2>…{ }

• 后代选择器：语法：选择器1 选择器2{ }

优点：符合W3C标准(结构，样式，行为相分离)，书写比较方便。
缺点：公共样式无法抽离，可能会造成代码冗余。
1：html和css分开写；2：在head标签里写个style标签；3：在style标签里写CSS样式；

外联CSS

• 引入外部CSS文件的方法：

  1. link标签引入：不在style标签里面，直接写link标签；
  2. @import方式引入：在style标签里面使用@import；

• 步骤：

  1. 先建一个CSS文件，把公共样式放入CSS文件中；
  2. 在需要加样式的html文件中，通过link或者@import方法引入CSS文件

• 何时用内联？何时用外联？

  1. 对于单页面来讲，内联比较方便；
  2. 对于多页面来讲，外联比较方便(有公共样式)

• link标签引入和import方式引入有什么区别???

  1. link方式引入是html语法，@import方式引入是CSS语法
  2. link方式是在html文档加载的时候就开始加载CSS文件；@import方式需要等到html文档加载完毕之后，才开始加载CSS文件。
  3. link方式引入的CSS样式，后期可以通过JS进行修改；@import引入的CSS后期无法通过JS修改。
  4. link方式可以引入任何类型的文件，@import方式只能引入CSS文件
  5. 我们一般使用link方式引入CSS文件；

• 命名规则：适合于所有需要起名字的地方

  1. 只能由数字，字母，_下划线，-横杠组成；
  2. 数字不能开头，一般由字母开头，一般不用中文
  3. 驼峰命名方式(有多个单词组成时，第二个单词首字母大写)
  4. 见名知意

• 选择器的优先级：默认样式<通配符选择器<标签选择器<class选择器(后代选择器)<id选择器<行间CSS样式<! important值

• 复合选择器的优先级：
  如果出现选择器复合的情况，按照各个选择器的权重和判断优先级
  * 0001； 标签 0010； class 0100； id 1000；

这优点：符合W3C规范，可以抽离公共样式
缺点：对于单页面的html文件，不必多此一举把公共样式抽离出去。