HTML&CSS学习笔记
HTML&CSS知识点
HTML
- 概念：HTML是最基础的网页开发语言
- Hyper Text Markup Language：超文本标记语言
- 超文本:
- 超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本
- 标记语言:
- 由标签构成的语言。<标签名称> 如 html，xml
- 标记语言不是编程语言
- 快速入门：
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>titletitle>
head>
<body>
<FONT color='red'>Hello Worldfont><br/>
<font color='green'>Hello Worldfont>
body>
html>
HTML标签
标签学习
- 文件标签：构成html最基本的标签
:html文档的根标签：头标签。用于指定html文档的一些属性。引入外部的资源：体标签：html5中定义该文档是html文档
- 文本标签
- 注释：
- 注释：
单标签
- 水平线：
- 换行：
- 图像：
- 图像属性：
- src：指定图片的位置
- alt：图像无法显示时替换图像
- title：鼠标悬停时的显示文本
- width：宽度
- height：高度（宽高不要同时设置）
- border：边框
- 图像属性：
双标签
-
标签：h1—h6
-
段落：
-
无语义标签：
：每一个div占满一整行。块级标签：文本信息在一行展示，行内标签 内联标签
-
语义化标签：html5中为了提高程序的可读性，提供了一些标签
：页脚
-
粗体：
-
斜体：
-
下划线：
-
删除线：
-
- 创建超级链接：链接本地文件 链接外部文件
- 查看同一页面的指定位置：
href="#名称" name="名称" - 在新的浏览器窗口打开：
target="_blank"
-
href：指定访问资源的URL(统一资源定位符) -
target：指定打开资源的方式"_self"：默认值，在当前页面打开"_blank"：在新建的空白页面打开
-
设置整体链接的打开状态：base
- 放在
之间 target="_blank"- 所有链接默认都是在新标签页中打开
- 放在
-
列表
- 无序列表：ul li (type：disc,square,circle)
- 有序列表：ol li (type：1,a,A,i,I)
- 自定义列表：dl dt dd
-
表格：
- 标题：
- 表示表格的头部分：
- 表示表格的体部分：
- 表示表格的脚部分：
- 定义行：
- 定义单元格：
- 合并行(竖)：rowspan=“合并个数”
- 合并列(横)：colspan=“合并个数”
- 定义表头单元格：
- 表头：thead-tr-th
- 表格主体：tbody-tr-td
- 属性：
- 宽度：width
- 高度：height
- 表格边框：border
- 单元格与单元格之间的间隙：cellspacing（一般设置为0）
- 单元格内容与边框之间的间隙：collspadding（一般设置为0）
- 表格的对齐方式：align
- 标题：
表单标签
-
概念：用于采集用户输入的数据的，用于和服务器进行交互。
-
定义表单：
-
属性：
- action：指定提交数据的URL
- method：指定提交方式
- 分类：一共7种，2种比较常用
- get
- 请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)。
- 请求参数大小是有限制的。
- 不太安全。
- post
- 请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议后讲解)
- 请求参数的大小没有限制。
- 较为安全。
- get
- 分类：一共7种，2种比较常用
-
注意：表单项中的数据要想被提交，必须指定其name属性
-
表单项标签：
-
：可以通过type属性值，改变元素展示的样式- type属性：
- text：文本输入框，默认值
- placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息
- password：密码输入框
- radio：单选框
- 注意：
- 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。
- 一般会给每一个单选框提供value属性，指定其被选中后提交的值
- checked属性，可以指定默认值
- 注意：
- checkbox：复选框
- 注意：
- 一般会给每一个单选框提供value属性，指定其被选中后提交的值
- checked属性，可以指定默认值
- 注意：
- file：文件选择框
- hidden：隐藏域，用于提交一些信息。
- 按钮：
- submit：提交按钮。可以提交表单
- button：普通按钮
- image：图片提交按钮（src属性指定图片的路径）
- reset：重置按钮
- text：文本输入框，默认值
- type属性：
-
label：指定输入项的文字描述信息
- 注意：
- label的for属性一般会和 input 的 id 属性值 对应。如果对应了，则点击label区域，会让input输入框获取焦点。
<form> <label for="male">Malelabel> <input type="radio" name="sex" id="male" /> <br /> <label for="female">Femalelabel> <input type="radio" name="sex" id="female" /> form> - 注意：
-
select: 下拉列表
- 子元素：option，指定列表项
-
textarea：文本域
- cols：指定列数，每一行有多少个字符
- rows：默认多少行。
-
CSS
-
概念： Cascading Style Sheets 层叠样式表
-
层叠：多个样式可以作用在同一个html的元素上，同时生效
-
好处：
- 功能强大
- 将内容展示和样式控制分离
- 降低耦合度。解耦
- 让分工协作更容易
- 提高开发效率
CSS的使用：CSS与html结合方式
-
内联样式\行内样式
- 在标签内使用style属性指定css代码
- hello css
-
内部样式
- 在head标签内，定义style标签，style标签的标签体内容就是css代码
<style> div{ color:blue; } style> <div>hello cssdiv> -
外部样式
- 定义css资源文件
- 在head标签内，定义link标签，引入外部的资源文件
div{ color:green; } <link rel="stylesheet" href="css/a.css"> <div>hello cssdiv> <div>hello cssdiv> -
注意：
- 三种方式css的作用范围越来越大
- 后期常用：内部样式、外部样式
<style> @import "css/a.css"; style>
css语法：
选择器 { 属性名1:属性值1; 属性名2:属性值2; ... }- 选择器：筛选具有相似特征的元素（div、span…）
- 注意：每一对属性需要使用 ; 隔开，最后一对属性可以不加
选择器：筛选具有相似特征的元素
- 基础选择器
- id选择器：选择具体的id属性值的元素（建议在一个html页面中id值唯一）
- 语法：
#id属性值{}
- 语法：
- 元素选择器：选择具有相同标签名称的元素
- 语法：
标签名称{} - id选择器优先级 > 元素选择器
- 语法：
- 类选择器：选择具有相同的class属性值的元素。
- 语法：
.class属性值{} - 类选择器优先级 > 元素选择器
- 语法：
- id选择器：选择具体的id属性值的元素（建议在一个html页面中id值唯一）
- 扩展选择器：
- 通配符选择器（选择所有元素）
- 语法：
*{}
- 语法：
- 交集选择器
h2.ab{ } (类名为ab的h2标签)
- 并集选择器
- 语法：
选择器1,选择器2{} div,p, .ab{ }（多个选择器一起选中）
- 语法：
- 子选择器：筛选 选择器1元素下 的 选择器2元素
- 语法：
选择器1 选择器2{}
- 语法：
- 父选择器：筛选 选择器2的父元素选择器1
- 语法：
选择器1 > 选择器2{} div>p { }（div标签的亲儿子p标签）
- 语法：
- 后代选择器
div p{ }（div中包裹的p标签。可以是父子关系，可以是爷孙关系）
- 属性选择器：选择元素名称，属性名=属性值的元素
- 语法：
元素名称[属性名="属性值"]{}
- 语法：
- 伪类选择器：选择一些元素具有的状态
- 通配符选择器（选择所有元素）
CSS字体样式属性
-
font-size：字体大小
-
font-family：字体
-
font-weight：字体粗细（normal=400, bold=700, bolder, lighter）
-
font-style：字体风格（normal, italic斜体, oblique倾斜）
-
font 综合设置字体样式：
选择器 {font：font-style font-weight font-size/line-height font-family}
CSS外观属性
- color：颜色
- line-height：行间距
- text-indent：首行缩进(em)
- text-aligh：水平对齐方式（left, center, right）
- text-decoration：文本修饰（none, underline下划线, overline文本上的一条线, line-through穿过文本的线）
标签显示模式
块级元素
- 常见的块元素有
~
、
、
、- 、
- 等，其中标签是最典型的块元素
- 总是从新行开始
- 高度，行高、外边距以及内边距都可以控制
- 宽度默认是容器的100%
- 可以容纳内联元素和其他块元素
行内元素
- 常见的行内元素有
、、、、、等，其中、、、、标签是最典型的行内元素
- 和相邻行内元素在一行上
- 高、宽无效，但水平方向的 padding 和 margin 可以设置，垂直反向的无效
- 默认宽度就是它本身内容的宽度
- 行内元素只能容纳文本或则其他行内元素。（a 特殊 a里面可以放块级元素）
行内块元素
- 在行内元素中有几个特殊的标签——
、、
- 和相邻行内元素（行内块）在一行上，但是之间会有空白缝隙
- 默认宽度就是它本身内容的宽度
- 高度，行高、外边距以及内边距都可以控制
显示模式的转换
- 块级元素转换为行内元素：
display: inline - 行内元素的转换为块级元素：
display: block - 块级元素/行内元素转换为行内元素：
display: inline-block
注意点
- div中不能放一个有宽度的块级标签
- 文本类标签（p，h1~h6，dt）中只能放文本，不能放块级标签
- 链接里面不能再放链接
行高：line-height
- div中不能放一个有宽度的块级标签
- 文本类标签（p，h1~h6，dt）中只能放文本，不能放块级标签
- 链接里面不能再放链接
CSS三大特性
- 层叠性：样式冲突时，遵循就近原则；样式不冲突时，则互不影响
- 继承性：子元素可以继承父元素的样式（text-，font-，line-这些元素开头的都可以继承，以及color属性）
- 优先级：通配符选择器 < 标签选择器 < 类选择器 < id选择器 <！important
背景图片
- background-color 背景颜色
- background-img：url（图片地址） 背景图片
- 背景图片是否平铺：background-repeat：repeat（默认平铺）/no-repeat（不平铺）/repeat-x（水平平铺）/repeat-y（垂直平铺）
- 背景图像方位 background-position：length（数值）/position（top、bottom、left、right、center）
①position后面可以跟方位名词，之间没有顺序
②position如果只写一个值，另一个默认居中
③position后面也可以跟值px，但是必须有顺序，x在前，y在后 - 背景图尺寸设置 background-size：width, height
- 背景附着 background-attachment：scroll（默认随对象内容滚动）/fixed（背景图像固定）
- 背景简写 background：背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
- 背景透明：background：rgba（0，0，0，0~1）
盒子模型
- 盒子模型由元素内容、内边距、外边距、边框构成
- 盒子边框
- border：border-width border-style border-color
- border-style：solid（单实线）/dashed（虚线）/dotted（点线）/double（双实线）
- border-top / border-left / border-right / border-bottom
- border-width：
- 20px（上下左右均为20像素）
- 20px 30px（上下为20像素，左右为30像素）
- 20px 30px 40px（上为20像素，左右为30像素，下为40像素）
- 20px 30px 40px 50px（上为20像素，右为30像素，下为40像素，左为50像素）
- 表格细线边框：table{ border-collapse：collapse；}
- 设置内边距（padding）后会撑开盒子
- 外边距（margin）
- 外边距水平居中（margin：0 auto）
- 外边距塌陷
- 相邻块元素垂直外边距合并，选取较大的外边距，避免即可
- 嵌套块元素垂直外边距合并
①父级元素定义1px上边框或上内边距
②为父级元素添加 overflow：hidden
- 盒子默认宽度
- 当父盒子有宽度定值时，则父盒子padding会撑开父盒子
- 如果盒子没有给定宽度，用的是默认父盒子宽度，则给予的padding值不会撑开盒子
- 圆角边框
- border-radius：50%（也可以取数值）
- 盒子阴影
- box-shadow：水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色（rgba）内（inset）/外阴影（默认）
浮动：float
-
float：left / right
-
浮动特性：
- 浮动是指脱离本身的位置，把原先自己的位置让出来了
- 父级没有高度，则子级浮动不会再撑开父级盒子
- 浮动其实就是隐藏的模式转换
-
清除浮动的方法
- 额外标签法 .clear（clear：both；）在浮动的标签后面加一个类名为clear的空标签
- 给浮动的元素父级添加 overflow：hidden
- 使用after伪元素清除浮动, 在浮动的元素的父级元素添加 class=“clearfix”
.clearfix:after{ content=""; display:block; height:0; clear:both; visibility:hidden; } .clearfix{*zoom:1;}- 使用after和before双伪元素清除浮动, 在浮动的元素的父级元素添加class=“clearfix”
.clearfix:after,clearfix:before{ content="";display:table;} .clearfix:after { clear:both} .clearfix{*zoom:1;}
定位 position
- 静态定位 position: static
- 静态位置就是各个元素在HTML文档流中默认的位置。
- 相对定位 position: relative
- 相对定位通过边偏移移动位置，但 原来所占据的位置继续占有
- 每次移动位置，以自己的左上角基点移动
- 绝对定位 position: absolute
- 通过边偏移移动位置，但 完全不占据位置
- 若写定绝对定位的子元素的所有父级元素都没有定位的时候，以浏览器为准进行偏移，若父元素有定位，则以父元素位置。
- 绝对定位盒子居中
- left：50%，父盒子的一半
- 子盒子自己外边距负一半的值
- 固定定位 position: fixed;
- 固定定位元素与父级元素无关，只认浏览器
- 固定定位完全脱标，不占有位置，不随着滚动条滚动
- 叠放顺序 z-index
- z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。
- 如果取值相同，则根据书写顺序，后来居上。
- 后面数字一定不能加单位。
- 只有相对定位，绝对定位，固定定位有此属性。
CSS高级技巧
- 元素的显示和隐藏
- display: none; 隐藏之后，不再保留位置
- display: block; 显示元素
- visibility: hidden; 隐藏之后保留原有位置
- visibility: visible; 元素可见
- 溢出显示与隐藏
- overflow: visible; 默认不剪切内容也不添加滚动条
- overflow: auto; 超出自动显示滚动条
- overflow: hidden; 超出部分隐藏
- overflow：scroll; 不管是否超出内容，总是显示滚动条
- 鼠标样式
- cursor: default 小白（一般状态）
- cursor: pointer 小手
- cursor: move 移动（十字）
- cursor: text 文本（I 字型）
- 取消input 等的轮廓线
- outline: none;
- 防止文本域拖拽
- resize: none;
- 垂直对齐
- vertical-align: baseline; 默认图片与文字基线对齐
- vertical-align: middle; 图片与文字垂直居中
- vertical-align: top; 图片与文字顶部对齐
- 去除图片底部空白缝隙
- 给img添加 vertical-align: top / middle
- 将img转为块级元素display: block;
- 溢出的文字隐藏（步骤）
- 强制在一行内显示所有文本直到文本结束或遭遇br标签对象来才换行
- white-space：nowrap
- 溢出隐藏
- overflow：hidden
- 文字溢出
- text-overflow：clip（不显示省略标记直接裁剪）/ ellipsis（当对象内文本溢出是显示省略标记）
- 强制在一行内显示所有文本直到文本结束或遭遇br标签对象来才换行
你可能感兴趣的:(学习笔记,html)
- 、
- 等，其中