HTML与CSS基础-优快云博客

组件(html)

第一部分

1.<p></p>段落
2.<hx></hx>标题
3.<strong></strong>粗体字
4.<em></em>斜体字
5.<span></span>没有语义，作用是为了设置单独样式
6.<q></q>引号（短文本引用）
7<blockquote></blockquote>在我看来类似于段落标签（长文本引用）
8.<br />换行
9.&nbsp空格
10.<hr />水平横线
11.<code></code>加入单行代码（用于编程技术类网站）
12.<pre></pre>加入多行代码（用于编程技术类网站）

第二部分

1.无序新闻标签

<ul>
    <li>item名称</li>
    <li>item名称</li>
</ul>

2.有序新闻标签

<ol>
    <li>item名称</li>
    <li>item名称</li>
</ol>

3.<div></div>
可以把一些独立的逻辑部分划分出来，放在一个div里面，div相当于一个容器。

4.<div id="a1"></div>比起上面多了ID，加ID用于排版方便
如图：

5.表格

<table summary="摘要">
    <caption>表格标题</caption>
    <tbody>
        <tr>
            <th>粗体</th>
        </tr>
        <tr>
            <td>粗体</td>
        </tr>
    </tbody>
</table>

解释：

table:表示表格，所有的组件都在里面。
tbody:当内容非常多时，表格内容会加载一点显示一点，如果加上本标签，会全部加载完成在显示本标签
tr:用于表示一行，里面嵌套th或者td
td/th:单个item，其中th显示为粗体字，td显示为正常字体
summary:摘要，它不会再浏览器中显示出来。他的作用是增加表格的可读性，是搜索引擎跟好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。
caption:表格标题

6.使用mailto在网页中添加链接Eamil地址

注意：如果mailto后面有多个参数的话，第一个参数必须使用“？”来间隔，以后的参数都以“&”来间隔。
完整的实例：

7.使用img标签，为网页中添加图片
语法：<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">

src:标识图片的位置
alt:当图片下载失败时，可以看到此文本
title:当图片下载成功时，鼠标划过提示文本
图像可以是GIF,PNG,JPEG图片

第三部分

1.表单标签
表单标签作用很大，可以把浏览器输入的数据传到服务器。
语法：
<form method="传送方式" action="服务器文件"> </form>

form:表单标签，成对出现
method:传送方式，分两种，post/get
action:数据被传送到的地方

2.文本输入框/密码输入框
语法：

<form>
    <input type="text/password" name="名字" value="默认文本">
</form>

type:当值为text时，输入框为文本输入框，当值为password时，输入框为密码输入框
name:为文本框命名，以备后台程序ASP、PHP使用。
value:默认文本

3.文本域，多行文本输入
语法：

<textarea cols="列数" rows="行数"></textarea>

textarea:成对出现，两标签中间可以设置默认文本
cols:列数
rows:行数

4.单选框，复选框
语法：

<input type="radio/checkbox" value="值" name="名称" checked="checked"/>

type:值为“radio”时，为单选框，值为“checkbox”时，为复选框
value:提交到服务器的值
name:为控件命名（单选框中，只有name一致，他们才算一组）
checked:当设置checked=“checked”时，该选项被默认选中

5.下拉列表框
语法：

<select multiple="multiple">
    <option value="向服务器提交的值">显示的值</option>
    <option value="向服务器提交的值" selected="selected">显示的值</option>
</select>

value:向服务器提交的值
selected:默认选中的item,如果有多个item添加了此属性，那么最下面的有效。
multiple:在select标签中设置此属性，那么就可以进行多选。

6.提交按钮
语法：

<input type="submit" value="显示的文本"/>

语法：
type=”submit”:只有当type=”submit”时候，按钮才有提交作用。
value:按钮上显示的文本。

7.重置按钮
语法：

<input type="reset" value="重置按钮"/>

type=”reset”：只有当type=”reset”时，表单信息才会回到初始状态
value:按钮上显示的文本。

8.label控件：
作用：可以和其他控件关联，点击此控件=点击关联控件。
语法：

<label for="控件ID名称"></label>

属性

1.color颜色
2.font-size字体大小
3.

层叠样式表（css）

第一部分

1.认识css
简介：全称为层叠样式表，主要用于定义HTML内容在浏览器内的显示样式，如文字大小，颜色等。
优势：单处定义样式，多处调用。
语法：

p{color:blue}

p:选择符
{}声明：大括号即为声明，声明内又有属性和值，如果又多个属性，使用“;”分隔。

