HTML标签、CSS基础

ddihan

已于 2023-04-01 11:28:48 修改

阅读量1k

点赞数 1

文章标签： html css 前端

于 2023-03-31 13:49:40 首次发布

本文链接：https://blog.csdn.net/weixin_73972399/article/details/129871034

版权

2.外联式－－CSS写在单独的.css文件中

3.行内式－－CSS直接写在需要美化、变化的标签内

一、什么是标签

1.HTML骨架

①快速生成骨架

在上一个博客，作者已经教给大家安装VScode，我们在使用vscode时打入（！+回车）即可自动生成HTML骨架，代码效果如下

<!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>
</body>
</html>

②骨架特点

例：<html>开始

</html>结束

2.标签的结构

3.标签的两种关系

由图片，可以生动形象的看出父子关系是一种包含关系，里面的标签在外面的标签作用下起作用。

而兄弟关系则并列存在，互不干扰。

二、常用标签

1.排版标签

如：h1,h2,h3,h4,h5,h6（1到6级标签）,p（段落）,br（换行）,hr（水平线）

<!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>
    <h1>我是一级标题</h1>
    <h2>我是二级标题</h2>
    <h3>我是三级标题</h3>
    <h4>我是四级标题</h4>
    <h5>我是五级标题</h5>
    <p>我是段落标签<br>我也是这个段落标签里的，但是前面有换行符</p>
</body>
</html>

大致效果展示：

我是一级标题

我是二级标题

我是三级标题

我是段落标签
我是这个段落标签里的，但是前面有换行符

2.文本格式化标签

列表标签

有序列表和无序列表

<ul>
        <li>我是无序列表</li>
    </ul>
    <ol>
        <li>我是有序列表</li>
    </ol>

注：li只能放在ul或ol里

3.语义化标签

无语义化标签

div----独占一行

span--一行多个

有语义化标签

4.媒体标签

视频

<video src="./video.mp4" controls></video>

音频

<audio src="./misic.mp3" controls></audio>

图片

<img src="picture.jpg" alt="哎呦，图片怎么不见了“>
//alt表示图片未载入时替换的文字

5.链接标签

<a href="https://www.bilibili.com">跳转至B站</a>

空链接："#"如果还不知道要跳转到哪里先这么写

6.表格标签

代码练习

<table border="1">
        <caption><strong>学生成绩单</strong></caption>
        <tr>
            <th>姓名</th>
            <th>成绩</th>
            <th>评语</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>100</td>
            <td>真棒</td>
        </tr>
    </table>

效果展示

7.表单标签

input系列标签及按钮

button按钮

selsct下拉菜单

<select>
        <option>唱</option>
        <option>跳</option>
        <option>rap</option>
    </select>

三、CSS基础

1.CSS发展历史

CSS（Cascading Style Sheets，层叠样式表）是一种将表示样式应用到标记的系统。CSS以设计、改变其HTML页面的样式而知名，并使用于Web和其他媒介，如XML文档中。1996年12月W3C推出了CSS规范的第一个版本，1998年W3C发布了CSS的第二个版本即CSS2.0,2001年5月W3C开始进行CSS3标准的制定，到目前为止该标准还没有最终定稿

2.CSS作用

在上个博客已经提到，CSS起到的是加工润色的作用，让网页看起来更有设计感，优美化。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

3.CSS引用方式

1.内嵌式－－CSS写在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>
        li{
            list-style-type: none;
        }
    </style>
</head>

2.外联式－－CSS写在单独的.css文件中

css文件代码

关联方式代码

<!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>
    <link rel="stylesheet" href="./my.css">
    
</head>

3.行内式－－CSS直接写在需要美化、变化的标签内

<body>
    <div style="color: blueviolet;">行内式</div>
</body>

4.CSS三大特性

1.层叠性

相同选择器给设置相同的样式，此时一个相同的样式就会覆盖（层叠）另一个冲突的样式，层叠性主要解决样式冲突问题。

层叠性原则：样式冲突遵循的原则就是究竟原则，那个样式离结构近，就执行那那个样式。样式不冲突，不会叠加。

<!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>
        div {
            font-size: 18px;
        }
        
        div {
            color: pink;
        }
    </style>
</head>
 
<body>
    <div>C罗</div>
</body>
 
</html>

由层叠性，网页则会显示18像素大小的“C罗”二字，而不会变颜色

2.继承性

子标签会继承父标签设定的某些css样式

<!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>
        div {
            color: pink;
            font-size: 18px;
        }
        /* div {
            color: pink;
        } */
    </style>
</head>
 
<body>
    <div>
        <p>C罗</p >
    </div>
</body>
 
</html>

由继承性，<p>是<div>的子标签，所以在p标签内的“C罗”二字，会变成18像素、粉色的字样