HTML+CSS自学历程

最新推荐文章于 2024-08-21 20:15:01 发布

再努努力加把劲

最新推荐文章于 2024-08-21 20:15:01 发布

阅读量430

点赞数

分类专栏： html+css学习文章标签： html css

本文链接：https://blog.csdn.net/weixin_46212376/article/details/118066151

版权

html+css学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML+CSS

HTML

HTML基本格式

<!--文档类型声明标签-->
<!DOCTYPE html>

<!--en:英文网站；zh-CN:中文网站；fr:法文网站-->
<html lang="en">
	<head>
    	<meta charset="UTF-8">    <!--UTF-8:万国码-->
    	<title>Document</title>
	</head>
	<body>
	</body>
</html>

字体、图像标签

标题标签：<h1>~<h6> </h1>~<h6>
段落标签：<p></p>
加粗标签:<strong></strong> / <b></b>
倾斜标签：<em></em> / <i></i>
删除线标签：<del></del> / <s></s>
下划线标签：<ins></ins> / <u></u>
布局标签：1、<div></div>（一行只能放一个
） 2、 <span></span>（一行可以放多个）
图像标签：<img src="图像路径">
1、alt属性：替代的文本
2、width属性：规定图像宽度
3、title属性：显示图像信息

超链接

超链接：<a href="链接网站">网站名称</a>
1、target属性：_blank(新窗口打开链接)、_self（同一网页打开链接）

锚点链接

例：<a href="one">标题</a>
<h3 id ="one">标题</h3>

特殊字符

空格字符： 
"<"字符：<
">"字符：>

表格标签

表格用于显示、展示数据

表格标签：<table></table>(定义表格的标签)
表格中的标题：<th></th>
表格中的行：<tr></tr>
表格中的data：<td></td>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>This is my 表格</title>
    </head>
    <body>
        <!--表格用于显示、展示数据的-->
        <!--"<table></table>":用于定义表格的标签-->
        <!--"<tr></tr>":用于定义表格中的行-->
        <!--"<td></td>":用于定义表格中的单元格table data-->
        <!--"<th></th>":表头单元格，加粗，居中显示table head-->
        <!-- align="center":表格在中间显示"left":左对齐显示；"right":右对齐显示, -->
        <!-- border="1":表格加一个边框 -->
        <!-- cellpadding="像素值"：内容与边框之间的距离 -->
        <!-- cellspacing="像素值"：单元格之间的距离 -->
        <!-- width="像素值"：表格的宽度 -->
        <!-- height="像素值"：表格的高度 -->
        <table align="center" border="1" cellpadding="10" cellspacing="0" width="300" height="200">
            <tr><th>姓名</th>   <th>性别</th>   <th>年龄</th></tr>
            <tr><td>王一</td>   <td>女</td>   <td>18</td></tr>
            <tr><td>王二</td>   <td>女</td>   <td>15</td></tr>
            <tr><td>王三</td>   <td>男</td>   <td>19</td></tr>
            
        </table>
    </body>

</html>

将table分成两部分
<thead></thead>
<tbody></tbody>

合并单元格标签

跨列合并单元格：<td clospan="合并的单元格数量">
跨行合并单元格：<td rowspan="合并的单元格数量">

列表标签

列表：无序列表、有序列表、自定义列表
列表用来布局的

无序列表：

<ul>
        <li>榴莲</li>
        <li>臭豆腐</li>
        <li>雪梨</li>
</ul>

1、<ul>里面只能放<li>标签，<li>里面可以任何标签

有序列表

<ol>
        <li>王一</li>
        <li>王二</li>
        <li>王三</li>
</ol>

1、<ol>里面只能放<li>标签，<li>里面可以放任何标签

自定义列表

<dl>
        <dt>关注我们</dt>
        <dd>新浪微博</dd>
        <dd>官方微信</dd>
        <dd>联系我们</dd>
</dl>

1、<dl>相当于一个容器，<dt>最大的，<dd>围绕<dt>进行说明
2、<dl>中只能有<dt>和<dd>，经常是一个<dt>,多个<dd>

元素

<label> 标签为 input 元素定义标注（标记）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- <label>元素定义标注 -->
    <label for="text">用户名：</label><input type="text" id ="text"><br>
    <label for="nan">男</label><input type="radio" id="nan" name="sex">
    <label for="nv">女</label><input type="radio" id="nv" name="sex">
    <!-- 下拉列表 -->
    <form action="">
        籍贯：
    <select>
        <option>北京</option>
        <option>山东</option>
        <option selected="selected">广东</option>    <!--<selected="selected">使之处于选定状态-->
        <option>天津</option>
    </select>
    </form>
    
</body>
</html>

textatrea元素