2.内联式css样式：直接写在现有的HTML标签中
语法：<p style="color:red">哈哈哈</p>
所有的样式都要写在style中，如果有多个属性，那么使用“；”分隔。

3.嵌入式CSS标签，写在当前文件中.
语法：
写一个单独的标签

span{
color:red
}

然后所有的span标签内的字体都为红色

4.外部css样式，写在一个单独的文件中
用法：
1.创建一个文件，后缀名必须为.css，在里面写样式表
2.在html文件中调用,语法如下:

<link href="css文件全称" rel="stylesheet" type="text/css" />

href:值为将要调用的css文件全称。
rel=”stylesheet”
type=”text/css”
为固定写法，不可修改

5.css样式选择器：

选择器{
    样式；
}

选择器的作用是指明{}中的样式的作用对象。

6.标签选择器

就是HTML代码中的标签。如代码编辑器中的<html><body><h1><p><img>都属于标签选择器。

7.类选择器
在html中最常用到的就是类选择器
语法：
一..类选择器名称{css样式代码;}
二.在合适的标签中加入class=”类标签名称”即可
注意：
定义类选择器时，需要在名称前面添加一个”.”

8.ID选择器
语法：
一.#id选择器名称{}
二.在合适的标签中加入id=”id选择器名称”
注意：
定义ID选择器时，需要在名称前面添加一个”#”

9.类选择器和ID选择器的不同
有两点不同
1.类选择器可以使用多次，id选择器只可以使用一次
2.举例说明：

    <span class="a1 a2">哈哈</span>  正确
    <span id="a1 a2">哈哈</span>  错误

10.子选择器
语法：

.foot>li{border:1px solid red}

用法：

<ul class="foot">
    <li>哈哈哈</li>
    <li>哈哈哈</li>
    <li>哈哈哈</li>
    <li>哈哈哈</li>
</ul>

此时foot的样式就会作用在li标签里面了。
注意：子选择器里面定义的样式只作用于属性设置标签的儿子标签，像孙子标签是无效的.

11.包含（后代）选择器
语法：

.foot li{border:1px solid red}

和子选择器大致相同，唯一不同点是：后代选择器定义的样式不止作用于儿子标签，只要是它的后代标签，统统作用。

12.通用选择器：
语法：

*{
    color:red;
}

它作用于整个HTML。

13.伪类选择符
语法：

a:hover{color:red;}

作用：当鼠标在标签a上划过时，字体就会显示设置的样式。
注意：
一：它允许给不存在的标签设置样式。
二：他不止可以给”a”标签设置伪类选择符，也可以给p，h1等标签设置，但是兼容性不太好，唯独“a”标签可以兼容所有的浏览器。

14.分组选择符
语法：

h1,span{
    color:red;
}

解析：

h1,span{
    color:red;
}
等于
h1{color:red;}
span{color:red;}

第二部分

1.继承
CSS中部分样式具有继承性，部分样式不具有继承性。
继承性：集成性是一种规则，它允许样式不仅应用于某个特定HTML标签元素，而且应用于其后代码，比如：

p{
    color:red;
}
<p>哈哈哈<span>嘿嘿嘿</span>呵呵</p>

这样“哈哈哈嘿嘿嘿呵呵”都为红色了，包括了”span”标签里面的。这是具有继承性的css样式。

但是还有有一部分css样式不具有继承性.
比如：

p{
    border:1px
    solid:red;
}
<p>哈哈哈<span>嘿嘿嘿</span>呵呵</p>

这里写图片描述
这时，”span”标签里面的字并没有被继承.

2.特殊性
如果对同一段元素设置了不同的CSS样式，那么元素会启用哪一个CSS样式呢？
做个实验试一下：

p{color:red;}
.first{color:green;}/*因为权值高显示为绿色*/
span{color:pink;}/*设置为粉色*/

<p class="first">哈哈哈哈<span>哈哈哈哈哈哈哈</span>哈哈哈哈哈哈</p>

这里写图片描述
浏览器是根据权值来判断使用哪种CSS样式的，谁的权值高就调用谁。

p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/

注意：还有一个权值比较特殊–继承，它也有权值，但是很低，只有0.1，可以理解为继承的权值最低。

3.层叠
问：如果一个元素具有相同的CSS样式(等于具有相同的CSS权重)，那么谁的优先级大呢？
答：位于最后面的样式会被应用。

4.重要性
问：如果在开发中有一个CSS样式需要设置最高权限，那么应该怎么设置呢？
答：可以使用”!important”来解决
语法：

