【HTML+CSS】静态网页制作-带你快速入门（更新中。。。）

最新推荐文章于 2024-05-21 22:25:10 发布

凡菲儿

最新推荐文章于 2024-05-21 22:25:10 发布

阅读量1.6k

点赞数 38

文章标签： html css 前端

本文链接：https://blog.csdn.net/m0_44965777/article/details/136585934

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
一、工具
二、HTML基础
三、CSS基础
- 1.样式表
- 2.选择器

前言

环境：win11 64位
工具：Vscode

在这里插入图片描述

提示：以下是本篇文章正文内容，下面案例可供参考

一、工具

安装：官网链接
在这里插入图片描述

需要安装两个扩展
在这里插入图片描述

二、HTML基础

1.文本格式化

<!DOCTYPE html>
<html lang="en">
<head>
    <!--开始标签-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初始html</title>
</head>
<body>
    <!--标题标签 h1-h6 标题独占一行-->
    <h1>第一标题</h1>
    <h2>第二标题</h2>
    <h3>第二标题</h3>
    <!--段落标签 p 一组p标签内独占一行 双标签-->
    <p>shift+alt+↓  快速复制一行</p>
    <p>ctrl+/  注释</p>
    <!--换行 br 单标签-->
    <br>
    <!-- 水平线 hr 单标签-->
    <hr>
    <!-- 字体样式标签 strong b加粗  em i斜体 -->
    <p>比亚迪王朝网销售事业部总经理路天表示，
        开年<b>电比油低</b>的<em>市场战略</em>确实是很震撼，“
        <strong>但我觉得，仅靠电比油低还不够颠覆！加速主流中高端市场油转电，
        王朝双旗舰汉唐还有独门杀手锏！</strong>”
    </p>
    <!-- 特殊符号 -->
    <!-- &nbsp;空格 &gt;大于号（>） &lt;小于号 &quot;引号 &copy;版权符号 -->
    <p>&quot;仅靠&nbsp;&nbsp;电比油低&gt;还不够颠覆！加速&lt;主流中高端市场油转电，
        王朝双旗舰汉唐还有独门杀手锏！&quot;</p>
    &copy;2013-2025版权所有
    <!-- sub下标字 sup上标字 del删除字 -->
    <p>综合<sub>IT之家</sub>此前报道，本月<del>比亚迪</del>已经陆续推出了多款“荣耀版”车型，包括售价 7.98 万元的秦 PLUS 荣耀版和驱逐舰 05 荣耀版，以及售价 9.98 万元的海豚荣耀版，多为紧凑型车。</p>
    <br>
</body>
</html>

2.元素标签

标签可以分为两类
块级元素 元素独占一行可以设置宽高 h1-h2 p ul li ol li dl dt dd table tr
行内元素 元素不独占一行不可以设置宽高 strong b em i s a span s img 表单元素
行内块 元素不独占一行可以设置宽高 img

标签的写法
单标签只有开始标签，没有结束标签
<单标签>
双标签有开始有结束
<双标签></双标签结束>

路径
相对路径 ./同级 …/上级 …/…/上上级
image\img.png同级文件夹下
绝对路径本地路径/网站地址

 	<!--src:图片地址
        alt:当图片无法加载出来时显示的内容 
        title:鼠标悬停时显示
        width:宽度（单位为像素px）
        height：高度-->
        <img src="../1.webp" alt="图片暂未加载 " title="汽车" width="200" height="300">
        
        <!-- 链接标签 -->
        <!-- href：链接路径  本地/外部链接都可以
            taget：属性 _blank新开一个页面 _self本页面打开（默认）  -->
        <a href="https://www.baidu.com" target="_blank">百度</a>
        <a href="1.文本格式化.html">文本格式化</a>

3.a标签的跳转

4.列表和表格

5.媒体元素

三、CSS基础

1.样式表

就近原则：行内样式 > 内部样式 > 外部样式
行内样式：

    <p style="color: blue;">
        ddddd
    </p>

内部样式 ：
在head中添加style

    <!-- 内部样式 -->
    <style>
        p{
            color: #e37f7f;
        }
    </style>

外部样式：
引入：写在head中
先加载css再加载html，推荐使用

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

导入：写在style中
先加载html再加载css，css2.1特有，不太推荐使用

    <style>
        /* 导入 先加载html再加载css，css2.1特有 */
        @import url('./css');
    </style>

2.选择器

基本选择器：	执行时有权重

标签 li	1
类名.list	10
id #box	100（优先执行）

    <style>
        /* 标签 li 类名.list  id #box  */
        li{
            color: #ee3030;
            /* 文字大小 默认16px 最小为12px */
            font-size: 14px;
        }
        .list{
            /* !important将样式升为最高级，慎重使用 */
            color: #1e8779 !important;
        }
        #box{
            color: #252191;
        }
    </style>

层次选择器
后代 E F
子代 E>F
相邻兄弟 E+F
通用兄弟 E~F
在这里插入图片描述
结构伪类选择器
其他元素会占位置
li:first-child 作为父元素的第一个子元素的li
li:last-child li元素中的最后一个
li:nth-child(3) li元素中的第三个
其他元素不会占位置
li:first-of-type 父元素内具有指定类型的第一个li
li:last-of-type
li:nth-of-type(4)
在这里插入图片描述

属性选择器
    li[class]       具有class属性的li元素
    li[class=box]   class属性中=box的li元素
    li[class^=box]  class属性中以box开头的li元素
    li[class$=box]  class属性中以box结尾的li元素
    li[class*=box]  class属性中含有box的li元素

在这里插入图片描述