<textarea> 标签定义多行的文本输入控件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form >
        今日反馈:
        <!--cols：每行可以显示多少字符-->
        <!-- rows可以显示多少行 -->
        <textarea cols="40" rows="3">请输入你的反馈</textarea><br>
        
    </form>
</body>
</html>

CSS

CSS语法规范

<style>
        /* 选择器{样式} */
        /* 给谁改样式{概什么样式} */
        p {
            color: red;
             /* 修改文字大小为12像素  */
            font-size: 12px;
        }
    </style>

类选择器

类选择器允许以一种独立于文档元素的方式来指定样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 类选择器口诀：样式点定义,结构类(class)调用，一个或多个，开发最常用 */
        .red{
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li class="red">往往</li>
        <li>王一</li>
        <li>王二</li>
        <li class="red">1111</li>
    </ul>
    
</body>
</html>

在<style>中定义类型

<style>
	.red{
		color: red;
	}
</style>

再进行调用该选择

<li class="red">姓名</li>

多类名

<head>
    <title>Document</title>
    <style>
        .red{
            color: red;
        }
        .font35{
            font-size :35px;
        }
    </style>
</head>
<body>
    <div class="red font35">LUNA</div>
    <div></div>
    <div></div>
</body>

id选择器

ID 选择器前面有一个 # 号 - 也称为棋盘号或井号。

<head>
    <title>Document</title>
    <style>
        /* id选择器的口诀：样式#定义，结构id调用，只能调用一次,别人切勿使用 */
        #pink{
            color: pink;
        }
    </style>
</head>
<body>
    <div id="pink">luna</div>
</body>
</html>

通配符选择器

如果希望所有的元素都符合某一种样式，可以使用通配符选择器。通配符选择器不需要调用。

*{
        color: red;
    }

字体属性

字体格式：font-family:"Miscrosoft YaHei";
字体大小：font-size: 16px;
字体加粗：font-weight: 400;(加粗是700，不加粗是400)
字体不倾斜：font-style: normal;
字体倾斜：font-style: italic;
font符合属性写法：

 font:font-style font-weight font-size/line-height font-family;

例子：

<head>
    <title>Document</title>
    <style>
        /* div{
            font-style（字体样式）: italic;
            font-size(字号): 16px;
            font-weight（字体粗细）: 700;
            font-family（字体）: "Microsoft YaHei";
        } */
        /* 复合属性：简写的方式，节约代码 */
        /* font:font-style font-weight font-size/line-height font-family */
        div{
            font: italic 700 16px 'Microsoft YaHei';
        }
    </style>
</head>
<body>
    <div>字体属性</div>
</body>
</html>

对齐属性

 h1{
            /* 本质是让h1盒子里面的文字水平居中对齐 */
            text-align: center;
        }

装饰文本

下划线：text-decoration: underline;
删除线：text-decoration: line-through;
上划线：text-decoration: overline;
取消下划线：text-decoration: none;

文本缩进

第一行首行缩进距离：text-indent: 10px;
缩进当前元素的两个文字大小距离：text-indent: 2em;

 p{
            /* 文本的第一行首行缩进多少距离  */
            text-indent: 20px;    /*若为赋值则是往前进，正值往后退 */
            /* 如果此时写了2em，则是缩进当前元素两个文字大小的距离 */
            text-indent: 2em;
        }

行间距

line-height: 20px;

行内样式表

<p style="color: red; font-size: 25px;">行内样式表</p>

外部样式表

在.html文件中：<link rel="stylesheet" href="style.css">
在.css文件中：

/* 这个CSS文件里面只有样式没有标签 */
div{
    color: pink;
}

Emmet语法

提高html/CSS的编写速度
快速生成HTML结构语法
1、生成标签：标签名+tab
2、生成多个相同标签：标签名*数量
3、若有父子级关系，用>即可：ul>li
4、兄弟关系标签，用+：div+p
5、带有类名或者id名的，直接写.demo或者#demo即可
6、若生成的div有顺序：用自增符号$
eg：.demo$*5
7、若生成的标签内部写内容可以用{ }表示

复合选择器

把基础选择器组合形成的
常用的复合选择器：后代选择器、子选择器、伪类选择器…

后代选择器