p{color:red!important;}
p{color:green;}
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的奥特曼。</p>

第三部分

1.元素分类
在HTML中，标签元素大体被分为三种不同的类型：块状元素，内联元素，内联块状元素.
常用的块状元素有：

<div>、<p>、<h1>-<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

常用的内联元素有

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

常用的内联块状元素有

<img>、<input>

2.块状元素
块状元素特点：
1.每个块状元素都是从新的一行开始。
2.块状元素的宽度，高度，行高及顶边距都可以设置。
3.块状元素的宽度在不设置的情况下，是它父容器的100%，除非设定一个高度。

3.内联元素
内联元素特点：
1.和其他元素都在一行上。
2.元素的高度、宽度及顶部边距不可设置；
3.元素的宽度就是它的文字或图片的高度，不可改变。

4.内联块状元素
内联块状元素就是指同时具有块状元素和内联元素的元素。
特点：
1.和其他元素都在一行上；
2.元素的高度，宽度，行高，以及顶部间距都可以设置。
5.盒模型-边框(一)
这里写图片描述
红色部分就是边框。
语法：

div{
    border:2px solid red;
}
上面是缩写,可以分开写
div{
border-width:2px;
border-style:solid;
border-color:red;
}

6.盒模型-边框(二)
单独给一边设置边框。
这里写图片描述
语法：

div{
    border-bottom:1px solid red;
}

给其他三遍单独设置边框：

div{
    border-top/right/left:1px solid red;
    }

7.布局模型
分为三种布局模型：
1.流动模型（Flow）
2.浮动模型（Float）
3.层模型（Layer）
8.流动模型
特点：组件以自上而下，自左而右分布。
9.浮动模型
特点：
1.可以让两个块状元素并排显示。
10.层模型
层模型有三种形式
1.绝对定位（position:absolute）
使用top,bottom,right,left属性相对于其最接近的一个具有定位属性的父包含块，进行定位，如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
这里写图片描述
2.相对定位（position:relative）

3.固定定位（position:fixed）

11.盒模型代码简写
语法：

margin:上下右左;

1.
margin:10px 10px 10px 10px;
可以缩写为：
margin:10px;

2.
margin:10px 20px 10px 20px;
可缩写为：
margin:10px 20px;

3.
margin:10px 20px 30px 20px;
可缩写为：
margin:10px 20px 30px;

12.颜色值缩写

#000000可缩写为：#000
#336699可缩写为：#369

13.字体属性缩写

body{
    font-style:italic;
    font-variant:small-caps;
    font-weight:bold;
    font-size:12px;
    line-height:1.5em;
    font-family:"宋体",sans-serif;
}
可以缩写为：
body{
    font:italic small-caps bold 12px/1.5em "宋体",sans-serif;
}

注意：
1.使用这一简写方式至少要指定font-size,font-family属性；其他属性如果未加入，则使用默认值；
2.在缩写font-size和font-height时中间要加入/斜杠。
14.颜色值
有三种方式：
1.英文表示：p{color:red}
2.RGB表示：p{color:rgb(133,45,200)}
3.十六进制颜色p{color:#ffffff}
15.长度单位

p{font-size:13px;text-indent:1em/100%}

此时首行缩进就等于前面的13px
16.水平居中
1.容器内居中
text-align:center;
2.容器居中
margin:20px auto;

属性：

1.文字排版

font-size:12px<!-- 字体大小 -->
font-weight:bold<!-- 字体加粗 --><!--  -->
color:red/#eee <!-- 字体颜色 -->
font-family:"宋体"<!-- 使用css样式为网页中设置字体
注意：如果用户本地没有设置的字体，那么将会显示网页默认字体。 -->
font-style:italic;<!-- 斜体 -->
text-decoration:underline;<!-- 下划线 -->
text-decoration:line-through;<!-- 中划线 -->

2.段落排版

text-indent:2em<!-- 缩进 -->
line-height:1.5em<!-- 行间距 -->
letter-spacing:50px<!-- 字间距 -->
text-align:center/left/right<!-- 为块状元素设置居中、居左、居右>

display:block<!-- 将内联元素转换为块状元素 -->
display:inline;<!--将块状元素转换为内联元素 -->
width:20px<!--宽度，作用于块状元素-->
height:20px<!--高度，作用于块状元素-->
padding:20px<!--元素内容与边框之间的距离，称为填充（使当前元素扩大20px）-->
margin:20px<!--元素与其他元素之间的距离，称为边界（当前元素距离周围20px）-->
inline-block;<!--将元素转换成内联块状元素 -->