李芊芊 html_css_学习笔记

标题标签 <h1>这是一级标题标签</h1>

段落标签 <p>这是一个段落标签</p>

换行标签 <br>

图片标签 <img src="" title="">

超链接标签 <a href="http://www.baidu.com">跳转到百度</a>

常用的HTML标签

绝对路径：以最原始位置为基准

相对路径：以当前位置为基准

绝对路径与相对路径

无序列表 <ul></ul>

有序列表<ol></ol>

定义列表<dl></dl>

列表标签

table：整个表格的最外层标签 tr：行标签 th：表格标题标签 td：列标签，一个td，就是一个单元格 表格标签属性： border：边框宽度

表格合并：表格合并中两个重要属性：● colspan：合并列● rowspan：合并行

表格标签

form标签 form是表单最外层标签。 action属性：提交服务器地址 method属性：提交方式：get、post

文本框 <input type="text" placeholder="用户名" value="zhangsan" />

密码框<input type="password"/>

单选按钮

复选框

下拉列表

文件域

文本域

提交按钮

重置按钮

普通按钮

.其它标签

表单标签

div标签：块级标签，可以在某块区域中指定出一块区域内容。其本身没有任何视觉上的效果

span标签：内联标签，可以在一行中指定出一段内容。其本身没有任何视觉上的效果。

容器标签div与span

html

HTML标签选择器：直接作用于某个HTML标签

类选择器：可在页面中被多次使用

ID选择器：作用于同一ID的某个资源，同一个页面中只能使用一次

CSS选择器

后代选择器： E F 选择所有被E元素包含的F元素

子选择器： E > F 选择所有作为E元素的子元素F（只选择第一代子元素）

群组选择器：多个选择器通过逗号连接而成，利用群组选择器同时声明风格相同样式

层次选择器

first-of-type：选择一组子元素中的第一个（即使有其他子元素，也不会受到影响）

:last-of-type：选择一组子元素中的最后一个（即使有其他子元素，也不会受到影响）

nth-of-type()：使用索引来选择某一个子元素（即使有其他子元素，也不会受到影响）

伪类选择器

行内样式 写在某个标签中，只对本行有效

内嵌样式 样式写在某个页面的style标签中，只对本页面有效。

外部样式 将样式代码写在一个单独的文件中（.CSS文件），使用时要将这个.CSS文件导入使用

CSS引入方式

1. 从引用方式方面来说：行内样式 > 内嵌样式/外部样式2. 从选择器方面来说：ID 选择器 > 类选择器（属性选择器、伪类选择器） > 标签选择器

CSS优先级

CSS继承规则：1. 子标签可以继承父标签的样式风格2. 子标签的样式不会影响父标签的样式风格3. 一般只有文字文本具有继承特性，如文字大小、文字加粗、文字颜色、字体等。

CSS继承

主要有以下两种：1. 使用英文单词作为颜色值2. 使用十六进制的颜色值

CSS中的颜色

font-family 设置字体名称font-size 设置字体大小font-style 设置字体风格 font-weight 设置字体的粗细

字体样式

color 设置文本颜色 text-align 设置元素水平对齐方式 vertical-align 设置元索垂直对齐方式 (可为负值）line-height 设置文本的行高 text-decoration 设置文本的装饰

文本样式

width 宽度 长度或百分比（不可为负值）height 高度 长度或百分比（不可为负值）

尺寸样式

列表样式

background-color 背景颜色 background-image 背景图象 background-repeat 背景重复

背景样式

default 默认光标pointer 超链接的指针wait 指示程序正在忙help 指示可用的帮助 text 指示文本crosshair 鼠标呈现十字状

鼠标样式

a:link 未单击访问时超链接样式 a:visited 单击访问后超链接样式 a:hover 鼠标悬浮其上的超链接样式 a:active 鼠标单击未释放的超链接样式 a:active

伪类样式

opacity:X X取值为0-1，值越小越透明

透明度样式

CSS常用样式

外边距样式 margin

● border-width： 设置或检索对象边框宽度。● border-style： 设置或检索对象边框样式。● border-color： 设置或检索对象边框颜色

边框样式

内边距样式 padding

● 盒子模型总尺寸=border（两个边框宽度）+padding（两个内边距宽度）+内容宽度● 盒子模型占用空间=margin（两个外边距宽度）+盒子模型总尺寸

盒子模型尺寸

块级元素（block level）

内联元素（inline 行内元素）

块级内联元素

三种元素

display样式有两个功能：● 控制元素的显示和隐藏● 块级元素与行级（内联）元素的转变

显示与隐藏

盒子模型

1. static：静态定位（默认）。依据文档流定位。2. relative：相对定位。以自身为基准，设置坐标（left、top、right、bottom），不脱离文档流。3. absolute：绝对定位。以父元素为基准，设置坐标（left、top、right、bottom），脱离文档流。4. fixed：固定定位。以浏览器窗口为基准，设置坐标（left、top、right、bottom），脱离文档流。

元素定位

flex-direction属性就是用来设置主轴方向的。

flex样式

弹性布局

css

前端