HTML前端入门

最新推荐文章于 2024-09-12 18:22:06 发布

AO_AEO

最新推荐文章于 2024-09-12 18:22:06 发布

阅读量263

点赞数

分类专栏： HTML 文章标签： html 前端 css

本文链接：https://blog.csdn.net/AO_AEO/article/details/125847184

版权

HTML 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

第一部分

1. 网页结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人网站</title>
</head>
<body>
    
</body>
</html>

head头标签

body 内容

title标题标签

2.基础标签

h1~h6  标题标签
div 一个块级元素
span 一个行内元素
p  段落标签
a  超链接标签 属性：href="链接地址"
strong b  加粗标签
i em  斜体
del 删除线
sub 下标
sup 上标

3.相对/绝对路径

绝对路径pass

相对路径

同一级的：直接写名字，或者./
进入下一级：/
上升一级：…/

代码示例：

	<!-- 绝对路径 -->
    <img src="C:\Users\w5725\第一部分\logo.png">
    <!-- 相对路径 -->
    <img src="../img/logo.png" alt="">

4.标题的嵌套

<!-- 块级标签可以嵌套块级，也可以嵌套行内
        h1~h6，p,dt,:只能嵌套行内
        如：div可以嵌套自己
    -->
<div>
    <div>
        <p>
        </p>
	</div>
    
    <div>
        <p>
        </p>
	</div>
</div>
 <!-- 行内元素：只能嵌套行内元素
        a：不能嵌套自己 -->

第二部分

1. 三选择器

三大主要的选择器，标签/类/id
/* 标签选择器 */
        a{
            font-size: 50px;
        }
        /* 类选择器 */
        .name{
            color: yellow;
        }
        /* id选择器 */
        #qqa{
            color: violet;
        }

命名规范：

不要起中文
尽量使用英文单词，或者拼音
header-left-main或者header_left_main或者headerLeftMain（驼峰命名法）
支持多重类名

2.复合选择器

/* 后代选择器 */
        body a{
            color: brown;
        }
        div div p a{

        }
        /* 子代选择器 */
        body>a{
            color: violet;
        }
        /* 交集选择器 */
        span.qq{
            color: yellowgreen;
        }
        /* 并集选择器 */
        div,p{
            font-size: 40px;
        }

3.伪目标选择器

		div :nth-child(3){  
            color: aqua;
        }
        /* 1+10=11 */
        div p:nth-of-type(3){
            color: rgb(255, 150, 127);
        }

nth-child 选择第n个标签，以第一个标签为一类

nth-of-type 选择第n个标签，以每一种标签为一类

4.使用外部样式表

创建一个 .css 的文件，将其导入.html文件

css文件中仅有选择器和属性

html导入css文件需加入语句

<!-- 引入外部文件资源 -->
    <link rel="stylesheet" href="../样式/style.css">
<!-- 样式设置优先级：
        行内样式优先级最高，内部样式，外部样式

        选择器优先级：*选择器<标签选择器<类选择器<id选择器
        0   1   10  100
        伪目标选择器 10
    -->

5. 伪类选择器

关键词 — :hover

实现鼠标悬停的样式与普通样式的变化

代码如下

		span{
            color: green;
        }
        /* 当鼠标悬停于span标签上方时，字体颜色变成黑色 */
        span:hover{
            color: black;
            background-color: aquamarine;
        }

使超链接在鼠标悬停时消去下划线

		div{
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
        }
        /* 当鼠标悬停在div上的时候，div内部的a标签设置的样式 */
        div:hover a{
            /* 去掉下划线 */
            text-decoration: none;
        }

第三部分

1.常用文本样式的属性

			height: 100px;
            /* 常用的文本属性设置 */
            background-color: rgba(192, 192, 192, 0.522);
            /* 行高 */
            line-height: 100px;
            /* 字体颜色 */
            color: rgba(115, 53, 203, 0.5);
            color: #474747;
            /* 字体大小 */
            font-size: 30px;
            /* 字体粗细设置：100-900，整百取值，400和正常一样 */
            font-weight: 400;
            /* 字体 */
            font-family: 宋体;
            /* 设置文字水平对齐 */
            /* text-align:center; */
            /* 设置文本的划线,支持多种划线，取值用空格隔开 */
            /* text-decoration:line-through underline; */
            /* 文字阴影 
                影子偏移遵循元素的坐标系方向，水平向右为正，向下为正
            */
            text-shadow: 5px 5px 4px black;
            /* 盒子阴影 
                水平偏移量 垂直偏移量 模糊度 影子的缩放 影子的颜色
            影子颜色不设置时会默认跟随字体颜色*/
            box-shadow: 10px 10px 10px 35px;

2.背景的属性设置

			width: 300px;height: 300px;
            /* 背景颜色 */
            background-color: yellow;
            /* 背景图片 
                默认无限重复平铺
            */
            background-image: url(../img/logo.png);
            /* 背景图片的尺寸 */
            /* background-size: 100%; */
            /* 设置是否重复 */
            background-repeat: no-repeat;
            /* 背景的位置  设置一个值时，y轴上背景图片的中心居中*/
            background-position: 50%;

第四部分

1.盒子模型概念

可以利用 *{padding/margin} 来消除浏览器默认的边距

其余盒子相关的外边距/内边距/边框属性设置如下

<style>
       *{
           padding: 0;margin: 0;
       }
       div{
           height: 200px;
           width: 200px;
           background-color: violet;
           /* 外边距 可以分开设置四边取值*/
           /* margin: 60px; */
           margin-top: 20px;
           margin-bottom: 40px;
           /* 内边距 */
           padding: 20px;
           padding-left: 30px;
           /* 边框 */
           border: 10px solid ;
           /* 
           标准盒模型概念：content（内容）、padding（内边距）、border（边框）、margin（外边距）
           元素的实际大小=设定的宽高+内边距+边框 */
           /* 两个盒子之间上下相邻的外边距会重叠在一起，表现为那个更大的 */
       }
   </style>

2.转换元素的类型–行内/块级

主要用到属性为display

参数有以下：

		    display: inline-block; //同时具有行内和块级的属性
            display: inline;//行内
            display: block;//块级

3. 嵌套时外边距溢出

当一个块级元素嵌套另一个块级元素时，

若父级元素没有设置

边框（border: 2px solid;）

内边距(padding: 20px)

则

内部元素的外边框会溢出

AO_AEO

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录