HTML和CSS基础

HTML标签 CSS
Web
发布日期:   2018-12-01

sublime

http://www.sublimetext.com/

https://jingyan.baidu.com/article/925f8cb8dedc12c0dce05674.html

https://jingyan.baidu.com/article/ce43664935b90c3772afd377.html

HTML的全称为：HyperText Mark-up Language, 指的是超文本标记语言。 标记：就是标签，标签大多数都是成对出现的。

所谓超文本，有两层含义:因为网页中还可以图片、视频、音频等内容(超越文本限制);它还可以在网页中跳转到另一个网页，与世界各地主机的网页链接(超链接文本)。

html的基本结构

<!DOCTYPE html>
<html>
    <head>            
        <meta charset="UTF-8">
        <title>网页标题</title>
    </head>
    <body>
          网页显示内容
    </body>
</html>

标签

常用的html标签

<!-- 1、成对出现的标签：-->
<h1>h1标题</h1>
<h2>h2标题</h2>
<h3>h3标题</h3>
<h4>h4标题</h4>
<h5>h5标题</h5>
<h6>h6标题</h6>

<div>这是一个div标签</div>

<p>这个一个段落标签</p>

<span>这是一个span标签</span>

<!-- 2、单个出现的标签： -->
<br />	//换行
<img src="" alt="" title="" border="" width="" height="" />
<hr />	//分割线

<!-- 3、带属性的标签，如src、alt 和 href等都是属性 -->
<img src="images/pic.jpg" alt="图片">
<a href="http://www.baidu.com">百度网</a>

<!-- 4、标签的嵌套 -->
<div>
    <img src="images/pic.jpg" alt="图片">
    <a href="http://www.baidu.com">百度网</a>
</div>

其他标签

加粗

<strong></strong>
<b></b>

倾斜

<i></i>
<em></em>

删除线

<s></s>
<del></del>

下划线

<u></u>
<ins></ins>

链接

<a href="" target=""></a>

锚点定位（跳转）

<a href="#id"></a>

base设置整体链接状态

<base target="_blank" />

特殊字符

特殊字符 描述 字符的代码
空格符 &nbsp;
< 小于号 &lt;
> 大于号 &gt;
& 和号 &amp;
¥ 人民币 &yen;
© 版权 &copy;
® 注册商标 &reg;
° 摄氏度 &deg;
± 正负号 &plusmn;
× 乘号 &times;
÷ 除号 &divide;
² 平方2 (上标2) &sup2;
³ 立方3 (上标3) &sup3;

列表标签

无序列表

<ul>
    <li></li>
    <li></li>
</ul>

有序列表

<ol>
    <li></li>
    <li></li>
</ol>

注意：ul和ol里面之能放li,li里面可以放其他标签。

自定义列表

<dl>
    <dt></dt>
    <dd></dd>
    <dd></dd>
</dl>

表格标签

<table width="" border="" align="" cellpadding="" cellspacing="">
    <caption>表格标题</caption>
    <thead>
        <tr>
            <th>表头</th>
            <th>表头</th>
            <th>表头</th>
        </tr>
    </thead>
    <tbody>
        <tr align="">
            <td>11</td>
            <td>12</td>
            <td>12</td>
        </tr>	
    </tbody>
</table>
属性名 含义 常用属性值
border 设置表格的边框(默认border=”0”无边框) 像素值
ellspacing 设置单元格与单元格边框之间的空白间距 像素值(默认为2像素)
cellpadding 设置单元格内容与单元格边框之间的空白间距 像素值(默认为1像素)
width 设置表格的宽度 像素值
height 设置表格的高度 像素值
align 设置表格在网页中的水平对齐方式 left、center、 right

合并单元格（rowspan合并行，colspan合并列）

<table width="500" border="1">
    <tr>
        <td>11</td>
        <td>12</td>
        <td rowspan="2">13</td>
    </tr>
    <tr>
        <td>21</td>
        <td>22</td>
    </tr>
    <tr>  
        <td>31</td>
        <td colspan="2">32</td>
    </tr>
</table>

效果

表单标签

表单标签是<form>标签,定义整体的表单区域。

input表单

属性 属性值 描述
type text 单行文本输入框
password 密码输入框
radio 单选按钮
checkbox 复选框
button 普通按钮
submit 提交按钮
reset 重置按钮
image 图像形式的提交按钮
file 文件域
name 由用户自定义 控件的名称
value 由用户自定义 input控件中的默认文本值
size 正整数 input控件在页面中的显示宽度
checked checked 定义选择控件默认被选中的项
maxlength 正整数 控件允许输入的最多字符数

注意：

同一组radio中，name要相同。

label标签

<label> 用户名<input type="text"> </label>
<br />
<label for="pwd">
    用户名<input type="text" />
    密码<input type="password" id="pwd" />
</label>

textarea标签

<textarea cols="每行中字符数" rows="显示的行数">		
</textarea>

select标签

<select name="" id="">
    <option value="">请选择</option>
    <option value="">1</option>
    <option value="" selected="selected">2</option>
    <option value="">3</option>
</select>

表单提交

<form action="提交地址url" method="提交方式get/post">
    用户名<input type="text" name="user" /> 
    <input type="submit" value="提交" name="submit" />
</form>

action属性：设置表单数据提交地址。method属性 设置表单提交的方式，一般有“GET”方式和“POST”方式, 不区分大小写。

表单元素属性设置：name属性：设置表单元素的名称，该名称是提交数据时的参数名；value属性：设置表单元素的值，该值是提交数据时参数名所对应的值。

拓展

http://www.w3school.com.cn/

https://developer.mozilla.org/zh-CN/

引入CSS样式表

css(Cascading Style Sheet)层叠样式表，它是用来美化页面的一种语言。

第一种：行内式（内联样式）

<h3 style="color: pink; font-size: 25px;">英文版新闻报</h3>

第二种：内部样式表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        h3 {
            color: pink;
            font-size: 60px; 
        }
    </style>
</head>
<body>
 	<h3>英文版新闻报</h3>
</body>
</html>

第三种：外部样式表(外联式)

html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css" />
</head>
<body>
 	<h3>英文版新闻报</h3>
</body>
</html>

css文件

h3 {
    color: pink;
    font-size: 60px; 
}

CSS选择器之基本选择器

标签选择器（元素选择器）

把某类标签全部选出来。

类选择器

.类名 {
    属性:属性值;
}

注意：可以使用中横线命名，不建议使用下划线_,不能数字开头。

多类名选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .colred {
            color: red;
        }
        .font20 {
            font-size: 50px;
            color: blue;
        }
    </style>
</head>
<body>
 	<h3 class="colred font20">英文版新闻报</h3>
 	<h3 class="colred">英文版新闻报</h3>
</body>
</html>

注意：空格隔开；样式显示跟类名先后顺序没有关系，受css样式书写的上下顺序有关。

id选择器

#id {
    属性:属性值;
}

注意：id只能使用一次，class可以使用多次。

第四种：通配符选择器

*代表所有，?代表单个字符。

* {
    属性：属性值;
}

CSS选择器之复合选择器

后代选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div p {
            color: pink;
        }
        .dd p{
            font-size: 30px;
        }
    </style>
</head>
<body>
 	<div>
 		<p>英文版新闻报</p>
 	</div>

 	<div class="dd">
 		<p>英文版新闻报</p>
 	</div>
</body>
</html>

子代选择器-选择亲儿子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        ul li > a {
            color: red;
        }
    </style>
</head>
<body>
 	<ul>
 		<li>
 			<a href="#">一级菜单</a>
 			<div>
 				<a href="#">二级菜单</a>
 			</div>
 		</li>
 	</ul>
</body>
</html>

并集选择器 **

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div,p,span {
            color: red;
        }
    </style>
</head>
<body>
 	<div>并集选择器</div>
 	<p>并集选择器</p>
 	<span>并集选择器</span>
 	<h1>并集选择器</h1>
 	<a href="#">并集选择器</a>
</body>
</html>

交集选择器(即..又..)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div.red {
            color: red;
        }
    </style>
</head>
<body>
 	<div class="red">交集选择器</div>
 	<p class="red">交集选择器</p>
</body>
</html>

伪类选择器

链接伪类选择器

link  /*未访问的链接*/
visited /*已访问的链接*/
hover /*鼠标移动到链接上*/
active /*选定的链接*/

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        a:link {<!-- 未访问的链接状态 -->
            color: #333;
            text-decoration: none;
        }
        a:visited {<!-- 已访问的链接 -->
            color: pink;
        }
        a:hover {<!-- 鼠标经过时候样子 -->
            color: red;
        }
        a:active {<!-- 鼠标按下时候样子 -->
            color: green;
        }
    </style>
</head>
<body>
 	<a href="http://www.baidu.com">双十一</a>
</body>
</html>

常见写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        a {
            color: #333;
            text-decoration: none;
            font-size: 25px;
            font-weight: 700;
        }
        a:hover {
            color: red;
        }
    </style>
</head>
<body>
 	<a href="http://www.baidu.com">双十一</a>
</body>
</html>

CSS属性

布局常用样式属性

width 设置元素(标签)的宽度，如：width:100px;
height 设置元素(标签)的高度，如：height:200px;
background 设置元素背景色或者背景图片，如：background:gold; 设置元素的背景色, background: url(images/logo.png); 设置元素的背景图片。
border 设置元素四周的边框，如：border:1px solid black; 设置元素四周边框是1像素宽的黑色实线
以上也可以拆分成四个边的写法，分别设置四个边的：
border-top 设置顶边边框，如：border-top:10px solid red;
border-left 设置左边边框，如：border-left:10px solid blue;
border-right 设置右边边框，如：border-right:10px solid green;
border-bottom 设置底边边框，如：border-bottom:10px solid pink;
padding 设置元素包含的内容和元素边框的距离，也叫内边距，如padding:20px;padding是同时设置4个边的，也可以像border一样拆分成分别设置四个边:padding-top、padding-left、padding-right、padding-bottom。
margin 设置元素和外界的距离，也叫外边距，如margin:20px;margin是同时设置4个边的，也可以像border一样拆分成分别设置四个边:margin-top、margin-left、margin-right、margin-bottom。
float 设置元素浮动，浮动可以让块元素排列在一行，浮动分为左浮动：float:left; 右浮动：float:right;

文本常用样式属性

color 设置文字的颜色，如： color:red;
font-size 设置文字的大小，如：font-size:12px;
font-family 设置文字的字体，如：font-family:'微软雅黑';为了避免中文字不兼容，一般写成：font-family:'Microsoft Yahei';
font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
line-height 设置文字的行高，如：line-height:24px; 表示文字高度加上文字上下的间距是24px，也就是每一行占有的高度是24px
text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉
text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中
text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px

CSS字体属性

font-size字号大小（px、em）、font-family字体 、font-weight字体粗细 、font-style字体风格（倾斜） 

font-size: 18px;
/*font-family: "宋体";*/			
font-family: "\5B8B\4F53";
font-weight: bold;
/*font-weight: normal;*/
/*font-style: normal;*/
font-style: italic;

bold相当于700，normal为400。

font综合设置

选择器{font: font-style font-weight font-size font-family ;}

注意：不能更换顺序。font-size和font-family不能省略。

CSS外观属性

color颜色、line-height行间距、text-align文字水平对齐方式(left ,right,center)、text-indent首行缩进、text-decoration文本的装饰。

color: #FF0000;
line-height: 24px;
text-align: left;
text-indent: 2em;
text-decoration: line-through;
/*none:无装饰、underline:下划线、line-through:删除线*/

注意：如果行高line-height等于height高度，文字会垂直居中。

一般居中写法

line-height: (=height);text-align: center;

background

background-color: #fff;
background-image: url();

background-repeat

/* 平铺方式：repeat、no-repeat、repeat-x、repeat-y*/
background-repeat: repeat-x;

background-position

/* x轴和y轴位置 ，top、bottom、left、right*/
/* background-position: 12px 12px; */
/* 如果只写一个方位，另一个默认居中 */
/* background-position: bottom; */
background-position: center bottom;

background-attachment滚动还是固定，默认滚动

/* fixed */
background-attachment: scroll;

background简写,没有强制顺序

background: background-color background-image background-repeat background-attachment background-position

background: transparent url(image.jpg) repeat scroll 50% 0;

