html 中列表标签
列表一般应用在布局中的新闻标题列表和文章标题列表已经菜单, 他们是有语义的,标签结构如下:
<ul>
<li>列表标题一</li>
<li>列表标题二</li>
<li>列表标题三</li>
</ul>一般配合链接 a 结构语句一起使用,点击链接到新闻或者文章的具体内容;
列表相关样式中的list-style: none; 去掉列表前端的小圆点;
html中表单标签
表单用于搜集不同类型的用户输入,表单由不同的类型标签组成,相关标签和属性用法如下:
1. <form> 标签 用来定义表单区域;
action 属性 定义表单数据提交地址; method 属性提交方式,post或者get(默认)
2.<label>标签 为表单元素定义文字的标注
3.<input>标签 定义通用的表单元素
type属性如下:
type= text 定义单行文本输入框
type=password 定义密码输入框
type=radio 定义单选框
type=checkbox 定义复选框
type=file 定义上传文件
type=submit 定义提交按钮
type=reset 定义重置按钮
type=button 定义一个普通按钮
value 属性 定义表单元素的值
name 属性 定义表单元素的名称.此名称是提交数据时的键值
4.<textarea> 标签 定义多行文本输入框
5.<select>标签 定义下拉表单元素
6.<option> 标签 和<select> 标签配合, 定义下拉表单元素的选项
html 中的表格 标签
1.<table>标签 定义 一个表格
2.<tr> 标签 定义 表格中一行
3.<td> 和 <th> 标签 定义表格中一行 中的 一个单元格, td 表示普通单元格 , th 表示 表头单元格;
4. border-collapse 属性 设置 表格的边线合并 ; 如 border-collapse :collapse;
CSS 的 选择器 (下 ):
4. id 选择器 :
通过 id 名 来选择元素 , 元素 id 名称不能 重复, 所以一个样式设置项只能应对页面上一个元素,不能重复, id名一般给程序使用, 不推荐使用id 作为选择器;
5.组选择器 :
多个选择器, 如果有同样的样式设置, 可以使用组选择器,减少代码的复用性,提高代码质量
6.伪类选择器:
常用的伪类选择器有 hover , 表示鼠标悬浮在元素上时的状态;
CSS 显示特性
display 属性 是用来设置元素的类型显示 及隐藏的, 常用的属性有:
1. none 元素隐藏且不占位置
2.inline 元素以行内元素显示
3.block 元素以块元素显示
CSS 元素溢出
当子元素 的尺寸超过父元素的尺寸的时候, 需要设置父元素显示溢出子元素的方式,设置的方法是通过 overflow 属性来设置的:
1.visible 默认值. 内容不会被修建, 会显示在元素框之外;
2.hidden 内容会被修剪 ,并且其余内容是不可见的;
3.scorll 内容会被修剪, 但是浏览器会显示滚动条以便于查看其余的内容;(无论是否被修剪都会有滚动条 ,不推荐使用)
4.auto 如果内容被修剪, 则浏览器会显示滚动条以便于查看其余内容;
CSS中的定位
文档流:
文档流是指盒子按照hmtl标签编写的顺序依次从上到下, 从左到右排列, 块元素占一行, 内联元素在一行中从左到右排列, 先写的先排列, 后写的排在后面, 每个盒子都占据自己的位置;
关于定位, 我们可以使用css 中的position 属性来设置元素的定位类型, position的设置项如下:
1.relative 生成相对定位元素, 此相对于自己本身的偏移, 并且保留原始位置;
2.absolute 生成绝对定位元素, 元素脱离文档流,不占据文档流的位置, 可以理解为漂浮在文档流上方, 相对于上一个设置了定位的父级元素来进行定位, 如果找不到, 则相对于body 元素进行定位;
3.fixed 生成固定定位元素, 元素脱离文档流, 不占据文档流的位置, 可以理解漂浮在文档流上方, 相对浏览器窗口进行定位的
定位元素的偏移:
需要用到 left, right,top 或者是 buttom 来设置相对于参照物的偏移量;
定位元素层级
定位元素是浮动的正常的文档流之上的, 可以用z-index 属性来设置元素的层级.
CSS中的权重
CSS 权重指的是样式的优先级, 有两条或者多条样式作用于一个元素, 权重高的那条样式对元素起作用, 权重相同的, 后写的样式会覆盖前面写的样式.
权重的等级, 可以吧权重分成这几个等级:
1. 内联样式: 如 style = "" . 权重值为1000;
2. ID 选择器 : 如 #content , 权重值为 100;
3. 类, 伪类, 如: content, :hover 权重值为 10;
4. 标签选择器 , 如 div. p 权重值为 1;