首页 > 代码库 > html基础
html基础
//用于 HTML 4.0
<!DOCTYPE HTMLPUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
//XHTML 1.0 的 DTC
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
// html5 的 DTD
<!DOCTYPE html>
常见的字符编码:
charset=utf-8
Gb2312 简单中文字符集 最常用的中文字符
Gbk 简繁体 中文字符集
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
div{
width: 300px;
height: 300px;
background: red;
}
margin:0px auto; maring:auto auto;
border: 10px solid red;
1)宽 : border-top[bottom,left,right]-width
2)形状 : border-style
solid 实线
dashed 虚线
dotted 点线
inset 3D立体
transparent -- 透明
css3新增属性
background-clip 指定对象的背景图像向外裁剪的区域
border-box(默认) 背景被裁剪到边框盒
padding-box 背景被裁剪到内边距框
content-box 背景被裁剪到内容框
box-sizing: border-box;
css3新属性
box-sizing 设置或检索对象的盒模型组成模式。
content-box (内容盒)默认值w3c的盒子:盒子的尺寸,宽高是写内容的地方
border-box (边框盒):盒子的尺寸,宽高是包含边框在内的,那写内容的地方变小
1)块状: block,一块
哪怕它没有这个屏幕宽,这行也被它给占据了
块状元素就像一个盒子,木头盒子,比较硬
2)内联: inline
行高:
无法眼睛直观的行高
浏览器在输出,渲染每一行文字的时候
段落缩进:text-indent
2.文本对齐 text-align (水平对齐方式)
left[默认左边];
right[右边];
center[文本排列到中间]
3.文本装饰线text-decoration
underline[文本下划线];
overlinn[文本上的一条线];
line-through[文本穿越线];
text-decoration-style: css3新属性,各浏览器还不兼容
一些新的css3属性,各浏览器的私有试验性质的属性,会在前面加上:
-moz , -ms , -webkit
-moz代表firefox浏览器私有属性
-ms代表IE浏览器私有属性
-webkit代表chrome、safari私有属性
text-shadow:1px 1px 1px red;
font-style 正斜
font-weight 粗细
font-size 大小
line-height 行高
font-family 字体
1.font-style 文本字体样式
normal： 指定文本字体样式为正常的字体
italic： 指定文本字体样式为斜体
2.font-weight 字体粗细
bold
normal
字体有更细吗?thin
中文的方块字有好几千,做一套中文字体的代价要比一套英文字体的代价要多很多,所以字体里面就是正常和加粗,没有更细或者更粗.只有两种粗
细,normal正常和bold 加粗
3.font-size 字体大小
4.line-height 行高
行高变大,两行字之间的距离就变大
就是内部基线与基线的距离
后面我们做导航的时候,经常要把行高放的很大,以达到文字竖直居中的目的
后面讲: 行高可以达到文字的竖直居中的原理
5.font-family 字体系列
‘黑体‘,‘微软雅黑‘,‘宋体‘,‘新宋体‘
["SimHei"黑体],["SimSong"宋体默认]
6.css的简化写法
一行集中控制这些属性
font-style font-weight font-size line-height font-family
注意:
参数必须按照如上的排列顺序
且font-size和font-family是不可忽略的,是必须要写
字体大小和行高都是用尺寸表示,必须用斜线隔开
font-style:italic;
font-weight:bold;
font-size:15px;
line-height:40xp;
font-family:‘微软雅黑‘;
font: italic bold 15px/40px ‘微软雅黑‘;
中文字体2大类:
无衬线:黑体,雅黑,文泉驿正黑 sans-serif
有衬线:宋体,新宋, serif (像衬衫一样有棱角)
1.背景图
background-image[url(图片地址)]
在网站里,引用其它资源,图片,css的时候
只有两个写法, ./ 当前目录 ../上级目录
不能写 D:/或者E:// ,
因为我们的服务器基本上是linux的;没有D,E盘
即使是windows,也不保证一定有D盘,而且还要将图片再放在你写的D盘E盘中才能发挥作用
要注意,url书写的规范性
2.background-repeat
背景图像如何铺排填充
div大,背景图小,但是它也会横向和纵向铺满整个背景
css3新属性
round： 背景图像自动缩放直到适应且填充满整个容器
space： 背景图像以相同的间距平铺且填充满整个容器或某个方向
3.background-attachment
背景图像是随对象内容滚动还是固定的
fixed： 背景图像相对于窗体固定。
scroll： 背景图像相对于元素固定 (默认)
background-image: url(1.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position:right top;
background-image: url(1.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position:right top;
background:gray url(1.png) no-repeat fixed right top;
极度简写:
background:gray;
- 通过id选中元素
- 类选中某个或某几个元素
- 标签选择器
- 层级选择器
- 群组选择器
4.分析谁的优先级更高
p标签在一个页面中肯定有多个
标签和类谁命中的元素更多? 标签
id是唯一的,它只命中一个元素
标签 : 极多
类 : 多
id唯一 : 最少
结合刚才的效果,总结选择器优先级的特点:
选择器命中的越精准,越少,优先级越高
css 引入方式
使用HTML标签的STYLE属性
使用 link 标签，引入外部CSS文件
<link rel="stylesheet" href="http://www.mamicode.com/28.css">
内联样式,直接写在标签的style属性里
<div style="width:200px;height:200px;background:red;"></div>
使用@import导入CSS文件
在一个css文件里,还可以引入其它的css
在css文件中,引入其它的css,一定要放在第一行
css 初始化
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,
h5,h6,hr,input,legend
,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}
body,button,input,select,
textarea{font:12px/1.5 tahoma,arial,‘Hiragino Sans GB‘,
\5b8b\4f53,sans-serif}
h1,h2,h3,h4,h5,h6{font-size:100%}address,cite,dfn,em,var
{font-style:normal}
code,kbd,pre,samp{font-family:courier
new,courier,monospace}
small{font-size:12px}ol,ul{list-style:none}
a{text-decoration:none}
a:hover{text-decoration:underline}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}legend{color:#000}
fieldset,img{border:0}
button,input,select,textarea{font-size:100%}
table{border-collapse:collapse;border-spacing:0}
标题只有h1-h6
没有7号标题,写了是普通文字的大小
3.list-style-type: 设置不同的列表样式
给ul或者是ol设置这个属性
disc 默认。标记是实心圆。
circle 标记是空心圆。
square 标记是实心方块。
decimal 标记是数字。
none 不显示列表样式
4.实际开发中list-style-type 都置为 none,为什么?
因为各浏览器兼容效果不同,火狐和chrome就不同,所以置为none
这种列表样式在各浏览器的差异,用css就无法改变了
所以在css初始化的时候,已经将这个属性设置为了none
在实际应用中我们用背景图片来设置样式
去掉单元格之间的距离
border-collapse
表头的声明: th
colspan 属性规定单元格可横跨的列数
rowspan 属性规定单元格可横跨的行数
header,footer,nav[导航]
aside,article,time
1.img 引入一张图片
准备 div>img
2.src属性
src: 规定显示图像的 URL (当前目录,上级目录,其他本地目录,和远程图片)
1)相对URL
指向站点内的文件 当前目录 ./ 或者上级目录 ../
2)绝对URL - 指向其他站点
比如 src="http://ww3.sinaimg.cn/bmiddle/62f4cb1fgw1evq6gsagsaj20c8085dgo.jpg"
3.alt 属性: 规定图像的替代文本
做过SEO的知道:
alt可用于这个图片的重要搜索说明
搜索引擎越来越智能,不止能根据alt搜,还可以根据文字信息分析图片信息
甚至可以做图片识别
- title: 鼠标放上去,显示此文本
img是特殊的内联元素,是内联替换元素
建议css初始化的时候,直接将img标签转为块状,以免受图片的几像素的缝隙的影响
1.a标签的href
可以连接本地网页
也可以连接互联网上的绝对地址
<a href="http://www.mamicode.com/1.html">第一个网页</a>
<a href="http://www.zixue.it">学习论坛</a>
2.在新标签中打开连接
target属性
target="_blank"
3.title属性 鼠标放上去时,显示的文字
4.href="http://www.mamicode.com/#" 是什么意思?
公司套模版时可见
没有什么实际意义,就是一个空连接,点击没有效果
伪类: 选中的元素的某个状态
a:link 正常的a标签的状态
a:visited 选中的是 鼠标点击后的a标签的状态
a:hover 选中的是 鼠标经过a标签时的状态
a:active 选中的是 鼠标点击瞬间(还未松鼠标)的状态
注意:
a:visited
判断一个页面是否访问过,浏览器会看浏览历史中有没有这个网页;当访问的页面为 not found 时,不会加入到浏览历史中
a:link可以简写为a;
提醒顺序 lvha,顺序不能乱写,可以不写全,但是顺序不能乱
a:active一般不写;
line-height: 80px;
1.关系选择器(层次选择器):
后代元素 E F 匹配 作为所有作为 E元素 后代的 F元素
儿子元素 par>son 匹配 par 元素的子级 son 元素
相邻元素 E+F 匹配紧贴着 E 元素的 F 元素
兄弟元素 E~F 匹配 E 后面所有同级别 F 元素
1)后代元素 E F 匹配 作为所有作为 E元素 后代的 F元素
div ul {
border: 1px solid blue;
}
2)儿子元素 par>son 匹配 par 元素的子级 son 元素
div>ul {
border:10px solid yellow;
}
3)相邻元素 E+F 匹配紧贴着 E 元素的 第一个 F 元素
div+p {
border: 1px solid red;
}
4)兄弟元素 E~F 匹配 E 后面所有同级别 F 元素
div~p {
border: 1px solid orange;
}
2.属性选择器(用在表单里比较多)
E[属性名] 含有某属性的元素
E[属性名=值] 某属性=某值的元素
准备:
<form action="">
<input type="text" name="username">
<input type="text" name="email">
</form>
1)标签选中input
input{
border:10px solid red;
}
2)E[属性名] 含有某属性的元素
input[name] {
background: red;
}
3)E[属性名=值] 某属性=某值的元素
input[name=username] {
background: yellow;
}
jq为了降低学习成本,它的选择器比较像css的属性选择器
2.伪类选择器
E:first-child 匹配作为第 1 个子元素的元素 E
E:last-child 匹配作为最后一个子元素的元素 E
E:nth-child(N) 匹配作为第 N 个子元素的元素 E
html基础