前端基础入门（html+css+详）

html：样式，css：结构，js：行为（动态效果和算法）

一.HTML入门

<!DOCTYPE html>
<!--使用HTML5的标准进行文档解析 -->
<html lang="en"><!--跟标签，平时不做修改-->
<head><!--引入与网页相关的描述及配置信息-->
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width:100px;
            height: 20px;
            color: #c70012;
            background-color: aqua;
        }
    </style>
</head>
<body>
<!--正文-->
<div>海绵hong</div>
</body>
</html>

1.块标签：

（特点：独占一行，默认高度占满父级，高度为0，子级内容撑开高度）

div：区域标签没有任何语义，可以做任何的事情（你想让他是啥，他就可以是啥）

h1-h6：标题标签，h1（大标签，一个页面只能写一次）

                            h2（副标题，建议不要超过八个）

                            h3（小标题，没有个数限制）

                            h4-h6（小内容）

p：段落标签（代表一个段落）

列表：ul，ol，li ul(无序排列)，ol（有序排列）li（列表项配合ul和ol使用有奇效）

<ul>
    <li>海绵hong</li>
    <li>好好学前端</li>
    <li>找个好工作</li>
</ul>

<ol>
    <li>海绵hong</li>
    <li>好好学前端</li>
    <li>找个好工作</li>
</ol>

H5新增标签：article：代表文章的区域

                    nav导航栏

                    header：头部信息

                    aside:侧边栏

                    section：区域的意思（文章中替代div）

                    footer：底部信息

2.行标签

特点：

一个个相互跟着显示，直到遇到父级边框换下一行；
无法设置高度和宽度，只能随字体高度和宽度（文本内容撑开）；
不支持上下外边距（margin-top和margin-bottom没有效果）
不正常显示上下内边距（可能会覆盖其他文本）
代码中的换行会解析（在显示中有间隙）

span：和div一样被经常使用（没有语义）

a：代表超链接（自带href代表超链接，target打开方式（默认_self:在当前页面显示覆盖这个页面，改为_blank则会显示另外一个也米娜打开链接））

em（or）i：倾斜，多使用em，减少被爬虫

strong（or）b：加粗，多使用strong，减少被爬虫

sub：下角标

sup：上角标（写次方的时候的次方）

<p>3<sup>2</sup></p><br>
<p>O<sub>2</sub></p>

3.行块标签

特点:

同排序跟显示，遇到父级边界换行
没有宽高的时候内容撑开宽高
换行被解析src:资源路径

img（图片）:

```
    src:资源路径
```

    title:鼠标悬停时的提示文本

    alt:图片不能正常显示的提示文本

特点：只给宽度或高度，会等比例变化

button：标签定义一个按钮。

4.行块标签的互换

display：inline（行）

            block（块）

<head><!--引入与网页相关的描述及配置信息-->
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    span{
        display: block;
    }

    </style>
</head>
<body>
<span>1</span>
<span>2</span>
<span>3</span>
</body>

span行标签变块标签

二.css（网络的样式）

内部样式：

<style type="text/css">
        标签名称{
            属性名称: 属性对应的值;
            ...
        }
</style>

注意点

style标签必须写在head标签的开始标签和结束标签之间。
style标签中的type属性可以不用写, 默认就是type=“text/css”
设置样式时必须按照固定的格式来设置。key: value；其中:不能省略, 分号大多数情况下也不能省略(当有多个属性时, 最后一个可以省略)

外部样式

    外部样式表是最理想的CSS引用方式，在实际开发当中，为了提升网站的性能和维护性，一般都是使用外部样式表。所谓的“外部样式表”，就是把CSS代码和HTML代码都单独放在不同文件中，然后在HTML文档中使用link标签来引用CSS样式表。 当样式需要被应用到多个页面时，外部样式表是最理想的选择。使用样式表，你就可以通过更改一个CSS文件来改变整个网站的外观。 外部样式表在单独文件中定义，并且在标签对中使用link标签来引用

        <link rel="stylesheet" href="../css/text01.css">

内联样式

<p style="color: #c70012">hong</p>

背景色

width:宽度

height：高度

background-color：三种方式：1.直接单词：例如：red

                                               2.rgba（代表黄绿蓝和透明度）：例如：rgba（255，0，0，0）黄色，a的范围是0到1其他的为0到255

                                              3.十六进制：例如：#ff000红

背景图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
        <link rel="stylesheet" href="../css/text01.css">
    <style>
        img{
            width: 500px;
        }
