HTML+CSS基础笔记

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区的大小。