又称包含选择器
语法：元素1 元素2 {样式声明}
例如：ul li {样式声明} /*选择ul中的所有li标签元素*/
1、元素1和元素2要用空格隔开
2、元素1是父级、元素2是子级
例子：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .nav a {
            color: red;
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#">saaaaaaaa</a>
        <ul>
            <a href="#">sss</a>
            <li>jjjjj</li>
            <li>jjjjj</li>
            <li>jjjjj</li>
            <li>jjjjj</li>
        </ul>
    </div>
</body>

</html>

子选择器

又称子元素选择器
语法：元素1>元素2 {样式声明}
选择元素1里面的所有直接后代元素2

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .hot>a {
            color: red;
        }
    </style>
</head>

<body>
    <div class="hot">
        <a href="#">A1</a>
        <ul>
            <li><a href="#">A2</a></li>
            <li><a href="#">A3</a></li>
        </ul>
    </div>
</body>

</html>

并集选择器

可以选择多组标签，同时为他们定义相同的样式，通常用于集体声明。

通过“，”进行分割
语法：元素1，元素2 {样式声明}
例子：

<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* 要求1：把熊大和熊二改成粉色 */
        /* div,
        p {
            color: pink;
        } */

        /* 要求2：把熊大和熊二改成粉色，还有小猪一家改成粉色 */
        div,
        p,
        .pig li {
            color: pink;
        }

        /* 约定的语法规范：并集选择器竖着写 */
        /* 一定要注意最后一个选择器不需要加逗号 */
    </style>
</head>

<body>
    <div>熊大</div>
    <p>熊二</p>
    <span>光头强</span>
    <ul class="pig">
        <li>小猪佩奇</li>
        <li>猪爸爸</li>
        <li>猪妈妈</li>
    </ul>
</body>

</html>

伪类选择器

用于向某些选择器添加特殊的效果

伪类选择器书写的最大特点是用冒号（：）表示，比如：hover、：first-child
伪类选择器有很多种，如链接伪类、结构伪类等

链接伪类

 a:link			/*选择所有未被访问的链接*/
 a:visited/*选择所有已被访问的链接*/
 a:hover/*选择鼠标指针位于其上的链接*/
 a:active/*选择活动链接（鼠标按下未弹起的链接）*/

例子：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* 1、未访问的链接a:link  把没有访问过的链接选出来*/
        a:link {
            color: #333;
            text-decoration: none;
        }

        /* 2、a:visited选择点击过的（访问过的链接） */
        a:visited {
            color: orange;
        }

        /*3、 a:hover 选择鼠标经过的那个链接 */
        a:hover {
            color: skyblue;
        }

        /* 4、a:active 选择的是鼠标正在按下还没有弹起鼠标的链接 */
        a:active {
            color: rgb(128, 0, 0);
        }
    </style>
</head>

<body>
    <a href="#">小猪佩奇</a><br>
    <a href="##">www</a>
</body>

</html>

链接伪类选择器的注意事项
1、按照LVHA顺序进行书写
2、a链接需要单独指定样式

focus伪类选择器

用于选取获得焦点的表单元素

焦点就是光标，一般情况<input>类表单元素才能获取
语法：

input:focus{
	background-color:yellow;
}

例子：

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Document</title>
    <style>
        /* 把多的光标的input表单元素选取出来 */
        input:focus {
            background-color: pink;
            color: red;
        }
    </style>
</head>

<body>
    <input type="text">
    <input type="text">
    <input type="text">
</body>

</html>

CSS元素显示模式

元素显示模式
1）元素以什么方式进行显示
2）HTML元素一般分为块元素和行内元素两种类型
块元素：
1、独占一行
2、高度、宽度、内外边距都可以控制
3、容器默认是容器（父级宽度）的100％
4、是一个容器及盒子，里面可以放行内或块级元素
5、文字类的元素内不允许使用块级元素
如：<p>里面不能放<div>
行内元素：
1、相邻行内元素在一行上，一行可以显示多个
2、高、宽直接设置是无效的
3、默认宽度就是本身内容的宽度
4、行内元素只能容纳文本或者其他的行内元素
5、链接里面不能再放链接
6、<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全
行内块元素
1、<img /> <input /> <td>都是行内块元素
2、一行上可以有多个块元素
3、默认宽度就是本身内容的宽度
4、高度、宽度、内外边距都可以控制
元素显示模式转换
1、一个模式的元素需要另一种模式的特征
2、转换为块元素:display:block;
3、转换为行内元素：display:inline;
4、转换为行内块元素：display:inline-block;
单行文字垂直居中的代码
让文字的行高等于盒子的高度

div{
	height: 42px;
	line-height: 42px;
}

CSS背景
1、背景颜色：background-color:颜色值;
2、背景图片：便于控制位置（小图片、超大图片）
语法：background-image:url(图片地址)
没有背景图片则是background-image:none
背景平铺
1、在HTML页面上对背景图像进行平铺
语法：background-repeat:repeat | no-repeat | repeat-x | repeat-y
repeat：平铺（默认）
no-repeat：不平铺
repeat-x：沿x轴平铺
repeat-y：沿y轴平铺
背景位置
1、改变图片在背景中的位置
语法：background-position: x y;
x、y：可以是方位名词或精确单位
边框属性border：
语法：

border-width
border-style
border-color

内边距padding：所有内边距属性
语法：padding
外边距margin：盒子间的距离
语法：margin
1、外边距可以让块级盒子水平居中对齐，但需要满足：
1）盒子必须指定宽度
2）盒子左右的外边距都设置为auto
2、嵌套元素垂直外边距塌陷：
1）overflow：hidden
2）为父元素定义上边框
3）为父元素定义上内边框
清除内外边距

圆角边框

语法：border-radius:length;

radius:半径(⚪与边框交集形成圆角效果)
单位可以是数值或者百分比
分开写：border-top-left-radius、border-top-right-radius…

盒子阴影

语法：box-shadow:h-shadow v-shadow blur spread color inset;
h-shadow:水平阴影距离
v-shadow:垂直阴影距离
blur:阴影虚实
spread:阴影的尺寸大小
color:阴影的颜色
inset:内阴影；外阴影是默认的，如果写了阴影会不出现

文字阴影

语法：text-shadow:h-shadow v-shadow blur color;

CSS浮动

浮动
多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
语法：选择器{dloat：属性值;}
1、属性值：left、right
2、特性：1）浮动元素会脱标（脱标、不保留原先的位置）
2）具有行内块元素的特性

CSS定位

定位组成
1、定位=定位模式+边偏移
静态定位

position:static;

相对定位:参照自己原来位置进行移动

 position:relative;

绝对定位：相对于祖先元素移动

positiong:absolute;

只要父元素有定位，则以最近一级的父元素为参考点

固定定位——①
固定于浏览器可视区位置

 position:fixed;

1）跟父元素无关系
2）不随着滚动条滚动
3）不占有原先的位置

固定定位——②
固定盒子在版心右侧位置
1）left：50%
2）margin-left：版心宽度的一半距离
粘性定位

positon:sticky; top:10px;

1)以浏览器的可视窗口为参考点移动元素
2）占有原先的位置
3）必须添加top、left、right、bottom其中一个才有效