div{
    width: 800px;
    height: 450px;
    background-color: #c70012;
    background-image:url("../download.jpg");
    background-size: 310px,275px;
    background-repeat: no-repeat;/*取消重复&*/

}
    </style>
</head>
<body>
<div>海绵hong</div>

<img src="../download.jpg" /></body>
</html>

     如果没有**background-repeat: no-repeat;//取消重复**图片背景就会平铺

background-size: auto,100px;/*只想给高度可以用auto*/

    /*background-size: contain;//高度占满父级*/
      background-size: cover;/*宽度度占满父级*/

    background-position:center,center ;/*可以是center，left，right，top这些方位词，也可以是长度（从图片左上角为原点，x和y的距离）*/

文本

font-size：字号大小
属性值了可以使用相对长度单位em，推荐使用像素单位px。

注意：em：是相对单位，1em=父级标签字体大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            font-size: 20px;
        }
    p{
        font-size: 2em;
    }

    </style>
</head>
<body>
<p>海绵hong</p>
</body>
</html>

            因此海绵hong是40px

font-weight: 字体粗细
属性值默认normal，可以设置加粗bold,更粗bolder，或者100,200···

font-family:字体
属性值通常可以设置为黑体、微软雅黑、宋体···

text-align: 文本对齐方式
属性值默认left左对齐，可以设置为center居中，也可设置right右对齐。

text-indent:首行缩进（2em最合适）
属性值可以为不停单位的数值，em字符宽度的倍数，或者相对浏览器的百分比，允许使用负值。

font-style:字体风格
属性值默认为normal，可以设置xieti 样式italic,或者oblique。

letter-spacing:字体间距

word-spacing：单词间距

text-decoration:修饰线
属性值默认是none，可以设置下划线underline，删除线line-through（从中间穿过），上划线不常用。

text-transform：大小写

属性值是uppercase（全部变成大写），lowerase（全部变成小写），capitalize首字母进行大写

font:
复合属性，font:font-style font-weight font-size/line-height font-family
前两个属性可以省略或者调换位置，后面的两个都不可以。

line-height：行间距
单位通常使用px,em或者百分比。1）如果是子标签是男标签，行高可以撑起子标签的高度。2）如果是子标签是女标签，行高不能撑起子标签的高度

color:文本颜色
属性值可以是十六进制表示颜色，或者英文单词，或者用rgb表示。

常用选择器

通配符选择器

（1）作用

    给当前界面上所有的标签设置属性

（2）格式

*{
    属性:值;
}

类选择器（class）

    可是让同一个标签有不同的样式（根据指定的类名称找到对应的标签, 然后设置属性）

.类名{
    属性:值;
}

注意：

在同一个界面中class的名称是可以重复的
类名的命名规范和id名称的命名规范一样
在HTML中每个标签可以同时绑定多个类名

id选择器

id属性被赋予了标识页面元素的唯一身份。如果一个页面出现了多个相同id属性取值，css选择器或者JavaScript就会因为无法分辨要控制的元素而最终报错。

#id名称{
    属性:值;
}

一个id名在同一个html文件只能出现一次

后代选择器

当我们的标签嵌套比较深之后，我们在写一些东西的时候使用后代选择器比较方便

找到指定标签的所有特定的后代标签, 设置属性（就是标签里面的标签，可以单独设置属性）

写的越具体精准度就越高

标签名称1 标签名称2{
    属性:值;
}

后代选择器必须用空格隔开
后代不仅仅是儿子, 也包括孙子/重孙子, 只要最终是放到指定标签中的都是后代

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div ul li p{
            color: red;
        }
    </style>
</head>
<body>
<div>
    <ul>
        <li>
            <p>我是段落</p> 
        </li>
        <li>
            <p>我是段落</p> 
        </li>
    </ul>
</div>
</body>
</html>

群组选择器

一选选一群

标签1，标签2{
属性
}

可以是多个标签，标签内的样式都一样

子代选择器

找到指定标签中所有特定的直接子元素, 然后设置属性（只有子代的样式会发生变化和后代选择器不同）

标签名称1>标签名称2{
    属性:值;
}

子元素选择器之间需要用>符号连接, 并且不能有空格
子元素选择器只会查找儿子, 不会查找其他被嵌套的标签

标签： html5 css

本文转载自: https://blog.csdn.net/weixin_54107527/article/details/123752965
版权归原作者 海绵hong 所有，如有侵权，请联系我们删除。