一、HTML标签介绍
HTML基本结构
<html>表示整个html页面的开始,<head></head>表示头信息,<title></title>表示网页的标题,<body></body>表示网页的主体内容,</html>表示整个html页面的结束。我们大部分时间都在<body></body>里面写内容,偶然会在<head></head>写内容。
标签简介
1.标签的格式为<标签名>文本</标签名>,如
2.标签名大小写都可以,如下,把h1改成H!,仍然能显示
3.标签属性
基本属性:设置简单的样式效果
如下,可以给标签加上一个style,设置其字体颜色为红色
事件属性:设置事件响应后的代码
如下,为标签设置一个点击事件,点击或触发弹窗提示
点击效果:
4.标签分类
单标签:<标签名/> 如:<br/> <hr/>
双标签:<标签名>文本<标签名/> 上图展示的皆为双标签
标签语法规则:
1.标签不能交叉嵌套,如<div><p></div></p>是错误的,正确的形式为<div><p></p></div>
2.标签应正确关闭:如“<div>我是文本 ”是错误的,因为div为双标签,有结束标签,正确示范为“<div>我是文本</div>”
3.标签的属性须有值,且要加引号
图中, 第一个有值、有引号,是正确的。第二个没有值,是错误的。第三个没有引号,也是错误的。
4.注释不能嵌套
图中第二个注释嵌套使用,不是正确的,编译器也提示错误。
注:有时候不符规则的书写格式不会产生问题,这是html不严谨之处。
常用标签介绍
font字体标签
作用:修改文本的颜色、字体、大小等
属性及其作用:color设置字体颜色,face设置字体,size设置文本大小
如下,设置文本的字体为蓝色、黑体、大小为5:
效果如下:
特殊字符
有时候,我们需要在文本放<>等特殊字符。如果直接输入到文本中,会导致错误,如下:
这是不规范的。
这时可以使用"<"代替"<",">"代替">"
显示效果如下:
其它特殊字符:
空格
& 和号
" 引号
在HTMl中,有些特殊字符是不能直接输入的,需要用转义字符代替输入。
标题标签
从h1到h6字体大小是递减的, 即h1的字体大小最大,h6的字体大小最小。效果如下:
标题标签有属性align,用于设置对齐方式。
左对齐:align="left"
右对齐:align="right"
居中:align="center"
样例:
效果如下:
超链接
<a></a>标签是超链接,可用于点击跳转到其他网址。
属性:
href:跳转的地址
target:根据其值的不同,在当前页面跳转或者打开一个新页面跳转。
_self:在当前页面跳转
_blank:打开一个新页面跳转
示例:
没有target属性和target="_self"的效果是一样的,都是在当前页面跳转。
列表标签
分类:无序列表、有序列表、定义列表
无序列表
用ul标签创建无序列表,li标签表示列表项
效果:
type属性可以设置列表项前的符号
type="none"把符号取消了, 效果:
有序列表
用ol标签创建有序列表,li标签表示列表项
效果:
定义列表
用dl标签创建定义列表,dt表示定义的内容,dd表示对内容的解释
效果:
img标签
作用:展示图片
属性:
src:设置图片路径
width:设置图片宽度
height:设置图片高度
alt:当图片显示不正常时,会显示的文字内容
上图src的地址是本地的地址,显示效果:
当src地址不正确时,会显示alt中的内容
下图的src的地址是网络地址,一样可以显示
显示效果:
表格标签
table标签是表格标签,tr是行标签,th是表头标签,td是单元格标签
属性:
border设置表格边框
width设置表格宽度
height设置表格高度
align设置表格对齐方式
cellspacing设置单元格间隙
colspan设置跨列
rowspan设置跨行
没有加样式的效果:
添加如下样式:
align="center"是表格居中,border="1"是表格显示边框,width设置表格宽度为200,cellspacing设置单元格间隙为0
跨行跨列表格
利用colspan、rowspan实现
效果:
表单标签
用form标签来创建一个表单
作用:用于收集用户信息,提交给服务器
属性:
action指出提交信息的服务器地址,
method指出请求方式
method="get"表示GET请求,它提交的数据长度有限制,安全性较差
method="post"表示POST请求,无提交数据长度限制,安全性比GET高
input标签根据其type属性的值不同,有不同的功能分类
type="text"表示文本框
type="password"表示密码框
type="radio"表示单选框,可以通过属性cheched="checked"设置默认选中
type="checkbox"表示复选框,可以通过属性cheched="checked"设置默认选中
type="button"表示按钮
type="reset"表示重置按钮
type="submit"表示提交按钮
select标签是下拉列表,option标签是下拉列表中的选项,可以通过属性selected="selected"设置默认选中
input标签和select标签中可以通过value属性设置其值。
实例:
效果:
其他标签
块元素:一般用于对网页的布局,如div标签
行内元素:一般用于存放文字,如span标签
段落标签:p标签,如其名放置一个段落,且段落标签中不能放块元素
实例:
效果:
二、CSS介绍
语法规则
选择器:用于指定受影响的html标签
属性:用于指定要修改的样式,一个属性有一个值,属性与值用冒号隔开,最后以分号结束(最后一个“属性:值”可以不加分号)。
使用方式
① 内联样式(行内样式)
直接在标签内部写一个style属性来设置元素的样式。
特点:只对一个标签生效,复用性差
如下实例
② 内部样式表
写在head标签的style标签中。
特点:通过css选择器来为元素设置样式,可以通过设置多个标签的样式,仅对当前页面生效,不能跨网页使用。
如下所示,设置h1标签字体颜色为红色:
③ 外部样式表(推荐使用)
写在一个外部的css文件中。
使用方式:在需要使用该样式的页面中,通过link标签引人该css文件
特点:多个页面都可以使用css文件,复用性好
创建并编写一个style.css文件
在head中通过link标签使用该样式
效果:
常用选择器
① id选择器
格式:
特点:由于id是唯一的,id选择器用于给单个标签加特定的样式
实例:为一个div添加id,并利用id选择器添加样式
效果:
② class选择器(类选择器)
格式:
特点:class是可重复,往往用于为同一类的标签设置样式,复用性较高。
实例:为多个div添加class,并利用class选择器添加样式
效果:
③ 组合选择器
并集选择器格式:
特点:可以同时为多个选择器设置同一个样式
实例:同时为两个class选择器和一个id选择器设置样式
效果:
交集选择器格式:
特点:同时选择多个选择器对应的元素
效果:
④ 关系选择器
子类选择器
作用:选择父元素中指定的子元素
格式:父元素 > 子元素
实例:选择.text下的span
效果:
后代元素选择器
作用:选择指定元素内的指定后代元素
格式:祖先 后代
实例:
如下效果,可以看到子元素选择器只选择子代,而不选择子代的子代:
⑤ 伪类选择器
使用:开头
作用:描述一个元素的特殊状态
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child(n) 选择第n个子元素
:only-child 选择唯一子元素
以上伪类按照所有的子元素数顺序
以下伪类按照同类的子元素数顺序
:first-of-type 同类型第一个子元素
:last-of-type 同类型最后一个子元素
:nth-of-type() 同类型选择第n个子元素
:only-of-type 选择同类型唯一子元素
其它伪类:
:empty 选择没有内容的元素
:not() 去除符合条件的元素
实例:
⑥ 伪元素选择器
使用::开头
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的内容
::before 元素开始,结合conten使用
:after 元素最后,结合content使用
实例:
效果:
常用样式
① 字体样式
颜色格式:color:颜色值
颜色值可以是blue、red等颜色名,还可以是rgb值和十六进制表示,如rgb(255,255,0),#00ADE8
字体大小格式:font-size:像素值;
实例:
效果:
② 宽度、高度
宽度格式:width:值;
高度格式:height:值;
值可以为像素值,如200px,可以为百分比,如15%
实例:
效果:
修改值为百分比格式:
效果:
③ 背景颜色
格式:background-color:颜色值;
颜色值可以是颜色名、rgb值和十六进制表示
实例:为文本设置蓝色的背景
由于div独占一行,会出现一个蓝色长条的效果:
④ 边框
边框宽度
格式:border-width:值;
其值可为“数字+px”或thin(1px)、medium(3px)、thick(4px)
边框样式
格式:border-style:值;
其值可为:none(无样式)、solid(实线)、dashed(虚线)、dotted(虚线圆点)
边框颜色
格式:border-color:值;
其值可为:像素值、rgb、十六进制格式
实例:
效果:
⑤ 居中
div居中:为其样式添加 margin:0 auto;
文本居中:为其样式添加 text-align:center;
⑥去除修饰
超链接去下划线:text-decoration:none;
列表去修饰:list-style:none;
盒子模型
css将页面中的元素设置成为一个矩形的盒子,对页面的布局相当于盒子的摆放
组成部分:内容区、内边距、边框、外边距
内容区(content)
位于盒子最中间,包含元素中的文本内容及其子元素,其大小用width和height两个属性设置
边框(border)
边框线属于盒子边缘,边框内属于盒子,边框外不属于盒子,边框的大小会影响盒子的大小
设置边框的属性:
border-width:边框的宽度,可以用于指定四个方向的宽度
border-color:边框的颜色,可以用于指定四个方向的颜色
border-style:边框的样式
设置边框和内容区样式实例:
效果:
内边距(padding)
位于内容区和边框之间,与内容区和边距一起绝对盒子的大小。
属性为四个方向的内边距:
padding-top
padding-right
padding-bottom
padding-left
简写形式:
padding:上 右 下 左
padding:上 左右 下
padding:上下 左右
实例:
效果:
外边距(margin)
作用:可用于设置盒子的位置,不会影响盒子可见框的大小,但会影响盒子的实际占用空间。
属性:
margin-top:上外边距
margin-left:左外边距
margin-right:右外边距
margin-bottom:下外边距
简写形式:
margin:上 右 下 左
margin:上 左右 下
margin:上下 左右
使盒子位置移动实例:
盒子远离左上角,效果:
盒子的水平布局
元素在其父元素中水平方向的位置由margin-left、border-left、padding-left、width、padding-right、border-right、margin-right几个属性共同决定,即margin-left+border-left+padding-left+width+padding-right+border-right+margin-right = 其父元素内容区的宽度。
实例:
效果:
溢出 (overflow)
当子元素的大小超过父元素的时,会发生溢出,这时可以通过overflow设置溢出后的显示方式
属性:
visible:溢出内容在元素外部显示
hidden:隐藏溢出内容
scroll:通过滚动条查看溢出内容
auto:按需自动生成滚动条
可通过overflow-x设置x轴方向的显示方式,overflow-y设置y轴方向的显示方式
实例:
visible显示效果:
hidden显示效果:
scroll显示效果
:
auto显示效果;
浮动(float)
主要作用:使页面中的元素水平排序
特点:脱离文档流,块元素不再独占一行,行内元素会变成块元素,不区分块元素和行内元素
属性:
none:不浮动
left:向左浮动
right:向右浮动
实例:
效果:
高度塌陷问题
当一个元素由其子元素撑开而子元素设置浮动时,子元素脱离文档流,父元素会发生高度塌陷。
处理方式:
1.设置父元素浮动:float: left;
2.设置父元素为行内块元素:display: inline-block;
3.为设置父元素overflow: hidden;
问题实例及效果:
处理方式之一:
处理后的效果:
定位(position)
作用:将元素摆放到任意位置
属性:
static :静止的没有开启定位,默认值
relative:相对定位
absolute:绝对定位
fixed :固定定位
sticky:粘滞定位
相对定位
开启方式:position: relative;
特点:设置偏移量后可改变元素位置,参照元素在文档流中位置进行定位,提示元素层级,不脱离文档流,不改变元素性质
偏移量(offset)
属性:
top:元素与定位位置上方向的距离
bottom:元素与定位位置下方向的距离
left:元素与定位位置左方向的距离
right:元素与定位位置右方向的距离
实例及效果:
绝对定位
开启方式:position: position;
特点:设置偏移量后可改变元素位置,参照其最近的开启了定位的祖先元素进行定位,提示元素层级,脱离文档流,改变元素性质
实例及效果:
固定定位
开启方式:position: fixed;
特点:与绝对定位相似,不同的是固定定位参照浏览器视口进行定位,不随网页滚动条的滚动而动
实例及效果:
可以看到,滚动网页时,开启固定定位的div一直在左上角
粘滞定位
开启方式:position: sticky;
特点:与固定定位相似,不同的是粘滞定位可以在元素到达某个位置后固定,常用与导航条或广告位。
弹性盒(flex)
一种布局方式,可用来代替浮动来完成页面的布局,使元素随页面的大小而改变
开启方式:display: flex;
flex-direction
作用:指定容器中弹性元素的排序方式
属性
row:弹性元素在容器中从左到右水平排列,默认值
row-reverse:弹性元素在容器中从右到左水平排列
column:弹性元素自上向下纵向排列
column-reverse:弹性元素自下向上纵向排列
实例及效果:
flex-wrap
作用:设置元素在弹性容器中是否自动换行
属性:
nowrap 不自动换行,默认值
wrap 元素自动换行
wrap-reverse 元素沿着反方向换行
justify-content
作用:设置主轴上空白空间的分配方式
属性:
flex-start 元素沿主轴起边排列
flex-end 元素沿主轴终边排列
center 居中排列
space-around 空白分布到元素两侧
space-between 空白均匀分布到元素间
space-evenly 空白分布到元素的单侧
flex-grow
作用:指定弹性元素的伸展系数,当父元素由多余空间时生效
flex-shrink
作用:指定弹性元素的收缩系数,当父元素的空间不足以放下所有子元素时生效
响应式布局
作用:根据不同的设备展示不同的页面效果
通过媒体查询实现
媒体查询
类型:
all:所有设备
print:打印设备
screen:带屏幕的设备
speech:屏幕阅读器
媒体类型前加only可以解决一些老版浏览器的不兼容问题
属性:
width:视口的宽度
height:视口的高度
min-witdh:视口最小宽度
max-width:视口最大宽度
实例: