1.HTML+CSS初级认知

最新推荐文章于 2024-11-03 20:03:09 发布

在代码中挣扎的小白

最新推荐文章于 2024-11-03 20:03:09 发布

阅读量148

点赞数 2

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

本文链接：https://blog.csdn.net/m0_53285346/article/details/119889394

版权

初级前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一.准备

软件：Visual Studio Code

可选择下载中文包，把文字变中文↓

二.如何创建和运行一个页面

1.先选择一个文件夹，建议新建一个空文件夹

2.新建文件

3.取名，后面加.html

4.输入一个英文的感叹号，然后回车会自动生成HTML格式的文件

5.安装

6.右键点击如图所示即可运行

7.注意如果更改了内容，没有保存浏览器不会自动更新，可设置为自动更新

三、页面理解

从下面内容开始前端基础的学习，在结尾部分会有实战教学，什么位置怎么写都会有，所以现在只需认真阅读即可。

四、标签

1.什么是标签

你所看到的用<>括起来的就是标签，通常由<标签名>开始，</标签名>结束，部分标签可直接</标签名>表示

2.常用标签

h1 - h6 ：大标题h1一个页面用一次 p ：段落 br ：换行

div : 区块 span : 一般用来给一段文字中制定的文字添加特殊样式 b :加粗 i : 文字倾斜

a:链接

img:图片

ol:有序列表

ul:无序列表

五、CSS

1.什么是css

css（Cascading style sheets）是层叠样式表
用来给网页设置样式（颜色、大小、位置等）

2、css的三种引入方式

1)、行内样式（写在标签行里）：通过标签的style属性添加样式
样式的作用范围只有当前这一个标签，不可复用，会产生大量的冗余代码
不符合结构和表现相分离的原则

    <div style="width: 100px; height: 100px; background-color: red;"> </div>

2）、内嵌样式（写在style标签里）：在head标签里面添加style标签，在style标签之间写入css样式语法

    <head>

        <style>
            h2{
                width:100px;
                height:100px;
                background-color:red;
            }
        </style>
    </head>

3)、外链样式（写在别的文件里）：在head标签里面添加link标签，通过link标签的href属性引入.css的文件，把css样式写到.css文件中

    <head>

        <link rel="stylesheet" href="样式表的相对路径">
    </head>

css的基本语法

css样式表语法由选择器和一组或多组样式声明组成
选择器就是用来定位到需要添加样式的标签的符号
每一条声明由属性名和值组成

    选择器{
        声明1;
        声明2;
        ...
    }
    div{
        width:100px;
        height:100px;
    }

基本选择器

1）、通配符选择器（*）

选择所有的标签
通常用来去除页面上自带的内外边距

     *{
        margin: 0;
        padding: 0;
     }

2)、标签选择器（元素选择器）

把标签名作为选择器

    div{ .... }
    p{ ... }

3)、类选择器

把标签的类名作为选择器
标签的类名可以设置多个，用词列表方式定义，单词之间用空格隔开
不同的标签可以设置相同的类名
类名命名规则：
- 可以包含数字、字母、下划线_、连字符-
- 不能以数字开头
- 建议使用英文单词

    .box{
        width:100px;
        height:100px;
    }
    .red{
        background-color:red;
    }

    <div class="box red"></div>

4）、ID选择器

把标签的id名称作为选择器
id具有唯一性，一个页面中同一个id名称只能使用一次

    #box{ ... }

    <div id="box"></div>

文字相关样式

1、text系列
1)、text-align: 设置文本对齐方式
- left ：左对齐
- center:居中对齐
- right:右对齐

    p{
        text-align:center;
    }

2）、text-indent:设置首行缩进
- 2em; 缩进两个字

    p{
        text-indent:2em;
    }

3）、text-decoration: 设置文本的修饰
- none:没有修饰
- underline :下划线
- overline : 上划线
- line-through : 删除线

    p{
        text-decoration:underline;
    }

4）、color: 设置文本颜色

    p{
        color:red;
    }

2、font系列 1）、font-size : 设置字体尺寸 2）、font-weight: 设置字体是否加粗
- bold : 加粗
- normal: 正常 3）、font-style:设置字体是否斜体
- italic: 斜体
- normal : 正常 4）、line-height: 设置文字的行高
- 数字：表示字体的倍数
```
    font-size:20px;
    line-height:40px;
    line-height:2;  -- > 40px
```
- 行高指的是文字和前后的空间总共占据的高度，行高越大，行间距越大
- 特殊用法：单行文本垂直居中，把line-height设置为height相同的值 5）、font-family:设置字体的族类
```
    font-family:"宋体";
    font-family: "Helvetica Neue","Helvetica,Arial","Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei","sans-serif";
```
6)、font : 字体系列属性的简写
- 简写属性值顺序不能随意调整
- 至少包含font-size和font-family两个值
```
    font: italic bold 20px/2 "宋体";
```

一、标签分类

1、块级标签 (p、div、h1-h6、ul 、ol 、li、 dl 、dt 、dd 、hr 、form)

独占一行
宽度默认占满父级，高度由内容撑开，行高可以撑开盒子高度
可以设置宽高属性
可以设置所有的盒模型属性（内外边距、边框。。）

2、行内标签 (span、a、i、em、b、strong、sub、sup、del、label)

不会独占一行，从左到右依次排列
默认宽度由内容撑开，高度只能由文字的字体大小撑开，行高无法撑开高度
不能设置宽高属性
水平方向的盒模型属性可以设置，垂直方向不能设置（margin、padding、border）

3、行内块级标签(img、input、textarea、button、select)

不会独占一行，从左到右依次排列
宽度和高度由内容撑开
可以设置宽高属性
可以设置所有的盒模型属性（不能使用margin:0 auto;居中）

标签的类型转换

1、 display:block; 块级
2、 display:inline; 行内
3、 display:inline-block; 行内块
4、 display:none; 隐藏元素

二、css三大特性

1、层叠性

指的是浏览器处理样式冲突的能力，如果样式不冲突不会层叠，如果冲突就层叠，后定义的生效（白话：定义div标签背景为蓝色，id是1的标签文字是红色，那id是1的div标签同时拥有两种样式效果）

2、优先级

    选择器     权值
      *         0
      标签      1
      类，伪类   10
      ID        100
      行内      1000

选择器的权值越大，优先级越高
复合选择器的权值把组成这个复合选择器的基本选择器权值相加，特殊：群组选择器单个计算（不能提升选择器权重）

（白话：设置相同的样式，优先显示优先级高的那个）

3、继承性

css样式中有一部分属性默认会从父级标签上继承下来，比如font系列、text系列样式、list-style
a标签的颜色和下划线默认不继承，需要选中a标签才能修改
input标签的font-family不会自动继承，如果需要继承 font-family:inherit;

六、实战例子

1.有图片的网页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>中国万岁</h2>
    <p style="text-indent: 2em;">勿忘国耻，振兴中华</p>
    <div style="text-align: center;">
        <img src="img/20191105013330844.png"  width="600"> <br>
        图片名称
    </div>
</body>
</html>

讲解：h2标签一般用作标题，自带字体加粗样式，h后面的数字越小标题越大。

p标签一般用于文字段落，行内样式写在style=""里，例子的样式为首行缩进。

div是一个块级标签，它的样式为文字居中，在此div里的文本内容都会居中显示

img是图片标签，src设置图片地址，例子里的图片是img文件夹下的名叫20191105013330844.png的图片，width设置宽度为600px

br换行