HTML&CSS知识点
程序员文章站
2022-05-29 15:55:19
...
HTML&CSS知识点
HTML
- 概念:HTML是最基础的网页开发语言
- Hyper Text Markup Language:超文本标记语言
- 超文本:
- 超文本是用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本
- 标记语言:
- 由标签构成的语言。<标签名称> 如 html,xml
- 标记语言不是编程语言
- 快速入门:
- html文档后缀名 .html 或者 .htm
- 标签分为
- 围堵标签:有开始标签和结束标签。如
<html> </html>
- 自闭和标签:开始标签和结束标签在一起。如
<br/>
- 标签可以嵌套:
- 需要正确嵌套,不能你中有我,我中有你
- 错误:
<a><b></a></b>
- 正确:
<a><b></b></a>
- 错误:
- 需要正确嵌套,不能你中有我,我中有你
- 在开始标签中可以定义属性。属性是由键值对构成,值需要用引号(单双都可)引起来
- html的标签不区分大小写,但是建议使用小写。
- 围堵标签:有开始标签和结束标签。如
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<FONT color='red'>Hello World</font><br/>
<font color='green'>Hello World</font>
</body>
</html>
HTML标签
标签学习
- 文件标签:构成html最基本的标签
-
<html></html>
:html文档的根标签 -
<head></head>
:头标签。用于指定html文档的一些属性。引入外部的资源 -
<title></title>
:标题标签 -
<body></body>
:体标签 -
<!DOCTYPE html>
:html5中定义该文档是html文档
-
- 文本标签
- 注释:
<!-- 注释内容 -->
- 注释:
单标签
- 水平线:
<hr>
- 换行:
<br>
- 图像:
<img>
- 图像属性:
- src:指定图片的位置
- alt:图像无法显示时替换图像
- title:鼠标悬停时的显示文本
- width:宽度
- height:高度(宽高不要同时设置)
- border:边框
- 图像属性:
双标签
-
标签:h1—h6
-
段落:
<p></p>
-
无语义标签:
-
<div></div>
:每一个div占满一整行。块级标签 -
<span></span>
:文本信息在一行展示,行内标签 内联标签
-
-
语义化标签:html5中为了提高程序的可读性,提供了一些标签
-
<header></header>
:页眉 -
<footer></footer>
:页脚
-
-
粗体:
<strong></strong>
-
斜体:
<em></em>
-
下划线:
<ins></ins>
-
删除线:
<del></del>
-
链接:
<a href="#" target="_self"></a>
- 创建超级链接:链接本地文件 链接外部文件
- 查看同一页面的指定位置:
href="#名称" name="名称"
- 在新的浏览器窗口打开:
target="_blank"
-
href
:指定访问资源的URL(统一资源定位符) -
target
:指定打开资源的方式-
"_self"
:默认值,在当前页面打开 -
"_blank"
:在新建的空白页面打开
-
-
设置整体链接的打开状态:base
- 放在
<head></head>
之间 target="_blank"
- 所有链接默认都是在新标签页中打开
- 放在
-
列表
- 无序列表:ul li (type:disc,square,circle)
- 有序列表:ol li (type:1,a,A,i,I)
- 自定义列表:dl dt dd
-
表格:
<table></table>
- 标题:
<caption></caption>
- 表示表格的头部分:
<thead></thead>
- 表示表格的体部分:
<tbody></tbody>
- 表示表格的脚部分:
<tfoot></tfoot>
- 定义行:
<tr></tr>
- 定义单元格:
<td></td>
- 合并行(竖):rowspan=“合并个数”
- 合并列(横):colspan=“合并个数”
- 定义表头单元格:
<th></th>
- 表头:thead-tr-th
- 表格主体:tbody-tr-td
- 属性:
- 宽度:width
- 高度:height
- 表格边框:border
- 单元格与单元格之间的间隙:cellspacing(一般设置为0)
- 单元格内容与边框之间的间隙:collspadding(一般设置为0)
- 表格的对齐方式:align
- 标题:
表单标签
-
概念:用于采集用户输入的数据的,用于和服务器进行交互。
-
定义表单:
<form></form>
-
属性:
- action:指定提交数据的URL
- method:指定提交方式
- 分类:一共7种,2种比较常用
- get
- 请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)。
- 请求参数大小是有限制的。
- 不太安全。
- post
- 请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议后讲解)
- 请求参数的大小没有限制。
- 较为安全。
- get
- 分类:一共7种,2种比较常用
-
注意:表单项中的数据要想被提交,必须指定其name属性
-
表单项标签:
-
<input>
:可以通过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">Male</label> <input type="radio" name="sex" id="male" /> <br /> <label for="female">Female</label> <input type="radio" name="sex" id="female" /> </form>
- 注意:
-
select: 下拉列表
- 子元素:option,指定列表项
<select> <option value ="1">a</option> <option value ="2">b</option> <option value="3">c</option> <option value="4">d</option> </select>
-
textarea:文本域
- cols:指定列数,每一行有多少个字符
- rows:默认多少行。
-
CSS
-
概念: Cascading Style Sheets 层叠样式表
-
层叠:多个样式可以作用在同一个html的元素上,同时生效
-
好处:
- 功能强大
- 将内容展示和样式控制分离
- 降低耦合度。解耦
- 让分工协作更容易
- 提高开发效率
CSS的使用:CSS与html结合方式
-
内联样式\行内样式
- 在标签内使用style属性指定css代码
<div style="color:red;">hello css</div>
-
内部样式
- 在head标签内,定义style标签,style标签的标签体内容就是css代码
<style> div{ color:blue; } </style> <div>hello css</div>
-
外部样式
- 定义css资源文件
- 在head标签内,定义link标签,引入外部的资源文件
<!--a.css文件--> div{ color:green; } <!--链接使用--> <link rel="stylesheet" href="css/a.css"> <div>hello css</div> <div>hello css</div>
-
注意:
- 三种方式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标签。可以是父子关系,可以是爷孙关系)
-
- 属性选择器:选择元素名称,属性名=属性值的元素
- 语法:
元素名称[属性名="属性值"]{}
- 语法:
- 伪类选择器:选择一些元素具有的状态
- 语法:
元素:状态{}
- 如
<a></a>
状态- -:link:初始化的状态
- -:visited:被访问过的状态
- -:active:正在访问状态
- -:hover:鼠标悬浮状态
- 语法:
- 通配符选择器(选择所有元素)
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穿过文本的线)
标签显示模式
块级元素
- 常见的块元素有
<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>
等,其中<div>
标签是最典型的块元素
- 总是从新行开始
- 高度,行高、外边距以及内边距都可以控制
- 宽度默认是容器的100%
- 可以容纳内联元素和其他块元素
行内元素
- 常见的行内元素有
<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>
等,其中<span>
标签是最典型的行内元素
- 和相邻行内元素在一行上
- 高、宽无效,但水平方向的 padding 和 margin 可以设置,垂直反向的无效
- 默认宽度就是它本身内容的宽度
- 行内元素只能容纳文本或则其他行内元素。(a 特殊 a里面可以放块级元素)
行内块元素
- 在行内元素中有几个特殊的标签——
<img />、<input />、<td>
- 和相邻行内元素(行内块)在一行上,但是之间会有空白缝隙
- 默认宽度就是它本身内容的宽度
- 高度,行高、外边距以及内边距都可以控制
显示模式的转换
- 块级元素转换为行内元素:
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标签对象来才换行
上一篇: MyISAM和InnoDB简单区别
下一篇: Java中测试和注解概念