定位叠放次序z-index
z-index：1；
数值越大，盒子越靠上。默认是auto
数字后面不能加单位
绝对定位盒子居中水平垂直
定位的特殊特性
1 ）行内元素添加绝对或者固定定位，可以直接设置高度和宽度；
2）块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小
脱标的盒子不对触发外边距塌陷
浮动元素、绝对定位（固定定位）元素都不会触发外边距合并的问题
绝对定位（固定定位）会完全压住盒子
1）浮动元素只会压住下面标准流的盒子，但不会压住标准流盒子里面的文字（图片）
2）绝对定位（固定定位）会压住下面标准流的所有内容

CSS元素显示与隐藏

display属性（隐藏元素后不占有原先位置）
1）display：none ；隐藏对象
2）display：block；转换为块级元素，显示元素
visibility属性（隐藏元素后继续占有原来的位置）
1）visibility：visible；元素可视
2）visibility：hidden；元素隐藏
overflow溢出
1）·overflow:visible
2）overflow：hidden

CSS精灵图

有效减少服务器接受和请求的次数，提高页面的加载速度

精灵图
字体图标：结构样式比较简单的小图标

CSS用户界面样式

鼠标样式cursor
li {cursor:pointer;}
例子：

<body>
    <ul>
        <li style="cursor:default;">小白鼠标样式</li>
        <li style="cursor:pointer;">鼠标小手样式</li>
        <li style="cursor:move;">鼠标移动样式</li>
        <li style="cursor:text;">鼠标文本样式</li>
        <li style="cursor: not-allowed;">鼠标禁止样式</li>
    </ul>
</body>

取消表单轮廓线

input{outline:none;}

防止拖拽文本域resize

textarea {resize: none;}

vertical-align属性
经常用于设置图片或者表单（行内块元素）和文字垂直对齐
溢出的文字省略号显示
1、单行文本溢出显示省略号

			/* 1、如果文字一行显示不完，也必须在一行内显示 */
            white-space: nowrap;
            /* 2、超出部分隐藏 */
            overflow: hidden;
            /* 3、文字溢出的时候用省略号显示 */
            text-overflow: ellipsis;

2、多行文字溢出省略号显示

再努努力加把劲

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS自学历程

HTML+CSS目录HTML+CSSHTMLHTML基本格式字体、图像标签超链接锚点链接特殊字符表格标签合并单元格标签列表标签元素textatrea元素CSSCSS语法规范类选择器id选择器通配符选择器字体属性对齐属性装饰文本文本缩进行间距行内样式表外部样式表Emmet语法复合选择器后代选择器子选择器HTMLHTML基本格式<!DOCTYPE html><
复制链接

扫一扫