HTML:
1.html标签不显示,是网页最外层的标签,一个网页只能有一个
2.body标签:里面存储所有所有的可见元素
3.head标签:为一张网页储存一些必要的元素
4.title标签:用于指定页面标题,搜索引擎就搜索这里,不显示
5.h标签:标题(显示),从大到小h1-h6,h1最重要
6.p标签:段落标签,一个p就是一个段落,<br>
标签可以用来换行
7.div标签:容纳其他元素 用的极为频繁,用来分类,类似目录
8.a标签:用于指定网页中的链接,类似下面
<a href="http:www.baidu.com" target="_blank">测试</a>
href后面是跳转到的网址,target后面是在当前页打开还是重新开一页(_self是在当前页打开, _blank是在新页面打开)
9.img标签:在网页中指定图片的标签 只有开始标签,没有结束标签
<img src="www……" alt="主题">
src里面写图片地址,可以为网络图片也可以为本地图片
alt里面是主题,当搜索不到图片的时候会显示
10.表格类标签,table标签、tr标签、td标签、th标签、thead标签、tbody标签:table是总的,是大的表格,tr是行,td是列,th是属性,thead是表头,tbody是表身。用thead更严谨。示例如下:
<table>
<thead>
<tr>
<th>
Words
</th>
<th>
Mood
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
嘤嘤嘤
</td>
<td>
happy
</td>
</tr>
</tbody>
</table>
表格是这个样子的:
11.header标签,footer标签:header用来存放标题相关的,非常重要,用于提取信息的内容,footer用来存放页脚相关的内容,header和footer中间写正文,<hr>
是分割线
12.link标签,script标签:可以放在head也可以放在body里,link是指定页面样式的,script是加载javascript的。如果对js依赖不大,可以把js放在body的最后一部分加载,这样在js加载出来之前页面已经有内容了,而不是空白
13.button标签:按钮标签,是一个触发者,一般与js联系使用
14.abbr标签:缩写标签,<abbr title="全称">简称</abbr>
可以在鼠标指向页面上显示的简称的时候显示全称
15.coder标签、pre标签:都是用于显示代码的标签,coder是一行一行的代码,镶嵌到文字里面;pre是大段代码
CSS
1.书写格式:选择器+属性列表(属性+值)
在head标签里添加:
<style>
p{
background: green;
border:5px solid black;
}
</style>
2.@import url(地址)
也是引入css,必须定义到文件开始,没有link使用广
3.<link rel="stylesheet" type="text/css" href="text.css">
是最常用的引用方式
4.<p style="color red"></p>
优先级最高,但最不灵活,但是在后面加!important可以无视其他所有规则
5.选择器分组
h1,h2{
规则
}
h1,h2有相同的格式。
6.类选择器:
<p class="red">A</p>
<div class="red">B</div>
<p class="green">C</p>
css文件中这样写:
.red{
color: red;
}
.green{
color:green;
}
一定要带着. 表示是选择类而不是标签。这样可以实现相同的标签不同的格式。
7.id选择器:类似类选择器
<p id="logo">LOGO</p>
#logo{
color:pink;
}
一般用于定位页面中唯一的元素。
8.属性选择器:
<button title="点击此处登录">登录</button>
[title]{
color:gray;
}
所有带有title的标签都会受到影响。
[title="点击此处"]
只有title为点击此处的标签才会受到影响。
[title*="点击"]
所有title里含有点击两个字的都会受到影响。
[title^="点击"]
所有以“点击”二字开头的title都会受影响。
[title$="点击"]
所有以“点击”二字结束的title都会受影响。
a[title="xx"]
所有title为xx的a标签都要受影响。
9.<input>
标签有很多格式。
10.后代选择器:
<div class="a">a
<div class="b">b
<div class="c">
c
</div>
</div>
</div>
.a *{
border: 2px solid black;
}
这是把a以下的所有后代都受到影响。
.a .b{
border: 2px solid black;
}
b部分会受到影响。
11.相邻选择器:
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
.a + div{
background: rgba(255,0,0,0.3);
}
只有.b会受到影响。
.a ~ div{
background: rgba(0,255,0,0.3);
}
b和c都会受到影响。这时是通用相邻选择器。
12.伪类选择器:
<a href="http://www.baidu.com">test</a>
a : link{
color: blue;
}
a : visited{
color: gray;
}
未访问过的是蓝色,访问过的是灰色。
13.伪元素选择器:
<p>Lorem likes dogs,which makes her father angry.</p>
p:first-letter{
font-size: 50px;
}
上面两处可以使得p标签里的段落首字母变大。
<a class="help">什么是支付密码</a>
.help::before{
content: "!";
color: red;
}
.help:after{
content:"(?)";
color: blue;
}
可以在a标签内容的前后改变样式。单冒号和双冒号是一样的,但不要混着用。
<div>
<p>1</p>
<p>2</p>
<p>3</p>
</div>
div p:nth-child(2){
color: blue;
}
通过修改括号里的数字,可以实现控制第几行的样式,注意……这里……不是从0开始计数,而是从1开始。
14.选择器权重:
style属性(内联)> ID选择器 > 类选择器/属性选择器/伪类选择器 > 元素选择器
15.字体属性:
font-family用于指定字体(例如宋体、楷体、微软雅黑等)
font-weight用于调整字体的粗细程度,范围为100-900。normal是正常粗细,bold是加粗大概在600-700之间
font-size是字体大小,可以指定具体的10px,也可以指定100%,是母元素字体大小的100%,inherit是继承母元素的大小。
16.
text-align是文字对齐方式,分为left(左对齐),right(右对齐),justify(两端对齐)
line-height是行高,可以用比例和像素指定。2是指相当于当前字体大小的两倍。
text-decoration是文字装饰,默认为none,underline为下划线,overline上划线,line-through从中间穿过的线。
17.
块级元素无论有多少内容都是要占整宽的。适于做页面的划分(非常稳定)。
行内元素不会占整宽,随着内容大小而变。添加margin和padding只作用于左右,上下不变。
行内块元素可以添加padding,margin,可以流动,常用于做按钮,导航栏的链接。
display属性:none(不显示),block(块级元素),inline(行内元素),inline-block(行内块元素)。
18.框:
width和height设置的是content区的大小。