设置透明，最后一位为alpha

background: rgba(0, 0, 0, 0.5);

标签显示模式

块级元素和行内元素相互转换：

div {
    display: inline;
}
span {
    display: block;
}

把行内元素转换为行内快元素：

a {
    display: inline-block;
}

CSS三大特性

1、层叠性

样式冲突，以最后样式为准。样式不冲突，不会重叠。

2、继承性

子标签会继承父标签的某些样式。一般继承文字的样式。

3、优先级

!important(无穷大) > 行内样式(1,0,0,0) > id选择器(0,1,0,0) > 类选择器(伪类)(0,0,1,0) > 标签选择器(0,0,0,1) > *选择器和继承选择器(0,0,0,0)

注意

权重相同，就近原则；权重会叠加；

盒子模型

盒子模型的5个主要样式属性

width：内容的宽度(不是盒子的宽度)
height：内容的高度(不是盒子的高度)
padding：内边距。
border：边框。
margin：外边距

盒子的真实尺寸只会受到宽度、高度、边框、内边距四个属性的影响，不会受到外边距属性的影响。

盒子边框(border)

border-width、border-style、border-color

border-width: 1px;
border-color: red;
/* none无边框、solid实线边框、dashed虚线边框、dotted点线边框 */
border-style: dashed;

连写，没有顺序

border: 1px solid red;

边框可以拆开

border-top: 1px solid red;
border-bottom: 1px solid green;

去掉所有边框

border: 0;

表格细线边框

table,
td {
    border-collapse: collapse;
}

内边框(padding)

padding会撑开带width和height盒子。

padding: 10px;
padding-left: 10dp;
padding: 10px 20px; /* 上下分别10和左右分别20 */
padding: 10px 20px 30px; /* 上10,左右分别20,下30 */
padding: 10px 20px 30px 40px; /* 顺时针，上右下左 */

注意：如果盒子没有给定宽高，padding不会影响盒子大小。

外边距(margin)

清除元素内外边距

* {
    margin: 0;
    padding: 0;
}

清除li中圆点

li {
    list-style: none;
}

让盒子水平居中,注意，必须给块级盒子设置宽度。

margin: 0 auto;
或者
margin-left: auto;
margin-right: auto;
text-align: center;/* 内容水平居中 */

相邻块元素垂直外边距合并问题

/* 一个元素是 */
margin-bottom: 100px;
/* 另一个元素是 */
margin-top: 50px;
/*合并后的距离为100px，即以大的为准 */

嵌套块元素垂直外边距合并问题

三种解决办法：

border-top: 1px solid red;
padding-top: 1px;
overflow: hidden;

圆角边框和盒子阴影

圆角边框

border-radius: 10px;/* 圆角 */
border-radius: 50%;/* 正方形变成圆 */
border-radius: 10px 20px 30px 40px;/* 左上开始顺时针 */
border-radius: 10px 0;/* 左上右下和右上左下 */

阴影

box-shadow: 0px 15px 30px 2px rgba(0,0,0,0.4);

box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影;

值 描述
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊距离。
spread 可选。阴影的尺寸。
color 可选。阴影的颜色。请参阅CSS颜色值。
inset 可选。将外部阴影(outset)改为内部阴影。

浮动

作用：使多个div在一行显示，float属性值有left、right、none。

li使用float可以一行排列。

浮动的盒子，不会超过内边距。浮动脱离标准流，不占位置，会影响下面的标准流。浮动只有左右浮动。

注意 ：浮动可以让元素默认转换为行内块元素。

清除浮动

本质：解决父级元素因为子级浮动引起内部高度为0的问题。

父元素自动检测子级元素的高度，以最高为准。常用四种解决办法。

1、额外标签法

在最后一个浮动标签后面新添加一个标签，清除浮动。

clear: both;

2、父级添加overflow

给父级元素添加

overflow: hidden;

3、使用after伪元素清除浮动

给父级元素添加类名clearfix

.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
    *zoom: 1; /* IE6、7 */
}

4、使用before和after双伪元素清除浮动

给父级元素添加类名clearfix

.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1; /* IE6、7 */
}

定位

定位属性主要包括定位模式和边偏移两部分。

值 描述
static 自动定位 (默认定位方式)
relative 相对定位，相对于其原文档流的位置进行定位
absolute 绝对定位，相对于其上一个已经定位的父元索进行定位
fixed 固定定位，相对于浏览器窗口进行定位

1、相对定位

position: relative;
top: 100px;
left: 100px;

注意：相对定位可以通过边偏移移动位置，但是原来的所占的位置，继续占有。以自己的左上角为基准点定位。

2、绝对定位

position: absolute;
top: 100px;
left: 100px;

注意：绝对定位不占位置。若所有父元素都没有定位，以浏览器当前屏幕为基准点定位。

绝对定位依据最近的已经定位的父元素进行定位。

子绝父相。正常情况，子级是绝对定位的话，父级要用相对定位。

定位的盒子居中

position: absolute;
left: 50%;
margin-left: -(宽度/2);
top: 50%;
margin-top:  -(高度/2);

3、固定定位

position: fixed;
left: 0;
top: 0;

注意：不管父元素有没有定位，都是以浏览器当前屏幕为基准点定位，和父元素没有关系。

模式转换：

绝对定位和固定定位，元素模式发生转换，都转换为行内快模式。

叠放次序(z-index)

z-index: 1;
定位模式 是否脱标占有位置 是否可以使用边偏移 移动位置基准值
静态static 不脱标，正常模式 不可以 正常模式
相对定位relative 脱标，占有位置 可以 相对自身位置移动(自恋型)
绝对定位absolute 完全脱标，不占有位置 可以 相对于定位父级移动位置(拼爹型)
固定定位fixed 完全脱标，不占有位置 可以 相对于浏览器移动位置(认死理型)

z-index默认为0，取值越大，越居上，如果取值相同，后来者居上。

只有定位的盒子才有z-index。

没有单位。

鼠标样式、轮廓线、防止拖拽文本域

鼠标样式

cursor: default;/*default: 默认、 pointer： 小手、 text： 选择、move： 移动*/

轮廓线

input {
    outline: none;/* 取消轮廓线 */
    border: 1px solid red;
}

防止拖拽文本域

textarea {
    resize: none;/* 不要重新规定尺寸 */
    outline: none;/* 取消轮廓线 */
}

vertical-align

针对行内元素和行内块元素。控制图片和文字位置

img {
    vertical-align: middle;/* top、bottom */
}

显示与隐藏

display: none;/* 隐藏 */
display: block;/* 显示 */

display隐藏后不保留位置。

visibility: visible;/* 显示 */
visibility: hidden;/* 隐藏 */

visibility隐藏后保留位置。

overflow: hidden;

overflow四个属性auto; scroll; hidden; visible;

溢出文字隐藏

当子元素(标签)的尺寸超过父元素(标签)的尺寸时，此时需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来完成。

overflow的设置项：visible 默认值, 显示子标签溢出部分。hidden 隐藏子标签溢出部分。auto 如果子标签溢出，则可以滚动查看其余的内容。

white-space: nowrap;/* 强制在同一行内显示所有文本，直到文本结束或者br */
overflow: hidden;/* 超出部分隐藏 */
text-overflow: ellipsis;/* 超出部分显示省略号 */

注意：做省略号效果，上面三句都需要。

Sprites

为了有效地减少服务器接收和发送请求次数，提高页面加载速度。

CSS精灵是一种处理网页背景图像的方式。

滑动门

字体图标

icomoon字库

https://icomoon.io/

阿里icon font字库

http://www.iconfont.cn/

sublime快捷键

sublime可以快速提高我们代码的书写方式

1.生成标签直接输入标签名按tab键即可 比如div 然后tab键，就可以生成<div></div>
2.如果想要生成多个相同标签加上*就可以了比如div*3 就可以快速生成3个div
3.如果有父子级关系的标签，可以用>比如ul> li就可以了
4.如果有兄弟关系的标签，用+就可以了比如div+p
5.如果生成带有类名或者id名字的，直接写 .demo 或者#two tab 键就可以了
文章作者:
文章链接: https://adamright.github.io/2018/12/01/2.html%E5%92%8Ccss%E5%9F%BA%E7%A1%80/
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 !
HTML标签 CSS
赏
  目录