HTML+CSS系列教程导学

已于 2022-12-02 17:26:37 修改
阅读量5.7k 收藏 26
点赞数 33
文章标签： css html 前端
于 2022-10-20 21:48:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/l2298202515/article/details/127395540
版权

前端学习

引子

1.什么是html css

①简介

html与css都是网站开发的编程语言
html是结构 css是表面
浏览器解析代码后的样子就是我们看到的网页，可通过鼠标右键查看网页源代码

②介绍

什么是HTML

㈠HTML
HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将
网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命
令组成的 描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。HTML
的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上
的文档格式 统一， 使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组
成的描述性文本， HTML命令可以说明文字，图形、动画、声音、表格、链接等。

什么是CSS

㈡CSS
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言
的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅
可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

③提问

如何去写代码？写到哪里呢？
使用文本文档改后缀为.html文件 或者使用vs code进行编译
随后使用相应浏览器打开使用
一个网站是由多个网页组成的。每一个网页都是一个.html文件

2.VS code

①下载

VS code下载地址

②如何安装插件

㈠中文
首先打开vscode ，并按快捷键“Ctrl+Shift+P”；然后输入“configure language”，并回车；
最后选择简体中文安装即可


㈡插件

③编译器的基本使用

ctrl  +  s   ：  保存
ctrl  +  a   ：  全选
ctrl  +  x   ：  剪切
ctrl  +  c   ：  复制
ctrl  +  v   :   粘贴
ctrl  +  z   :   撤销
dtrl  +  y   :   前进
shift +  end :   从头选择一行
shift +  home:   从尾部选择一行
shift + alt + ↓: 快速复制一行
alt   +  ↑ 或 ↓：快速移动一行
tab          ：向后缩进
tab  + shift ：向前缩进
alt  +  鼠标左键：多光标
ctrl +  d：选择相同元素的下一个

3.浏览器

常见浏览器
1Microsoft Edge下载
2chrome下载
3夸克浏览器
4搜狗浏览器
5QQ浏览器

4.深入了解网站开发

①企业结构

㈠UI设计师：设计稿

㈡web前端开发工程师（H5开发）
设计稿-----》代码
数据库的数据-----》显示到页面
HTML+CSS
HTML：结构
CSS：样式

㈢web后端开发工程师

②Web三大核心技术

㈢Javascript
JavaScript，通常缩写为JS，是一种符合ECMAScript规范的解释性编程语言。JavaScript 是
高级的，通常是即时编译的和多范式的。它具有大括号语法，动态类型，基于原型的对象定向和
一流的函数。

壹、HTML+CSS系列教程1.拨云见日

（一）.Web三大核心技术

一.HTML

网页结构

介绍

网站的编程语言，浏览器将代码解析后的样子就是我们所见的网站 一个网页是由N多个网页组成的
，每一个网页都是一个 .html文件电视剧都是.mp4文件写.html文件由新建文档改后缀完成HTML
的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文
档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML令组成的描述性文
本 ，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

HTML基本结构和属性

HTML：超文本 标记 语言
超文本：文本内容 + 非文本内容 （图片 视频 音频等）
标记：<单词>
语言：编程语言
标记也叫标签：



写法分两种
单标签

双标签

创建标签的快捷键：单词+tab

标签可以上下排列也可以组合嵌套

标签的属性：来修饰标签的，设置当前标签的一些功能

一般网页格式

<header>hellow world</header>


<footer>hi HTML</footer>

在这里插入图片描述

标签可以上下排列也可以组合嵌套
使用嵌套将多个网页嵌套为网站

<header>
    hellow world
    <div>
        aaaa
        <div>bbb</div>
    </div>
    <div>aaa</div>
    <div>aaa</div>
    <div>aaa</div>

</header>


<footer>hi HTML</footer>

在这里插入图片描述

HTML标签元素周期表

标签的属性，设置当前标签的一些功能

<header title="hellow">hellow world</header>


<footer title="hi">hi HTML</footer>

在这里插入图片描述

超文本标记语言（HyperText Markup Language）,标准通用标记语言下的一个应用。是网页制作
必须的编程语言
1.HTML的初始代码

每一个html文件都有初始代码，初始代码就是你无论写什么样的网页，这些代码都是必须的，这就是初始代码

1.每个.html文件都有初始代码，要符合html文件的规范写法
   ！+tab ：快速创建.html的初始代码

<!DOCTYPE html>                          <!--文档声明：告诉浏览器这是html文件-->
<html lang="en">                         <!--html文件的最外层标签：包裹所有html标签代码-->
    <head>                               <!--lang="en"表示这是一个英文网站-->
        <meta charset="UFT-8">           <!--元信息：是编写网页中的一些赋值信息charset="UFT-8"让网页不出现乱码的情况-->
        <title>Document</title>          <!--设置网页的标题-->
    </head>
    <body>
       显示网页内容的区域
    </body>
</html>>

head部分
在这里插入图片描述

body部分
在这里插入图片描述

2.HTML注释

㈠写法：

<！--注释的内容-->
注释的代码，只在文件中看得到，但是浏览器显示不出来

㈡意义：

1.把暂时不用的代码注释起来，方便以后使用
2.对于开发人员进行提示

㈢快捷添加注释与删除注释：

添加：ctrl  +  /
删除：ctrl  +  alt  +  a
3.HTML语义化

所谓MTHL语义化指的是，根据网页中内容的结构，选择适合的HTML标签进行编写。

好处：
1.在没有CSS的情况下，页面也能呈现出很好的内容结构
2.有利于SEO，让搜索引擎爬虫更好地理解网页
3.方便其他设备解析（例如屏幕阅读、盲人阅读器等）
4.便于团队开发与维护
4.标题与段落

标题 ->双标签：
<>标题</>
以hx作为<>中的标签符

由h1到h6标题大小依次减小

在一个网页中，h1标题最重要，并且一次只能出现一次h1标签
h2及后可以出现多次
h5 h6标签在网页中不常使用

段落->双标签
<>段落</>

以p作为<>中的标签符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
</head>
<body>
    <!-- <h1>标题</h1>
    <h2>标题</h2>
    <h3>标题</h3>
    <h4>标题</h4>
    <h5>标题</h5>
    <h6>标题</h6>
    <p>这是一个段落</p> -->
    <h1>我学习了HTML</h1>
    <p>我学习html能够自己制作网页，然后aisdfhoahsfoajspfjodaihvo
        asfmoiajfoiefjoiwjrpwefowjefpqwkefpqokefp
        dfopwjefpqwekfpokqpefkpdfmpoewfpqkepfokqpeofkoadjfopejfpo
    </p>
    <h2>我学习CSS</h2>
    <p>然后我又wuqooiqejfoiqjifojqeofhaodhfodsfojsidfhsdoif
        adknfoidfosdfjsoidjfoisjdfwepfosdvoiosndvomsodvmoisdjv
        dsvhiusdvosnpefjwoiejfoiwejfjoiwjeof
    </p>
</body>
</html>

5.文本修饰标签

以strong作为标签，意为强调，对文本进行加粗
以em作为标签，意为强调，文本斜体
以sub与sup为标签，sub下标文本，sup上标文本
以del与ins作为标签，del为删除文本，ins为插入文本

区别
1.写法和展示效果区别，一个加粗，一个斜体
2.strong的强调性稍弱

注：一般情况下，插入文本都是与删除文本配合使用的

<p>
<strong>strong强调文本给文本加粗</strong>
<em>em强调文本使斜体</em>
<p>
    a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>
    <!--用sup进行下角标的注释-->>
</p>
<p>
    H<sup>2</sup>O<!--用sup进行下角标的注释-->>
</p>
<p>
    促销:原价<del>300</del>，现价<ins>100</ins>.
    <!--以del进行删除表现注释/以ins进行文本下横线注释-->>
</p>
<p>
    北京著名高档百货中心<em>塞特购物中心</em>即将闭店。昨天，塞特购物中
    心总台服务人员表示<strong>“如果手里有购物卡，请尽快到店消费”</strong>。
    根据服务人员介绍，目前塞特购物中心正在进行清仓大甩卖。<del>特价电视原价
    3600</del>，
    <ins>现价清仓只要1300</ins>
</p>
</p>

在这里插入图片描述

6.图片标签与属性

img->单标签属性

scr：引入图片地址
alt：当图片出现问题时，可以出现一段提醒文字
title：图片上的提示信息
width、height：图片的大小

<!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>
    <img src="https://cn.bing.com/images/search?view=detailV2&ccid=zotn7fcm&id=12D0B0C5C81EC063F6CED5E78BD812C8D350004B&thid=OIP.zotn7fcmnkjbrT9D6swGLAAAAA&mediaurl=https%3a%2f%2fts1.cn.mm.bing.net%2fth%2fid%2fR-C.ce8b67edf7269e48dbad3f43eacc062c%3frik%3dSwBQ08gS2Ivn1Q%26riu%3dhttp%253a%252f%252fpic.downyi.com%252fupload%252f2019-4%252f2019428151446107100.jpg%26ehk%3dMqtZ6fnc8HR5r1vyFHRfXzTyoynRnCDyRNYVFUfQT6g%253d%26risl%3d%26pid%3dImgRaw%26r%3d0&exph=200&expw=200&q=%e9%b8%a1%e4%bd%a0%e5%a4%aa%e7%be%8e&simid=608012892543451571&FORM=IRPRST&ck=15881155CD3D11E2A8CB62C083BF460C&selectedIndex=16&ajaxhist=0&ajaxserp=0" 
    alt="咯咯跳舞迷死你" title="这是咱们咯咯的照片" width="500" height="500">
</body>
</html>

在这里插入图片描述

7.引入文件的地址与路径

相对路径

 .在路径中表示当前路径
 ..在路径中表示上一路径

绝对路径

表示文件的绝对位置

<!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>
        <img src="./gege.jpg" alt="123">
       <!--相对路径-->
</a>
    <img src="\代码\gege.jpg"alt="123">
    <!--绝对路径-->
</body>
</html>

在这里插入图片描述

8.跳转链接

使用a作为标签

双标签<></>
1.href：连接的地址

2.target：可以链接打开的方式，默认情况下：在当前页面打开 _self 新窗口打开

以target="_blank"改变网页打开方式

<!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>
    <a href="https://www.baidu.com/">进入百度</a>
    <a href="https://m.weibo.cn/">
    <!--点击图片进入微博-->
        <img src="./gege.jpg" alt="123">
       <!--相对路径-->
       </a>
    <img src="\代码\gege.jpg"alt="123">
    <!--绝对路径-->
</body>
</html>

在这里插入图片描述
点击第一张图片进入微博
在这里插入图片描述
3.base
以base为标签改变默认设置
使所有标签在新窗口打开

练习
第一页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=>, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="./html/second.html">转到第二页</a>
    <img src="./photo/1.jpg"alt="">
</body>
</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=>, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="./third.html">转到第三页</a>
    <img src="../photo/2.jpg"alt="">
</body>
</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>
    <a href="../first.html">返回首页</a>
    <img src="../photo/3.jpg"alt="123">
</body>
</html>

在这里插入图片描述

9.跳转锚点

页面内部进行跳转

实现一
#号 + id属性

<!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>
    <a href="#html">HTML</a>
    <a href="#css">CSS</a>
    <a href="#js">JavaScrip</a>

    <h2 id="html">HTML超文本文档标记语言</h2>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <h2 id="css">CSS层叠样式表</h2>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <h2 id="js">JS样式表</h2>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
</body>
</html>

在这里插入图片描述

实现二
#号 + name属性（name属性加给的是a属性）

<!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>
    <a href="#html">HTML</a>
    <a href="#css">CSS</a>
    <a href="#js">JavaScrip</a>

    <a name="html"></a>
    <h2>HTML超文本文档标记语言</h2>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <a name="css"></a>
    <h2>CSS层叠样式表</h2>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <a name="js"></a>
    <h2>JS样式表</h2>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
</body>
</html>

在这里插入图片描述

⒑特殊符号

1.& + 字符
2.解决冲突 左右尖括号 添加多个空格的实现
3.&lt &gt &nbsp
在这里插入图片描述

⒒无序列表

<ul、<li：列表的最外层容器、列表项
注：ul和li必须是组合出现的，他们之间不能有其他标签

1.无序列表：ul li符合嵌套规范
2.type属性：改变前面标记的样式（一般用CSS控制）

type属性
常用type属性

值描述
button 定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）。
checkbox定义复选框。
file定义输入字段和 "浏览"按钮，供文件上传。
hidden定义隐藏的输入字段。
image定义图像形式的提交按钮。
password定义密码字段。该字段中的字符被掩码。
radio定义单选按钮。
reset定义重置按钮。重置按钮会清除表单中的所有数据。
submit定义提交按钮。提交按钮会把表单数据发送到服务器。
text定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li><a href="#"><strong>真假ikun合道抗击马戏团</strong></li>
        <li><a href="#">ikun黑白两道合并</li>
        <li><a href="#">四川辣椒太辣</li>
        <li><a href="#">我真的想不出来说什么了</li>
        <li><a href="#">不改过不了审啊</a></li>

    </ul>
</body>
</html>

在这里插入图片描述

⒓有序列表

以ol与li为标签的有序列表
注：有序列表用的非常少，经常用的是无序列表，无序列表可以代替有序列表

<!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>
    <!--
        <ol type="i">
            <li>第一项</li>
            <li>第二项</li>
            <li>第三项</li>
        </ol>
    -->
    <ol>
        <li><a href="#">都说</a></li>
        <li><a href="#">我的祖国</a></li>
        <li><a href="#">夜空中最亮的星</a></li>
        <li><a href="#">父亲</a></li>
        <li><a href="#">青花瓷</a></li>
    </ol>
</body>
</html>

在这里插入图片描述

⒔定义列表

dl：定义列表
dt ：定义专业术语与名词
dd：对名词进行解释和描述
列表项需要添加标题和对标题进行描述的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=>, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <dl>
        <dt>HTML</dt>
        <dd>超文本标记语言</dd>
        <dt>CSS</dt>
        <dd>层叠样式表</dd>
        <dt>JavaScrip</dt>
        <dd>网页脚本语言</dd>
    </dl>
</body>
</html>

在这里插入图片描述

14.嵌套列表

注：列表之间可以相互嵌套形成多层级列表

<!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>
   <!--<ul>
    <li>
        四川省
        <ul>
            <li>成都</li>
            <li>德阳</li>
            <li>宜宾</li>
            <li>乐山</li>
        </ul>
    </li>
    <li>
        江苏省
        <ul>
            <li>南京</li>
            <li>扬州</li>
            <li>无锡</li>
            <li>连云港</li>
        </ul>
    </li>
    </ul>
    -->

    <!--<dl>
        <dt>中国</dt>
        <dd>
            <dl>
                <dd>辽宁省</dd>
                <dd>沈阳</dd>
                <dd>大连</dd>
                <dd>丹东</dd>
            </dl>
            <dl>
                <dt>山东省</dt>
                <dd>济南</dd>
                <dd>青岛</dd>
                <dd>烟台</dd>
            </dl>
        </dd>
        <dt>美国</dt>
        <dd>lsj</dd>
    </dl>-->
<ul>
    <li>
        小吃类
       <ul>
        <li>煮粉干</li>
        <li>拌青菜</li>
        <li>蛋炒饭</li>
        <li>煎蛋</li>
        <li>米饭</li>
       </ul>
    </li>
    <li>
        卤味类
        <ul>
            <li>鸭肠</li>
            <li>面筋</li>
            <li>牛肚</li>
            <li>猪耳朵</li>
            <li>猪头肉</li>
            <li>大肠</li>
            <li>鱿鱼</li>
        </ul>
    </li>
    <li>
        套餐类
        <ul>
            <li>卤肉筋饭</li>
            <li>猪肉肉饭</li>
            <li>猪耳朵饭</li>
            <li>卤猪脚饭</li>
            <li>卤猪舌饭</li>
        </ul>
    </li>
    <li>
        炖爆类
        <ul>
            <li>猪蹄黄豆</li>
            <li>猪肚莲子</li>
            <li>猪心枸杞</li>
            <li>羊肉枸杞</li>
            <li>牛肉枸杞</li>
        </ul>

    </li>
</ul>
<p><em>亲,20元以上可送餐哦!!</em></p>
</body>
</html>

在这里插入图片描述

15.表格标签

①table：表格的最外层容器
②tr：定义表格行
③th：定义表头
④td定义表格单元
⑤caption：定义表格标题

注：之间是有嵌套关系的，要符合嵌套规范。
（没用，但是符合语义化标准）
在一个table中tHead只能出现一次，但是tBody可以出现多次

语义化标签：tHead tBody tFood

<!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>
    <table>
        <caption>天气预报</caption>
        <tHead>
        <tr>
            <th>日期</th>
            <th>天气情况</th>
            <th>出行情况</th>
        </tr>
    </tHead>
    <tBody>
        <tr>
            <td>2022年10月23日</td>
            <th><img src="./新建文件夹/gege.jpg" alt="咯咯咯" width="300" height="200"></th>
            <td>鸡雨,不宜出门</td>
        </tr>
        <tr>
            <td>2022年10月24日</td>
            <th><img src="./链接综合练习/photo/1.jpg" alt="天气" width="200" height="300"></th>
            <td>天气晴朗,宜出门</td>
        </tr>
    </tBody>
    <tFoot>

        
    </tFoot>
    </table>
</body>

在这里插入图片描述

16.表格属性

①border:表格边框

   <table border="1">

在这里插入图片描述
加入border标签使表格出现边框

代表单元格之间的空间

<table border="1" cellpadding="30" cellspacing="30">

在这里插入图片描述
加入使表格中间距变化

②rowspan与=colspan

合并表格

rowspan合并行

<!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>
    <table border="1" cellpadding="30" cellspacing="30">
        <caption>天气预报</caption>
        <tHead>
        <tr>
            <th colspan="2">天气</th>
            <th>天气情况</th>
            <th>出行情况</th>
        </tr>
    </tHead>
    <tBody>
        <tr>
            <td>2022年10月23日</td>
            <td>白天</td>
            <th><img src="./新建文件夹/gege.jpg" alt="咯咯咯" width="300" height="200"></th>
            <td>鸡雨,不宜出门</td>
        </tr>
        <tr>
            <td>2022年10月24日</td>
            <td>白天</td>
            <th><img src="./链接综合练习/photo/1.jpg" alt="天气" width="200" height="300"></th>
            <td>天气晴朗,宜出门</td>
        </tr>
    </tBody>
    <tFoot>

        
    </tFoot>
    </table>
</body>
</html>

在这里插入图片描述

colspan合并列

<!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>
    <table border="1" cellpadding="30" cellspacing="30">
        <caption>天气预报</caption>
        <tHead>
        <tr>
            <th colspan="2">天气</th>
            <th>天气情况</th>
            <th>出行情况</th>
        </tr>
    </tHead>
    <tBody>
        <tr>
            <td rowspan="2">2022年10月23日</td>
            <td>白天</td>
            <th><img src="./新建文件夹/gege.jpg" alt="咯咯咯" width="300" height="200"></th>
            <td>鸡雨,不宜出门</td>
        </tr>
        <tr>
            <td>夜晚</td>
            <th><img src="./链接综合练习/photo/1.jpg" alt="咯咯咯" width="300" height="200"></th>
             <td>鸡雨,不宜出门</td>
        </tr>
        <tr>
            <td rowspan="2">2022年10月24日</td>
            <td>白天</td>
            <th><img src="./链接综合练习/photo/1.jpg" alt="天气" width="200" height="300"></th>
            <td>天气晴朗,宜出门</td>
        </tr>
        <tr>
            <td>白天</td>
            <th><img src="./新建文件夹/gege.jpg" alt="天气" width="200" height="300"></th>
            <td>天气晴朗,宜出门</td>
        </tr>
    </tBody>
    <tFoot>

        
    </tFoot>
    </table>
</body>
</html>

在这里插入图片描述

③align与valign

align:分为三种属性left，center，right
valign：分为三种属性top，middle，bottom

align三种属性分别使表格中的文字偏向

<tr align="rignh">

在这里插入图片描述

<tr align="center">

在这里插入图片描述

<tr align="left">

在这里插入图片描述

valign三种属性分别使表格中的文字偏向

<tr valign="top">

在这里插入图片描述

<tr valign="middle">

在这里插入图片描述

<tr valign="bottom">

在这里插入图片描述

17.表单标签

form：表单的最外层容器
input：标签用于搜集用户信息，根据不同的type属性值，展示不同的控件，如输入框、密码框、复选框等
textarea:多行文本框
select、option:下拉菜单
label：辅助表单

input标签有一个type属性，决定是声明控件
还有一些常见属性
checked、disabled、name、for…
常用type属性

在这里插入图片描述

<!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>
    <form action="">
        <h2>输入框</h2>
        <input type="text" placeholder="请输入用户名">
        <h2>密码框</h2>
        <input type="password" placeholder="请输入密码"> 
        <h2>复选框</h2>
        <input type="checkbox" checked>苹果
        <input type="checkbox">香蕉
        <input type="checkbox" disabled>葡萄
        <h2>单选框</h2>
        <input type="radio" name="me">男
        <input type="radio" name="me">女
        <h2>上传文件</h2>
        <input type="file">
        <h2>提交按钮和重置按钮</h2>
        <input type="submit">
        <input type="reset">
    </form>
</body>
</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>
<h2>多行文本框</h2>
        <textarea name="" id="" cols="30" rows="10"></textarea>
        <h2>下拉菜单</h2>
        <select name="" id="">
            <option selected disabled>请选择</option>
            <option value="">北京</option>
            <option value="">上海</option>
            <option value="">杭州</option>
        </select>
        <select name="" id="" size="3" multiple>
            <option value="">北京</option>
            <option value="">上海</option>
            <option value="">杭州</option>
        </select>
        <input type="file" multiple>

        <input type="radio" name="gender" id="man"><label for="man">男</label>
        <input type="radio" name="gender" id="woman"><label for="woman">女</label>
    </form>
</body>
</html>

在这里插入图片描述

18.表格表单组合

表格表单之间可以互相组合形成数据展示效果

<!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>
    <form action="">
        <table border="1" contenteditable="30">
            <tBody>
                <tr align="right">
                    <td rowspan="4">总体信息</td>
                    <td colspan="2">用户注册</td>
                </tr>
                <tr align="right">
                    <td>用户名</td>
                    <td><input type="text" name="" id=""
                        placeholder="请输入用户名"></td>
                </tr>
                <tr align="right">
                    <td>密码</td>
                    <td><input type="text" name="" id=""
                        placeholder="请输入密码"></td>
                </tr>
                <tr align="center">
                    <td colspan="2">
                        <input type="submit" name="" id="">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="reset">
                    </td>
                </tr>
            </tBody>
        </table>
    </form>
</body>
</html>

在这里插入图片描述

19.div与span

div：div>标签定义 HTML 文档中的分隔（DIVision）或部分（section）。div属于web前端的学习内容，其中div标签常用于组合块级元素，以便通过样式表来对这些元素进行格式化，div中还可以嵌套多层div，用来将网页分割成独立的、不同的部分，来实现王爷的规划和布局
span：用来修饰文字
div与span都是没有任何默认样式的，需要配合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>
</head>
<body>
    <div>
        <h2>
            <a href="#">[千锋教育] <span>html5</span>
                -中国数万程序员的选择-官方首页</a></h2>
                <a herf="#"><img src="./图片/10.28/未确认 548892.crdownload" alt=""></a>
                <p>千锋web前端视频教程频道为用户提供全面的前端实战开发视频教程
                    ,包含web前端基础视频教程,web前端入门视频教程,web前端高级视
                    频教程等,适合各个阶段开发人员在线学习,免费提供百 …</p>
                <a href="#">www.qfedu.com/video/html5</a>
        </h2>
    </div>
    <div>
        <h2>
            <a href="#"><span>html5</span>简介</a>
            <a href="#"><img src="./图片/10.28/下载.jpg" alt=""></a>
            <p>
                2014-10-29 · HTML5规范于2014年10月29日由万维网联盟正式
                宣布，HTML是万维网最核心的超文本标记语言。 万维网不等同于
                互联网，但它是依靠互联网运行的服务之一，万维网又简写为www，
                它可以实现在互联网的帮助下，访问由许多互 …
            </p>
            <a href="#">https://www.w3cschool.cn/html5</a>
        </h2>
    </div>
    <div>
        <a href="#"><span>HTML</span>(5) 代码规范 | 菜鸟教程</a>
        <a href="#"><img src="./图片/10.28/下载 (1).jpg" alt=""></a>
        <p>
            HTML(5) 代码规范 HTML 代码约定 很多 Web 开发人员对 HTML 的代
            码规范知之甚少。 在2000年至2010年，许多Web开发人员从 HTML 转换
            到 XHTML。 使用 XHTML 开发人员逐渐养成了比 …
        </p>
        <a href="#https://www.runoob.com/html/html5-syntax.html"></a>
    </div>
</body>
</html>

在这里插入图片描述

二.CSS

网页样式

①介绍
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的
一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以
静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化
     
②
CSS是网页的样式
1.基本语法

a.格式
选择器{属性1：值1；属性2：值2}
b.单位：
px->像素（pixel）、%->百分比
c.基础样式：
width、height、background-color
d.长度单位：

 1.px：像素
 2.%：百分比
 外容器  为 600px       当前容器50%  为  300px

e.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>
    <style>
        div{width: 100px; height: 100px; background-color: red;}
        span{background-color:blue;}
    </style>
</head>
<body>
    <div>这是一个块</div>
    <div>又是一个块</div>
    <span>这是一个内联</span>
</body>
</html>

在这里插入图片描述

2.内联样式与内部样式

内联（内行、行间）样式

在html标签上添加style属性来实现的

内部样式

在style标签内添加的样式
注：内部样式的优点，可以复用代码

区别：内部样式代码可以复用、符合W3C的规范标准，进行让结构样式分开处理

<!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{width: 100px; height: 100px; background-color: red;}
        span{background-color:blue;}
    </style>
</head>
<body>
    <div>这是一个块</div>
    <div>又是一个块</div>
    <span>这是一个内联</span>
</body>
</html>

在这里插入图片描述

3.外部样式

引入一个单独的CSS文件
link标签

rel
href

通过link标签引入外部资源，rel属性指定资源跟页面的关系，href属性资源的地址
HTML<link标签的rel属性

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

<!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">
    <link rel="stylesheet" href="./外部样式.css">
    <title>Document</title>
</head>
<body>
    <div>这是一个块</div>
</body>
</html>

在这里插入图片描述

由于@import存在一些问题而不建议使用

由link和@imprort的区别引发的问题

4.CSS中的颜色表示法

1.单词表示法：red yellow…

div{background-color：red}

在这里插入图片描述

2.十六进制表示法：
0123456789abcdem
从#000000到#ffffff

div{background-color: #000000;}

在这里插入图片描述
3.rgb三原色表示法：
rgb（255，255，255）
取值范围0~255

提取颜色的下载地址

5.CSS背景样式

background-color:背景颜色
background-image：背景图片

url（背景地址）
默认：会水平垂直地铺满背景图

background-repeat：背景图片的平铺方式

repeat-x：x轴平铺
repeat-y：y轴平铺
repeat（xy轴都进行平铺，默认值）
no-repeat：都不平铺

background-position：背景图片的位置

x y:number   单词
     x：left，center，right
     y：top，center，bottom

background-attachment：背景图片随滚动条的移动方式

scroll：默认值（背景位置是按照当前元素进行偏移的）
fixed：（背景位置是按照浏览器进行偏移的）

<!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">
    <style>
        body{height: 2000px;}
        div{width: 1440px;height: 800px;background-color: red;
        background-image: url(./gege.jpg);
        background-repeat: no-repeat;
        background-position:50% 50% ;
        background-attachment: fixed;
        }
    </style>
    <title>Document</title>
</head>
<body>
    <div></div>
</body>
</html>

在这里插入图片描述

6.边框样式

border-style:边框的样式

solid：实现
dashed：虚线
dotted：点线

border-style:边框的大小

px...

border-style：边框的颜色

red  #fff...

注：针对某一条边进行单独设置

<!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">
    <style>
        div{width: 300px;height: 300px;border-right-style:dotted ;border-right-width:10px ;
        border-right-color:red ;border-top-style:solid ;border: top width 10px;
        border-top-color:green ; }
    </style>
    <title>Document</title>
</head>
<body>
    <div></div>
</body>
</html>

在这里插入图片描述

7.边框实现三角形

颜色：transparent

<!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">
    <style>
        body{background-color: green;}
        div{width: 0px;height: 0px;
        border-top-color:transparent ;
        border-top-style: solid;
        border-top-width :30px;;
        border-right-color:red ;
        border-right-style:solid ;
        border-right-width: 30px;;
        border-bottom-color: transparent;
        border-bottom-style: solid;
        border-bottom-width :30px;;
        border-left-color: transparent;
        border-left-style:solid ;
        border-left-width :30px;;
    }
    </style>
    <title>Document</title>
</head>
<body>
    <div>
        
    </div>
</body>
</html>

在这里插入图片描述

8.CSS文字样式

font-family：字体类型
英文字体：Arail ， ‘Times New Roman’
中文文字：微软雅黑 ，宋体
中文字体的英文名称
微软雅黑：‘Microsoft YaHei’
宋体：SimSun
衬线体与非衬线体
注意事项
1.设置多字体方式
2.引号问题

<!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">
    <style>
        div{font-family:'Times New Roman' ,Simsun,微软雅黑}
    </style>
    <title>Document</title>
</head>
<body>
    <div>文字</div>
    <p>这是一段文字</p>
    <div>this is a test</div>
    <p>this is a text</p>
</body>
</html>

在这里插入图片描述

9.CSS文字样式

font-size：字体大小
默认大小：16px
写法：number（px） 单词（small large*…）不推荐使用
注：字体大小一般为偶数
在这里插入图片描述
font-weight：文字粗细
模式：正常（normal）加粗（bold）
写法：单词（normal、bold）、number（100、200…900.100到500都是正常
600到900都是加粗）

font-style：字体样式
模式：正常（normal）斜体（italic）
注：oblique也是斜体用的较少，一般了解即可
区别
1.italic所有带有倾斜字体的可以设置
2.oblique没有倾斜属性的字体也可以设置倾斜操作

<!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">
    <style>
        div{font-style:oblique;color: red;}
    </style>
    <title>Document</title>
</head>
<body>
    <div>文字</div>
    <p>这是一段文字</p>
    <div>this is a test</div>
    <p>this is a text</p>
</body>
</html>

在这里插入图片描述

10.文本修饰与文本大小写

CSS段落样式
text-decoration：文本装饰

下划线：onderline
删除线：line-through
上划线：overline
不添加任何装饰：none

注：可添加多个文本修饰

text-trasform：文本大小写

小写：lowercase
大写：uppercase
只针对首字母的大写：capitalize

<!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">
    <style>
        p{text-transform: capitalize;}
    </style>
    <title>Document</title>
</head>
<body>
    <p>名字是一个人的代号，其中还包含家长们的期盼，一般情况下，
        孩子们都不会随意更改自己的名字，毕竟改名之后，很多信息
        都要随之更改，非常的麻烦。不过也有人非要更改自己的名字，
        主要就是名字的寓意让人觉得影响不好，有些名字带有歧义，
        还有的名字带着封建思想的影子。
    </p>
    <p>
        dshvhsuid  askdgia akfd af  asfa apodkfpoa
        dshvhsuid  askdgia akfd af  asfa apodkfpoa
        4dshvhsuid  askdgia akfd af  asfa apodkfpoa
    </p>
</body>
</html>

在这里插入图片描述
text-indent：文本缩进
首行缩进
em单位：相对单位，1em永远都是跟字体相同

text-align：文本对齐方式
对齐方式：left right center justify

line-height：定义行高
什么是行高------一行文字的高度，上下边距等价
默认行高：不是固定值，是变化的，根据当前文字字体大小不断变化
取值：number（px） scale（比例值，跟文字大小）

11.文本间距与英文折行

letter-spacing：字之间的间距
word-spacing：词之间的间距（针对英文段落）

英文和数字不自动折行问题：
1、word-break：break-all；（非常强烈的折行）
2、word-wrap：break-word；（不是那么强烈的折行，会产生一些 空白区域）

<!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">
    <style>
        div{width: 800px;}
        h1{text-align: center; color:red ;}
        h2{color: blue;text-indent: 2em;}
        #p1{font-style:italic ;font-weight: bold;text-indent: 2em;}
        #p2{color: green;line-height: 30px;text-indent: 2em;}
        #p3{color: powderblue;line-height :30px ;text-indent: 2em;
            text-decoration:underline ;font-style: italic;}
        #p4{font-weight:bold;letter-spacing:10px;line-height:30px;
            text-indent:2em;color: purple;}
    </style>
    <title>Document</title>
</head>
<body>
    <h1>教师简介:<h1> 
        <h2>基本信息</h2>
            <div>
            陈川、博士、副教授、博士生导师。
            </div>
        <h2>经历</h2>
            <div>
            <p id="p1"> 2012 于中山大学数学与应用数学专业获学士学位,</p>
            <p id="p2">2016 于香港浸会大学数学统计专业获博士学位，曾获比利时FWO 奖学金于比利时鲁汶
            大学（KU Leuven）电子工程系访问交流。近年来主要研究方向：图机器学习理论与应
            用(图神经网络，社交网络，知识图谱等），及可信机器学习理论与应用（鲁棒学习，
            联邦学习等）。发表SCI索引国际期刊（包括IEEE TNNLS, TIP, TPDS, ACM TOIS, 
            TKDD, NSR等）及国际会议论文（包括KDD, AAAI, IJCAI, ICML, WWW, INFOCOM, 
            CIKM, ICDM等）70余篇，包括中科院一区及CCF A类论文40余篇, ESI高被引论文1篇
            。现任Elsevier国际期刊Software Impacts副主编，担任IEEE TIP/TSP/TNNLS/TC
            CB 等多份国际期刊审稿人，担任IJCAI/AAAI等多个国际学术会议的（高级）程序委员
            会委员及论坛主席，中国计算机学会(CCF)人工智能与模式识别专委会委员。主持国家
            重点研发计划项目课题，国家自然科学面上项目、青年基金，广东省基础研究项目/面上
            项目两项，CCF开放课题项目一项，2019年CCF-腾讯犀牛鸟科研基金项目一项，2021年
            腾讯微信犀牛鸟专项基金一项，课题组与多个企业（包括微信/微众银行/网易游戏/美图
            /平安银行/招联金融）等开展长期的研究合作项目。</p>
            </div>

            <h2>生指导方面</h2>
            <div>
            <p id="p3">小组学生曾获CCF优秀大学生奖, ICDM/CIKM/SIAM/AAAI等会议Travel Grand, 校级优
            秀毕业论文10余次，其中2020,2021年度所指导学生均获得校级优秀毕业论文。表现优秀
            可协助推荐至海外知名高校深造及网易/微信/微众银行等企业实习。
            </p>
            </div>
            <h2>招生</h2>
            <div>
            <p id="p4">【长期面向博士后、研究生、及本科实习生】：如果您对社交网络分析，图机器学习，知
            识图谱及联邦学习的理论方法、工程实现与应用落地等方面感兴趣，有较强自我驱动并有
            志于学术研究，欢迎通过邮件(chenchuan@mail.sysu.edu.cn)与我联系！
            </p>
            </div>
</body>
</html>

在这里插入图片描述

12.CSS复合样式

一个CSS属性只控制一种样式，叫做单一样式。
一个CSS属性控制多种样式，叫复合样式

符合样式
符合的写法，是通过空格的方式实现的。复合写法有的不需要关心顺序，有的需要关心顺序，如font

background：red url（） repeat 0 0；
border：1px red solid；
font：
（注：最少要有两个值size family）

顺序为： weight - style - size - /line-height/ - family
尽量不要混写，如果非要混写，那么一定要复合样式再写单一样式

<!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">
    <style>
        div{width: 300px;height: 300px;
        background: url(../photo/2.jpg)no-repeat center center;
        background-color: red;
        border-right:dashed 2px blue ;
        font: bold italic 30px/100px 宋体;
    }
    </style>
    <title>Document</title>
</head>
<body>
    <div>一段文字</div>
</body>
</html>

在这里插入图片描述

13.CSS选择器

①ID选择器
#elem{ }
id=“elem”
注：

1.在一个页面中，ID值是唯一的，出现多次是不合法的
2.规范命名，字母_-数字（命名的第一位不能是数字）
3.命名方式，驼峰式，下划线式，短线式
驼峰写法：searchButtom（小驼峰）SearchButton（大驼峰）searchSmallButton
短线写法：search-small-button
下划线写法：search_small_buttom

②CLASS选择器
.elem{}
class=“elem”
注：

1、class选择器是可以复用的。
2、可以添加多个class样式。
3、多个样式的时候，样式的优先级根据CSS决定，而不是class属性中的顺序。
4、标签+类的写法

③标签选择器（TAG选择器）

CSS: div{}
HTML: <div</div

使用的场景：
1.去掉某些标签的默认样式使
2.复杂的选择器中，如层次选择器

④群组选择器（分组选择器）

可通过逗号的方式，给多个不同的选择器添加统一的CSS样式，来达到代码的复用

CSS：div，p，span{}

<!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">
    <style>
        div{background: red;}
        #text{background: red;}
        .title{background: red;}
    </style>
    <title>Document</title>
</head>
<body>
    <div>这是一个块</div>
    <p id="text">这是一个段落</p>
    <h2 class="title">这是一个标题</h2>
</body>
</html>

在这里插入图片描述

⑤通配选择器
*{}
以星号的方式给所有的标签都添加样式
注：尽量避免使用统配选择器
使用场景：
1.去掉所有标签的默认样式时
⑥层次选择器
后代：M N{ }当前M标签里面所有的标签
父子：M>N{ }当前M标签里面一层的标签
兄弟：M~N{ }当前M下面的所有兄弟N标签
相邻：M + N{ }当前M下面相邻的N标签
⑦属性选择器
在这里插入图片描述
M[attr]{}

= :完全匹配
*= ：部分匹配
^=: 起始匹配
$=:结束匹配
[][][]:组合匹配

<!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">
    <style>
        div[class]{background: red;}
    </style>
    <title>Document</title>
</head>
<body>
    <div>aaa</div>
    <div class="box">BBB</div>
    <div class="search">CCC</div>
</body>
</html>

在这里插入图片描述
⑧伪类选择器
CSS伪类用于向某些元素添加特殊的效果。一般用于初始样式添加不上的时侯，用伪类来添加
：link 访问前的样式（只能添加给a的标签）
：visited 访问后的样式（只能添加给a的标签）
：hover 鼠标移入时的样式（可以添加给所有的标签）
：active 鼠标按下时的样式（可以添加给所有的标签）
注：

1.link visited只能给a标签添加，hover和active可以给所有标签添加
2.如果四个伪类都生效，一定要写注意顺序：LVHA
3.一般网站只这样去设置：a{} a：hover{}

：afer、：before 通过伪类的方式给元素添加一段文本内容，使用content属性
： checked、 ：disabled：通过伪类元素给表单标签添加属性
：focus ：在操作之后给目标群元素添加伪类元素

结构性伪类选择器
:nth-of-type() 、:nth-child()
角标是从1开始的，1表示第一项，2表示第二项 n值表示从0到无穷大
:first–of-type 、 :first-child
:last-of-type 、 :last-child
:only-of-type 、 :only-child

nth-of-type()和nth-child（）之间的区别
type：类型
child：孩子

14.CSS样式

文字相关的样式i可以继承

布局相关的样式不能被继承
（默认是不能继承的，但是可以设置继承属性inherit值）

注：inherit值

15.CSS优先级

相同样式优先级
当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况
内部样式与外部样式
内部样式与外部样式 i优先级相同，如果都设置了相同样式，那么后写的引入方式优先级更高
单一优先级
style行间 > id > class > tag > * > 继承

注：

style行间 权重 1000
id        权重 100
class     权重 10
tag       权重 1

!important
提升优先级，非规范方式，不建议使用（不能针对继承的属性进行优先级的提升）
标签+类与标签

优先级：标签 + 类 > 单类

群组优先级
群组选择器与单一选择器的优先级相同，靠后写的优先级高

16.层次优先级

①权重比较
ul li .box p input{} ：1 + 1 + 10 + 1 +
.hello span #elem{} ：10 + 1 + 100

②约分比较
ul li .box p input{} ： li input{}
.hello span #elem{} ： #elem{}

17.CSS盒子模型

组成：content（物品） - > padding（填充物） - > border（包装盒） - > margin（盒子与盒子之间的间距）

content：内容区域 width和height组成的

padding：内边距（内填充）
number：30px
只写一个值：上下左右
写两个值：上下 、左右
写四个值：上 、 右 、 下 、 左

单一样式只能写一个值：
padding-left
padding-right
padding-top
padding-bottom

margin：外边距（填充）
number：30px
只写一个值：上下左右
写两个值：上下 、左右
写四个值：上 、 右 、 下 、 左

单一样式只能写一个值：
margin-left
margin-right
margin-top
margin-bottom

注：
1.背景颜色会填充到margin以内的区域（不包括margin区域）
2.文字会在content区域
3.padding不能出现负值，margin是可以出现负值
在这里插入图片描述

box-sizing

box-sizing属性允许您以特定的方式定义匹配某个区域的特定元素。取值为content-box（默认值） border-box

box-sizing：
盒尺寸，可以改变盒子模型的展示状态
默认值：content-box：width、height - > content
border-box：width、height - > content padding border

<!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>
        #box{width: 20px;height: 100px;background: red;border: 10px blue solid;
        padding:30px 50px ;
        box-sizing: content-box;
        }
        
    </style>
</head>
<body>
    <div id="box">这是一个盒子</div>
</body>
</html>

在这里插入图片描述

使用场景：
1.不用再去计算一些值
2.解决一些100%的问题

盒子模型的一些问题

margin叠加问题，出现在上下margin同时存在的时候。会取上下中值较大的作为叠加的值，这个问题只在上下有，左右是没有叠加这个问题的

解决方案：
1.BFC规范
2.想办法只给一个元素添加间距

margin传输
margin传输的问题只会出现在嵌套的结构中，且只有margin-top会有传递的问题，其他三个方向是没有传递问题的

解决方案：
1.BFC规范
2.给父容器加边框
3.margin换成padding

<!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>
         #box1{width: 200px;height: 100px;background: red;padding-top: 100px;}
         #box2{width: 100px;height: 100px;background: blue;}
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2"></div>
    </div>
</body>
</html>

在这里插入图片描述
margin自身居中
1.margin左右自适应是可以的，上下自适应是不行的（如果想要实现上下自适应的话，需要在第二大部分进行学习）
2。width、height不设置的时候对盒子的影响，会自动计算容器大小，节省代码

<!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>
    #box1{width: 350px;height: 350px;border: 1px black dashed;padding: 27px;}
    #box2{border: 5px#d7effe solid; padding: 20px;}
    #box3{background: #ffa0df;padding: 41px;}
    #box4{border: 1px white dashed;padding: 3px;}
    #box5{border: 1px white dashed; padding: 49px;}
    #box6{width: 100px;height:100px ;background: #96ff38;border:#fcff00 5px solid;}
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2">
            <div id="box3">
                <div id="box4">
                    <div id="box5">
                        <div id="box6">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

在这里插入图片描述

18.标签分类

按类型
block：块（div、p、ul、li、h1…）

1.独占一行
2.支持所有样式
3.不写宽的时候，跟父元素的宽相同
4.所占区域是一个矩形

inline：内联（span、a、em、strong、img…）

1.挨在一起
2、有些样式不支持，如width、height、margin、padding
3.不写宽的时候，宽度由内容决定
4.所占区域不一定是矩形
5.内联标签之间会有空袭，由换行产生

inline-block：内联块（input、select…）

1.挨在一起，支持宽高

注：布局一般用块标签，修饰文本一般用内联标签

按内容
Flow：流内容
Metadata：元数据
Sectioning：分区
Heading：标题
Phrasing：措施（内联）
Embedded：嵌入的
Interactive：互动的
在这里插入图片描述
Flow content详解

按显示
替换元素：浏览器根据元素的标签属性，来决定元素的具体显示内容
非替换元素：将内容直接告诉浏览器，将其显示出来

.显示框类型
display
block
inline
inline-block
none

注：display：none与visibility：hidden区别
display：none 不占空间的隐藏
visibility：hidden 占空间的隐藏

19.标签嵌套规范

块标签可以嵌套内联标签`

<div>
        <span></span>
        <a href=""></a>
    </div>

块标签不一定能嵌套块标签
错误

  <p>
        <div></div>
    </p>

内联是不能嵌套块
错误

  <span>
    <div></div>
  </span>

特殊：
正确

    <a href="">
        <div></div>
    </a>
19.溢出隐藏

overflow
visible：默认
hidden：隐藏
scroll：可左右拖动
auto：自动排列可拖动上下

over-flow-x、overflow-y分别针对两个轴设置

20.透明度与手势

opacity：0（透明）~ 0.5（半透明） ~ 1（不透明）

注：占空间、所有的子内容也会透明

rgba（）：0~1

注：可以让指定的样式透明，而不影响其他样式

cursor:手势

default：默认箭头
准备图片：.cur 、 .ico

cursor：url（./img/curoor.ico）,auto;
20.最大最小宽高

min-width 、min-height
min-width、 min-height

=注：注
%单位：换算 - > 以父容器的大小进行换算的

一个容器怎么适应屏幕的高：
容器加height：100% ；
body ：100%；
html ： 100%

html，body{height：100%}
.contrainer{height：100%}
21.CSS默认样式

有些标签有默认样式，有些标签没有默认样式

没有默认样式：div ， span …

有默认样式：body ， h1…h6 , p , ul …

body - > margin : 8px
h1 - > margin : 上下 21.440px
       font-weight ：bold
p - > margin : 上下 16 px
ul - >margin : 上下16px
padding ： 左 40px
默认点：list-style ： disc
a - > text-decoration ： underline；
22.CSS rest：
*{margin；0：padding：0；}

优点：不用考虑哪些标签有默认的margin和padding
缺点：稍微大影响性能
body，p，h1，ul{margin：0；padding：0；}

ul{list-style:none;}

a{text-decoration:none;color:#999;}

img{display;block}

问题的现象：图片跟容器底部有一些空隙
内联元素的对齐方式是按照文字基线对齐的，而不是文字底线对齐的
vertical-align：baseline；基线对齐方式，默认值
img{vertical-align：bottom；}是推荐到解决方式

写具体页面的时候或一个布局效果的时候：
1.写结构
2.css重置样式
3.写具体样式

23.float浮动

文档流
文档流是文档中可现实对象在排列时所占用的位置

float特性
加浮动的元素，会脱离文档流，会延迟父容器靠左或靠右排列，如果之前已经有浮动的元素，会爱着浮动的元素进行排列

float取值
left
right
none（默认）

float注意事项
只会影响后面的元素
内容默认提升半层
默认宽根据内容决定
换行排列
主要给元素添加，但也可以给内联元素添加

利用clear属性清除float浮动
固定宽高：不推荐，不能把高度固定死，不适合做自适应的效果

父元素浮动：不推荐，因为父容器浮动也会影响到后面的元素

overfloat：hidden（ BFC规范），不推荐，父容器会影响到后面的元素

设置空标签：不推荐，会多加一个标签

after伪类：推荐，是空标签的加强版，目前各大公司的做法

（clear属性只会操作块标签，对内联标签不起作用）

练习

<!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>
        *{margin: 0;padding: 0;}
        ul{list-style: none;}
        img{display: block;}
        a{text-decoration: none;color: #666;}
        h1,h2,h3{font-size: 16px;}

        .l{float: left;}
        .r{float: right;}
        .clear:after{content: "";display:block;clear: both;}

        #main{width: 366px;margin: 20px auto;}
        #main.title{height: 23px;line-height: 23px;font-size: 12px;font-weight: bold;padding-left: 30px;
                    /* background:url(./img2/bg_title.png)no-repeat,url(./img2/bg_line.png) repeat-x; */
        }
        #main ul{overflow: hidden;margin-top:13px;}
        #main li{margin-bottom: 22px;}
        #main .pic{width: 99px;border: 1px solid #c6c1d6;margin-left: 5px;}
        #main .pic img{margin: 2px;}
        #main .content{width: 240px;margin-left: 13px;}
        #main .content h2{font-size: 12px; line-height: 24px;}
        #main .content p{font-size: 12px; line-height: 20px;}
    </style>
</head>
<body>
    <div id="main">
        <h2 class="title">外媒评论精选</h2>
        <ul>
            <li class="clear">
                <div class="l pic">
                    <a href="">
                        <img src="./图片/10.26/1 (1).jpg" alt="" width="50px" height="50px">
                    </a>
                </div>
                <div class="l content">
                    <h2>测试标题</h2>
                    <p>
                        测试段落测试段落测试段落测试段落测试段落测试段落......
                        <a href="#">[详细]</a>
                    </p>
                </div>
            </li>
            <li class="clear">
                <div class="l pic">
                    <a href="">
                        <img src="./图片/10.26/R-C.png" alt="" width="50px" height="50px">
                    </a>
                </div>
                <div class="l content">
                    <h2>测试标题</h2>
                    <p>
                        测试段落测试段落测试段落测试段落测试段落测试段落......
                        <a href="#">[详细]</a>
                    </p>
                </div>
            </li>
            <li class="clear">
                <div class="l pic">
                    <a href="">
                        <img src="./gege.jpg" alt="" width="50px" height="50px">
                    </a>
                </div>
                <div class="l content">
                    <h2>测试标题</h2>
                    <p>
                        测试段落测试段落测试段落测试段落测试段落测试段落......
                        <a href="#">[详细]</a>
                    </p>
                </div>
            </li>
        </ul>
    </div>
</body>
</html>

在这里插入图片描述

24.point定位

position特性

css position属性用于指定一个元素在文档中的定位方式。top、tight、bottom、left属性则决定了该元素的最终位置。

relative相对定位
如果没有定位偏移量，对元素本身没有影响
不使元素脱离文档流
不影响其他元素布局
left、right、top、bottom是相对与当前元素自身进行偏移的

<head>
    <style>
        .div1{width: 100px;height: 100px;background-color: red;}
        .div2{width: 100px;height: 100px;background-color: blue;position: relative;left: 100px;top: 100px;}
        .div3{width: 100px;height: 100px;background-color: yellow;}
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</body>

在这里插入图片描述

absolut绝对定位

使元素完全脱离文档流
使内联元素支持宽高（让内联具备块特性）
使块元素默认宽根据内容决定（让块具备内联的特性）
如果有定位祖先元素相对于对位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移（绝对、相对、固定）

<head>
    <style>
        .div1{width: 100px;height: 100px;background-color: red;position:absolute: right 100px;}
        .div2{width: 200px;height: 200px;background-color: blue;}
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
</body>

使用position

<head>
    <style>
        .div1{width: 100px;height: 100px;background-color: red;float: left;}
        .div2{width: 200px;height: 200px;background-color: blue;}
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
</body>

使用float

fixed固定定位
使元素完全脱离文档流
使内联元素支持宽高（让内联具备块特性）
使块元素默认宽根据内容决定（让块具备内联的特性）
相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响

<head>
    <style>
        body{height: 3000px;background-color: blue;}
        button{position: fixed;right: 0;top: 200px;}
    </style>
</head>
<body>
    <button><a >我是一个块</a></button>
</body>

在这里插入图片描述

该块随页面滚动而滚动，不随滚动条滚动而滚动

sticky粘性定位

在指定位置，进行粘性操作

<head>
    <style>
        body{height: 3000px;}
        .div1{background-color: blue;position: sticky;top: 50px;}
    </style>
</head>
<body>
    <p>aaaaaa</p>
    <p>aaaaaa</p>
    <p>aaaaaa</p>
    <p>aaaaaa</p>
    <p>aaaaaa</p>
    <p>aaaaaa</p>
    <div class="div1">这是一个块</div>
    <p>bbbbbb</p>
    <p>bbbbbb</p>
    <p>bbbbbb</p>
    <p>bbbbbb</p>
    <p>bbbbbb</p>
</body>

在这里插入图片描述
该块在页面内的位置相对固定

z-index定位层级
默认层级为0
嵌套时候的层级问题

<head>
    <style>
        .div1{width: 100px;height: 100px;background-color: red;position: absolute;z-index: 0;}
        .div2{width: 100px;height: 100px;background-color: blue;position: absolute;left: 50px;top: 50px;z-index: 1;}
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
</body>

在这里插入图片描述

<head>
    <style>
        .div1{width: 100px;height: 100px;background-color: red;position: absolute;z-index: 2;}
        .div2{width: 100px;height: 100px;background-color: blue;position: absolute;left: 50px;top: 50px;z-index: 1;}
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
</body>

在这里插入图片描述

25.一些网页操作

菜单栏

<!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>
        *{margin: 0;padding: 0;}
        ul{list-style: none;}
        #menu{width: 100px;height: 30px;margin: 20px auto;border: 1px solid black;position: relative;}
        #menu ul{width: 100px;border: 1px black solid;position: absolute;left: -1px;top: 30px;background-color: aliceblue; display: none;}
        #menu:hover ul{display:block;}
        #menu ul li:hover{background: grey;}
        p{text-align: center;}
    </style>
</head>
<body>
    <div id="menu">
        卖家中心
        <ul>
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
            <li>列表4</li>
        </ul>
    </div>
    <p>测试段落测试段落测试段落测试段落</p>
</body>
</html>

在这里插入图片描述

定位实现居中

<style>
        #box1{width: 200px;height: 200px;border: solid black 1px;position: relative;}
        #box2{width: 50px;height: 50px;background: red;
            position: absolute;left: 100px;top: 100px;margin: -25px 0 0 -25px;}
    </style>

在这里插入图片描述

25.CSS添加省略

width
必须有一个固定的宽

white-space：nowrap
不让内容折行

overflow：hidden
隐藏溢出内容

text-overflow：ellipsis
添加省略号

<style>
        #content{width: 200px;border: 1px black solid;
            white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
    </style>

在这里插入图片描述

26.CSS Sprite

特性
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>
    <head>
        <style>
            #box1{width: 300px;height: 500px;border: 1px  black solid; line-height :50px;padding-left: 300px;background:url(./gege.jpg) no-repeat left 300px;}
        </style>
    </head> 
</head>
<body>
    <div id="box1"></div>
</body>
</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>
    <style>
        div{width: 300px;height: 200px;background: url(./gege.jpg);position: relative;}
        div::after{content: "你太美";position: absolute;left: 244px;top: 174px;}
        div::before{content: "只因";position: absolute;left: 244px;top: 5px;background:red;
        display: block;}
    </style>
</head>
<body>
    <div></div>
</body>
</html>

在这里插入图片描述

27.CSS圆角

border-radius
给标签添加圆角
注意：
设置一个值：四个角
设置两个值：左上右下 、右上左下
设置四个值：左上、右上、右下、左下

<!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>
        #box1{width: 200px;height: 300px;background-color: red;border-radius: 50%;}
        #box2{width: 200px;height: 200px;background-color: red;border-radius: 30px/40px;}
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
</body>
</html>

![在这里插入图片描述](https://img-blog.csdnimg.cn/10011cf1c29546d0959124f74a460726.png#pic_center在这里插入图片描述
练习

<head>
    <style>
        .div1{width: 300px;height: 150px;background-color: black;border-radius:150px 150px 0 0 ;}
    </style>
</head>
<body>
    <div class="div1"></div>
</body>

在这里插入图片描述

28.文博尚美网页练习

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="public.css" />
		<link rel="stylesheet" type="text/css" href="博文尚美.css"/>
	</head>
	<body>
		<!--top区域-->
	
			<div class="top">
					<h1 class="logo"><a href="#"><img src="./图片/博文尚美.jpeg"/></a></h1>
				
				<ul class="nav">
					<li><a href="#">HOME</a></li>
					<li><a href="#">ABOUT</a></li>
					<li><a href="#">PROTFOLIO</a></li>
					<li><a href="#">SERVICE</a></li>
					<li><a href="#">NEWS</a></li>
					<li class="lastli"><a href="#">CONTACT</a></li>
				</ul>
			</div>
		<div class="bannerWrap">
				<div class="banner">
					<p>
						<span>1</span>
						<span>2</span>
						<span>3</span>
						<span>4</span>
					</p>
				</div>
		</div>
		
		<!--service区域-->
		<div class="service">
			<h3 class="tit">服务范围<span>OUR SERVICES</span></h3>
			<ul class="service-list">
				<li>
					<a href="#"><img src="./图片/7.jpeg" alt="" />
					<h4>1.WEB DESIGN</h4>
					<p>企业品牌网站设计/手机网站制作
动画网站创意设计</p>
					</a>
				</li>
				<li>
					<a href="#"><img src="./图片/8.jpeg" alt="" />
					<h4>2.GRAPHIC DESIGN</h4>
					<p>标志LOGO设计/产品宣传册设计
企业广告/海报设计</p>
					</a>
				</li>
				<li>
					<a href="#"><img src="./图片/9.jpeg" alt="" />
					<h4>1.web design</h4>
					<p>企业年出口数据导出你的岩京安信尽可能挖掘出</p>
					</a>
				</li>
				<li>
					<a href="#"><img src="./图片/10.jpeg" alt="" />
					<h4>1.web design</h4>
					<p>企业年出口呼次湖光岩京安信尽可能挖掘出</p>
					</a>
				</li>
			</ul>
		</div>
		
		<!--client区域-->
		<div class="clientWrap">
			<div class="client">
				<h3 class="tit">{ 客户案例 }<span>With the best professional technology, to design the best innovative web site</span></h3>
				<p class="clear_fix">
					<a href="#"><img src="./图片/4.jpeg"/></a>
				    <a href="#"><img src="./图片/6.jpeg"/></a>
				    <a href="#"><img src="./图片/3.jpeg"/></a>
				</p>
				<a class="more" href="#">VIEW MORE</a>
			</div>
		</div>
		
		
		<!--news区域-->
		<div class="news">
			<h3 class="tit">最新资讯<span>THE LATEST NEWS</span></h3>
			
			<div class="news-content clear_fix">
				<p><img src="./图片/5.jpeg"/></p>
				<div class="news-content_right">
						<dl>
						<dt>
							<span class="span1">09</span>
							<span class="span2">Jan</span>
						</dt>
						<dd>
							<h4 class="special">网站排名进入前三的技巧说明</h4>
							<p>很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎首页，更不用说进首页前三了。那么网站优...</p>
						</dd>
					</dl>
					<dl>
						<dt>
							<span class="span1">08</span>
							<span class="span2">Jan</span>
						</dt>
						<dd>
							<h4>flash网站制作的优缺点</h4>
							<p>虽然HTML5程序语言出现，大有逐渐代替Flash网站制作的意味，但是过于生硬的HTML5动画效果，始终...</p>
						</dd>
					</dl>
					<dl>
						<dt>
							<span class="span1">07</span>
							<span class="span2">Jan</span>
						</dt>
						<dd>
							<h4>做个网站多少钱？</h4>
							<p>“做个网站多少钱？”很多客户打电话过来直接第一句就抛出来的问题。这好比买辆车多少钱，你是要...</p>
						</dd>
					</dl>
					<dl>
						<dt>
							<span class="span1">06</span>
							<span class="span2">Jan</span>
						</dt>
						<dd>
							<h4>哪些网站优化手法属于网站过度优化</h4>
							<p>大部分人都想让自己的网站，一夜之间出现在搜索引擎首页，独占鳌头。但是事实告诉我们罗马不是一...</p>
						</dd>
					</dl>
				</div>
				
			</div>
		</div>
		
		<!--bottom区域-->
		<div class="bottomWrap">
			<div class="bottom clear_fix">
				<p class="copy">Copyright 2006- 2014 Bowenshangmei Culture All Rights Reserved</p>
				<p class="subnav"><a href="#">Home <span>|</span></a>
				<a href="#">About<span>|</span></a>
				<a href="#">Portfolio<span>|</span></a>
				<a href="#">Contact</a></p>
			</div>
		</div>
	</body>
</html>

CSS

@charset "utf-8";
html,body,ol,ul,li,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0;}
body{
    font-size:16px;
    font-family: '微软雅黑';
}
ul,ol,li{
    list-style:none;
}
h1,h2,h3,h4,h5,h6{
    font-size:16px;
    font-weight: normal;
}
b,strong{
    font-weight: normal;
}
i,em{
    font-style: normal;
}
a,u,ins{
    text-decoration: none;
}
img{
	border: none;/*取消IE浏览器里面加了超链接的图片的默认边框*/
    display: block;/*取消图片的默认空隙*/
}
input,fieldset{
    outline: none;/*取消input聚焦时产生的蓝色框*/
    border:0;
}
.clear_fix:after{
    content:'.';
    clear:both;
    height:0;
    overflow:hidden;
    display:block;
    visibility: hidden;
}
.clear_fix{
    zoom:1;/*兼容ie6,7的高度自适应问题*/
}

CSS

.top,.banner,.service,.client,.news,.bottom{
	width: 1082px;
    margin:0 auto;
}

/*top区域*/
.top{
	/*padding: 19px 0 18px 135px;*/
	height: 81px;
}

.top .logo{
	float: left;
}
.top .nav{
	font-family: arial;
	padding-top: 19px;
	float: right;
}
.top .nav li{
	float: left;
}
.top .nav a{
	display: block;
	color: #646464;
	line-height: 44px;
	padding: 0 28px 0 27px;
}
.nav .lastli a{
	padding-right: 0;
}

/*banner区域*/

.bannerWrap{
	width: 100%;
	height: 469px;
	background:black url(./图片/2.jpeg) no-repeat center top ;
}
.banner{
	height: 469px;
	position: relative;
}
.banner p{
	width: 92px;
	height: 12px;
	position: absolute;
	bottom: 19px;
	left: 50%;
	margin-left: -46px;
}
.banner p span{
	
	float: left;
	width: 8px;
	height: 8px;
	border:2px solid #fff ;
	margin:0 6px 0 5px;
	border-radius: 50%;
	font-size: 0;
	
}
.banner p span:hover{
	background: #fff;
}

/*service区域*/
.service{
	height: 407px;
}
.tit{
	height: 81px;
	background:url(./图片/花.png) no-repeat center 67px;
	line-height: 32px;
	font-size: 20px;
	color: #363636;
	text-align: center;
	padding-top: 55px;
}
.tit span{
	font-size: 14px;
	line-height: 20px;
	font-family: arial;
	color: #9f9f9f;
	display: block;
}
.service-list{
	padding: 0 10px;
}
.service-list li{
	width: 190px;
	height: 270px;
	float: left;
	text-align: center;
	padding: 0 37px ;
}
.service-list li img{
	margin: 0 auto;
}
.service-list h4{
	font-size: 14px;
	line-height: 36px;
	font-weight: bold;
	color: #343434;
	
}
.service-list p{
	font-size: 14px;
	line-height: 22px;
	color: #6d6d6d;
}

/*client区域*/
.clientWrap{
	width: 100%;
	height: 460px;
	background: #f8f8f8;
}
.client{
	height: 460px;
}
.client .tit{
	height: 90px;
	padding-top: 50px;
	color:#66c5b4;
	background: url(./图片/花.png) no-repeat center 61px;
}
.client span{
	color: #9f9f9f;
}
.client p img{
	float: left;
	margin: 0 7px 0 12px;
}
.client .more{
	display: block;
	width: 176px;
	height: 37px;
	font-size: 14px;
	font-family: Arial;
	line-height: 42px;
	color: #ffffff;
	text-align: center;
	background:#66c5b4;
	border-radius:18px ;
	margin: 0 auto;
	margin-top: 36px;
	
}
/*news区域*/
.news{
	margin-bottom: 89px;
}
.news .tit{
	height: 104px;
	padding-top: 62px;
	background: url(./图片/花.png) no-repeat center 73px;
}


.news-content img{
	width: 224px;
	height: 186px;
	border:5px solid #e5e5e7 ;
	float: left;
}
.news-content_right{
	width: 840px;
	float: left;
}
.news-content_right dl{
	width: 420px;
	float: left;
}
.news-content_right dl:nth-child(1),.news-content_right dl:nth-child(2){
	margin-bottom: 44px;
}
.news-content_right dt{
	width: 72px;
	height: 71px;
	font-family: arial;
	text-align: center;
	border-right: 1px solid #dcdcdc ;
	float: left;
	
}
.news-content_right dt .span1{
	height: 50px;
	font-size: 39px;
	line-height: 61px;
	font-weight: bold;
	color: #66c5b4;
}
.news-content_right dt span{
	display: block;
	height: 21px;
	font-size: 20px;
	line-height: 30px;
	color: #999999;
}
.news-content_right dd{
	float: right;
	width: 330px;
	margin-left: 17px;
}
.news-content_right dd h4{
	height: 22px;
	font-size: 14px;
	line-height: 24px;
	color: #3f3f3f;
	margin-bottom: 12px;
}
.news-content_right  .special{
	color: #dcdcdc;
}
.news-content_right dd p{
	height: 37px;
	font-size: 12px;
	line-height: 21px;
	color: #a4a4a4;
	padding-left: 3px;
}

/*bottom区域*/
.bottomWrap{
	width: 100%;
	height: 54px;
	background: #66c5b4;
}
.bottom{
	font-size: 12px;
	font-family: arial;
	line-height: 54px;
	color: #fff;
}
.bottom .copy{
	float: left;
}
.subnav{
	float: right;
}
.bottom a {
	float: left;
	height: 11px;
	color: #fff;
}
.bottom span{
	margin: 0 19px;
}

在这里插入图片描述

在这里插入图片描述

29.百度官网

百度.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度</title>
    <link rel="stylesheet" href="百度.css">
</head>
<body>
<!--头部开始-->
<div class="header">
    <ul class="left">
        <li class="li_1"><a href="">新闻</a></li>
        <li class="li_1"><a href="">hao123</a></li>
        <li class="li_1"><a href="">地图</a></li>
        <li class="li_1"><a href="">视频</a></li>
        <li class="li_1"><a href="">贴吧</a></li>
        <li class="li_1"><a href="">学术</a></li>
        <li class="li_1" id="more_list">
            <div id="more_wrap"> <a  href="">更多</a>
                <div id="more_box">
                    <ul>
                        <li class="more_li">
                            <img src="images/wangpan.png" alt=""><div class="tag_more">网盘</div>
                        </li>
                        <li class="more_li">
                            <img src="images/zhidao.png" alt=""><div class="tag_more">知到</div>
                        </li>
                        <li class="more_li">
                            <img src="images/baike.png" alt=""><div class="tag_more">百科</div>
                        </li>
                        <li class="more_li">
                            <img src="images/tu.png" alt=""><div class="tag_more">图片</div>
                        </li>
                        <li class="more_li">
                            <img src="images/baobaozhidao.png" alt=""><div class="tag_more">宝宝知道</div>
                        </li>
                        <li class="more_li">
                            <img src="images/wneku.png" alt=""><div class="tag_more">文库</div>
                        </li>
                        <li class="more_li">
                            <img src="images/jingyan.png" alt=""><div class="tag_more">经验</div>
                        </li>
                        <li class="more_li">
                            <img src="images/yinyue.png" alt=""><div class="tag_more">音乐</div>
                        </li>

                    </ul>
                </div>
            </div>
        </li>
    </ul>
    <div class="right" >
        <div id="more_li">
            <span class="r_btn1" ><a href="">设置</a></span>
            <div id="more_menu">
                <ul>
                    <li><a href="">搜索设置</a></li>
                    <li><a href="">高级搜索</a></li>
                    <li><a href="">关闭预测</a></li>
                    <li><a href="">隐私设置</a></li>
                    <li><a href="">关闭热搜</a></li>
                </ul>
            </div>
        </div>
        <a class="r_btn2">登陆</a>
    </div>
</div>
<!--头部结束-->
<!--中间部分开始-->
<div class="main">
    <div class="search_wrap ">
        <img id="lg" src="../图片/11.22/10001.png" alt="">
    </div>

    <input class="search_l">
    <div class="search_r" href="" >百度一下</div>
    <table  >
            <tr class="news_type">
                <td style="padding-left:14px;padding-top:3px;">百度热榜</td>
                <td style="width: 300px;"><a id="hhh">换一换</a></td>
            </tr>
            <tr class="news_type">
                <td ><a href=""><span style="color:#fe2d46;">1</span>&nbsp&nbsp喀什新增确诊5例 无症状19例&nbsp&nbsp<span class="_new">新</span></a></td>
                <td><a href=""><span style="color:#9b9fac;">4</span>&nbsp&nbsp家具厂培训会员工跪地自扇耳光</a></td>
            </tr>
            <tr class="news_type">
                <td><a href=""><span style="color:#ff6600">2</span>&nbsp&nbsp小兴安岭首次找到东北虎吃熊证据</a></td>
                <td><a href=""><span style="color:#9b9fac;">5</span>&nbsp&nbsp十城房价跌幅超5%</a></td>
            </tr>
            <tr class="news_type">
                <td><a href=""><span style="color:#faa90e;">3</span>&nbsp&nbsp中国空间站拒绝美国加入&nbsp&nbsp<span class="_hot">热</span></a></td>
                <td><a href=""><span style="color:#9b9fac;">6</span>&nbsp&nbsp喀什完成全员核酸检测</a></td>
            </tr>

    </table>
</div>

</div>
<!--中间部分结束-->

<!--末尾部分开始-->
<div class="footer">
    <div class="footer_l">
        <ul >
            <li><a href="">设为首页</a></li>
            <li><a href="">关于百度</a></li>
            <li><a href=""> About Baidu</a></li>
            <li><a href="">百度营销</a></li>
            <li><a href="">使用百度前必读</a></li>
            <li><a href="">意见反馈</a></li>
            <li><a href="">帮助中心</a></li>
        </ul>
    </div>
    <div class="footer_r">
        <ul >
            <li><a href="">yst</a></li>
            <li><a href="">计算机</a></li>
            <li><a href=""> 银河系科技大学</a></li>
        </ul>
    </div>
    <img href="images/erweima">

</div>
<!--末尾部分结束-->
</body>
</html>

百度.css

*{
    padding:0;margin:0;
    color: #222;
}
a{
    text-decoration: none;
    padding-left: 12px;
}
a:hover{
    color:#4e71f2;
}
li{
    list-style: none;
}
.header{
    height: 60px;
    line-height:60px;
    text-align: center;
}
.header .left{
    float:left;
}
.header .right{
    position:absolute;
    right:0px;
    top:0px;
    z-index:100;/*层叠*/
    padding-right:24px;
    float:right;

}
.header .li_1{
    float:left;
    font:13px/23px Arial,sans-serif;
    color:#222;
    position:relative;
    margin-right:31px;margin-top:19px;display:inline-block;

}
.right #more_li{
    color:#222;
    position:relative;
    margin-right:35px;
    display:inline-block;
    font-size:14px;
}
.header .right .r_btn1{
    display:inline-block;
    vertical-align:top;cursor:pointer;
}

.right #more_menu{
    display:none;
    position:absolute;
    top:28px;
    left:-14px;
    width:85px;
    height:165px;
    line-height: 22px;
    text-align: left;
    box-shadow:0 2px 10px 0 rgba(0,0,0,.15);
    border-radius: 6px;
    margin-top:15px;
}
.right #more_menu li{margin-top:9px;}
#more_li:hover #more_menu{display:block;}
.header .right .r_btn2{
    display:inline-block;
    margin-top:19px;
    background-color: #4e71f2;
    padding-left:2px;
    font-size:14px;
    height:24px;
    width:48px;
    color:#fff;
    line-height: 24px;
    border-radius: 6px;

}

#more_wrap{
    position:relative;
    display:block;
}
#more_box{
    display:none;
    position:absolute;
    right:-12px;
    top:30px;
    width: 300px;
    height: 223px;
    line-height:15px;
    text-align: center;
    box-shadow:0 2px 10px rgba(0,0,0,0.15);
    border-radius:12px ;
    background-color: #fff;
    /*box-shadow: 10 10;*/
}
#more_box li{margin-left:18px;}
#more_list:hover #more_box{
    display:block;
}
#more_box img {
    height: 42px;
    width: 42px;
    border:1px solid rgba(0,0,0,.03);
    border-radius: 12px;
}
.tag_more{
    width: 42px;
    text-align: center;
}
.more_li{
    float:left;
    line-height:24px;
    margin-left:12px;
    margin-right:12px;
    margin-top:16px;

}
.main{
    clear:both;

}
#lg{
    position:absolute;
    left:50%;
    top:45px;
    margin-left:-135px;
    width: 270px;
    height: 129px;
}
.search_l{
    position:absolute;
    left:625px;
    top:185px;
    font-size:16px;
    width: 546px;
    height: 40px;
    vertical-align: top;
    border:2px solid #c4c7ce;
    border-radius:10px 0 0 10px;
    background-color: #fff;
    color:#222;
    overflow: hidden;
}
.search_r {
    position: absolute;
    top:185px;
    left:1173px;
    cursor: pointer;
    width: 100px;
    height:44px;
    line-height: 45px;
    background-color: #4e6ef2;
    border-radius:0 10px 10px 0;
    font-size:14px;
    color:#fff;
    text-align: center;
}
.main .search_r:hover{
    background-color: #4662d9;
}
.main input:hover{
    border-color: #a7aab5;
}


.main table{
    margin:200px 610px;
    width: 670px;
    height: 180px;
    font-size:15px;
}
.main #hhh{
    padding-left:254px;
    color:#a6a9b4;
}
._new{
    display: inline-block;
    background-color: #ff455b;
    width: 14px;
    height: 19px;
    color:#fff;
    padding:0 2px;
    border-radius: 5px;
}
._hot{
    display: inline-block;
    background-color: #ff9812;
    width: 14px;
    height: 19px;
    color:#fff;
    padding:0 2px;
    border-radius: 5px;
}
.footer{
    width: 100%;
    height: 40px;
    position:fixed;
    bottom:0;
    background-color: #fbfbfb;
    line-height: 40px;
    font-size:12px;
}
.footer_l li a{
    float:left;
    padding-left:14px;
    color:#9195a3;
}
.footer_l li a:hover{
    color:#222;
}
.footer_r li a{
    float:right;
    font-size:16px;
    padding-right:15px;

}
30.strong和b、em和i

strong 和 em 都是表示强调的标签 表现形态为文本加粗和斜体
b 和 i 同样也表示文本加粗和斜体
区别：strong和em 是具备语义化的，而b和i是不具备语义化的
使用CSS样式也能呈现出加粗和斜体的表现形态
优势：可以不用多个class进行区分，简化选择器操作

31.引用标签

blockquote ：引用大段的段落解释
q ：引用小段的短语解释
abbr ：缩写或首字母缩略词
address ：引用文档地址信息
cite ：引用著作的标题

32.iframe嵌套页面

其中src与srcdoc（可渲染标签）同时存在时仅优先识别排在首位的
应用场景：数据传输、共享代码，局部刷新、第三方介入

属性含义
frameborder规定是否显示框架周围的边框
width定义iframe的宽度
height定义iframe的高度
scrolling规定是否在iframe中显示滚动条
src规定在iframe中引入URL
srcdoc规定在iframe中显示的页面内容

可以引入其他的html到当前html中显示
主要是利用iframe的属性进行样式的调节
应用场景 ：数据传输，共享代码，局部刷新，第三方介入等。

33.br与wbr标签

br：在br标签处直接换行
wbr：只应该在表示计算机源代码或者其他机器可以阅读的文本内容上使用，虽然code标签只是吧文本变成等宽字体，但它暗示着这段文本是源程序代码

<body>
    <p>这是一段文字 aaaaaaa<br> aaaaa aaaaaa  aaaaaa aaaaaa aaaaaaaaa</p>
    <p>这是一段文字bbbbbbbbbb bbbbbb  bbbbbbbb bbbbbb</p>
    <p>这是一段文字c cc<wbr>bbbbbbbbbb<wbr>aaaaa aaaaaa  aaaaaa aaaaaa aaaaaaaaa</p>
</body>

在这里插入图片描述

34. pre 与 cod

pre元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符
只应该在表示计算机程序源代码或者其他机器可以阅读的文本内容上使用 code 标签。虽然 code 标签通常只是把文本变成等宽字体，但它暗示着这段文本是源程序代码

35.map与area

给特殊图形添加链接，area能添加的热区的形状：矩形、圆形、多边形…

定义一个客户端图像映射。图像映射( image-map )指带有可点击区域的一幅图像。area元素永远嵌套在map元素内部。area元素可定义图像映射中的区域。
area元素的href属性定义区域的URL , shape属性来定义区域的形状,coords属性定义热区的坐标

36.embed与object

给flash和一些插件进行渲染操作的标签。

embed和object都表示能够嵌入一些多媒体，如flash动画、插件等。基本使用没有多大区别，主要是为了兼容不同的浏览器而已。
object元素需要配合param元素一起完成。

37.audio 与 video（引入音频和视频的标签）

audio 标签表示嵌入音频文件
video 标签表示嵌入视频文件。
默认控件是不显示的，可通过 controls 属性来显示控件
为了能够支持多个备选文件的兼容，可以配合 source 标签
loop循环属性 autoplay自动播放

38.文字注解与文本方向

ruby 标签定义
ruby 注释（中文注音或者字符），rt 标签定义字符（中文注音或字符）的解释或发音
bdo标签可覆盖默认的文本方向

39.扩展link标签
<link rel="icon" type="/image/x-icon" href="http://www.mobiletrain.org/favicon.ico">
<link rel="dns-prefetch" href="//static.360buyimg.com">
40.扩展meta标签

meta添加一些辅助信息
description：描述网站信息
Keywords：关键词
refresh：刷新
renderer：针对内核

三.JavaScrip

交互行为

①介绍
②行为

四.切图流程

五.PC企业站布局

六.PC游戏站布局

（二）、HTML+CSS系列教程2.溯本求源

一.HTML扩展

二.CSS扩展

三.HTML5新语法

1.html5新语义化标签

header：页眉
footer：页脚
main：主体
hgroup：标题组合
nav：导航
article：独立的内容
aside：辅助信息的内容
section：区域
figure：描述图像或视频
figcaption：描述图像或视频的标题部分
datalist:选项列表
details/summary:文档细节/文档标题
progress/meter:定义进度条/定义度量范围
time:定义日期或时间
mark:带有记号的文本
注：header、footer、main在一个网页中只能出现一次

四.CSS3新语法

五.兼容于hack

（三）、HTML+CSS系列教程3.风生水起

一.弹性布局

1.Flex弹性盒子模型

在这里插入图片描述

①flex-direction

flex-direction用来控制子项整体布局方向，是从左往右还是从右往左，是从上往下还是从下往上。

在这里插入图片描述

②flex-wrap

flex-wrap用来控制子项整体单行显示还是换行显示。

在这里插入图片描述

③flex-flow

flex-flow属性是flex-direction和flex-wrap的缩写，表示flex布局的flow流动特性。第一个值表示方向，第二个值表示换行，中间用空格隔开。

④justify-content

justify-content属性决定了主轴方向上子项的对齐和分布方式。

在这里插入图片描述

⑤align-items

align-items中的items指的就是flex子项们，因此align-items指的就是flex子项们相对于flex容器在侧轴方向上的对齐方式。

在这里插入图片描述

⑥align-content

align-content可以看成和justify-content是相似且对立的属性，如果所有flex子项只有一行，则align-content属性是没有任何效果的。

在这里插入图片描述

⑦作用在flex子项上的CSS属性

在这里插入图片描述

2.grid网格布局

Grid布局是一个二维的布局方法，纵横两个方向总是同时存在。

在这里插入图片描述

①grid-template-columns和grid-template-rows

对网格进行横纵划分，形成二维布局。单位可以是像素，百分比，自适应以及fr单位(网格剩余空间比例单位)。
有时候，我们网格的划分是很规律的，如果需要添加多个横纵网格时，可以利用repeat()语法进行简化操作。

②grid-template-areas和grid-template

area是区域的意思，grid-template-areas就是给我们的网格划分区域的。此时grid子项只要使用grid-area属性指定其隶属于那个区。
grid-template是grid-template-rows ,grid-template-columns和grid-template-areas属性的缩写。

③grid-column-gap和grid-row-gap

grid-column-gap和grid-row-gap属性用来定义网格中网格间隙的尺寸。css grid-gap属性是grid-column-gap和grid-row-gap属性的缩写。

④justify-items和align-items

justify-items指定了网格元素的水平呈现方式，是水平拉伸显示，还是左中右对齐。align-items指定了网格元素的垂直呈现方式，是垂直拉伸显示，还是上中下对齐。
place-items可以让align-items和justify-items属性写在单个声明中。

在这里插入图片描述

⑤justify-content和align-content

justify-content指定了网格元素的水平分布方式。align-content指定了网格元素的垂直分布方式。place-content可以让align-content和justify-content属性写在一个CSS声明中。

在这里插入图片描述

⑥justify-items和align-items

justify-items指定了网格元素的水平呈现方式，是水平拉伸显示，还是左中右对齐。align-items指定了网格元素的垂直呈现方式，是垂直拉伸显示，还是上中下对齐。
place-items可以让align-items和justify-items属性写在单个声明中。

在这里插入图片描述

⑦作用在grid子项上的CSS属性

在这里插入图片描述

二.网格布局

三.移动端布局

四.响应式布局

五.Bootstrap

（四）、HTML+CSS系列教程4.巧夺天工

一.预编译CSS

二.postcss

三.CSS架构

四.高级功能

五.CSS与JS交互## 标题

肆曾相识
关注
  • 33
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
HTML+CSS系列教程
EmbalmX的博客
10-21 1018
HTML+CSS系列教程
带你入门HTML+CSS网页设计，编写网页代码的思路
qq_38515154的博客
05-16 446
从代码当中可以发现，所有的标签内容都被一个div标签所包含着，div属于组合块级元素，常用来区分不同的区域或模块，它可以是独立的，可分割的，它有自动换行的属性，但你可以通过使用css来给它定义样式或布局。h2属于标题标签，从h1到h6都可以自定义，一般网页的标题或者需要着重表现的都可以用，p标签表示段落或者一段文字介绍，img标签表示页面中的图像，你可以直接引入图片地址，注意，它是一个单标记。文字介绍和标题差不多，就是字体小一点，注意的是需要给段落定义一个行高，调整段落之间的间隔。
html+css基础教程入门篇之css选择器详细解读
最新发布
2401_84152177的博客
05-11 412
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
网页制作基础学习——HTML+CSS
学会改变自己——才能突破
04-29 1万+
网络是大家经常使用的东西，他帮助我们解决了很多问题，在我们生活中扮演着举足轻重的作用。但是如何制作呢，现在已经有很多专门的网页制作软件了（例如：Dreamweaver，Fireworks），而这些软件的根本都是生成代码，让浏览器进行读取，所以我先从背后代码的部分开始学习，进行简单总结。          首先：HTML（HyperText Markup Language）,即超文本
HTML入门网页制作，HTML+css运用做出
weixin_64284850的博客
03-07 1611
如图所示，带有搜索框的简单网页 以下是HTML内容： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>NASA中文网</title><!-- 网页标题 --> <link rel="stylesheet" type="text/css" href="../css/style.css"/>&l...
html+css基础教程（笔记）
weixin_44947339的博客
02-07 900
阅读目录 一、html 1、HTML标题 2、 HTML 段落 3、HTML 文本格式化标签 4、HTML 实体标签 5、超链接 6、HTML图像标记 7、HTML列表元素 二、CSS 1、css样式的三种使用方法 2、CSS 背景样式 3、CSS 边框 一、html HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Intern...
网页设计期末大作业+html+css
05-25
9个网页布局，学校让做的网站作业，虽然是比较基础的网页静态页面，不过我也希望你能做的规范一些，我们专业制作学生...DIV+css+js学生网站如何做？ 不靠这个吃饭--你还用自己做网站吗？ 大学生静态网页成品作业代做
《html+css+javascript 网页制作案例教程》源代码
04-02
《HTML+CSS+JavaScript 网页制作案例教程》是一本深入浅出的前端开发教材，旨在帮助读者掌握网页设计的基础知识和技能。这个压缩包包含的源代码是书中各个实例的实现，提供了丰富的实践材料，使学习者能够通过实际...
html + css 入门教程
02-18
html + css 入门教程
尚硅谷前端入门html+css零基础教程，零基础前端开发html5+css3视频尚品汇项目源码
03-06
【标题】中的“尚硅谷前端入门html+css零基础教程”指的是一个由尚硅谷教育机构提供的，面向初学者的前端开发课程，主要涵盖了HTML（超文本标记语言）和CSS（层叠样式表）的基础知识。这个教程是为那些对前端开发...
HTML+CSS+JavaScript教程学习笔记.zip
01-01
HTML+CSS+JavaScript教程学习笔记HTML+CSS+JavaScript教程学习笔记 HTML+CSS+JavaScript教程学习笔记HTML+CSS+JavaScript教程学习笔记 HTML+CSS+JavaScript教程学习笔记HTML+CSS+JavaScript教程学习笔记 ...
HTML+CSS教程
02-17
网页前端HTML+CSS教程，这是一份拥有12年网站开发经验的老程序员所编写的教程。 网站开发需要用到的软件，网站运行环境等等，教程中都有涉及，跟着教程学，很快就能学会html+css啦！
HTML+CSS学习总结
weixin_53351919的博客
06-26 2796
html+css学习总结
hhhhhhh5
weixin_44960011的博客
09-22 394
Cary第一个Html网页 <h2>表格的插入</h2> <fieldset> <legend align="center">会员管理信息系统</legend> <form action="https://www.baidu.com/s" method="GET" target="_blank"> <label>会员名称: </label&...
HTML_CSS教程
阿彬得博客
08-12 1874
HTML 1、html简介 html的全称Hyper Text Markup Language （超文本标记语言），简写为html。 html通过标签来标记网页中需要显示的地方。 html文件是不需要编译，可以直接在浏览器运行。 2、第一个html文件 <html> 表示整个 html 页面的开始 <head> 头信息 <title>标题</title> 标题 </head> <body> body 是页面的主体内容 页
HTML+CSS小白入门与进阶教程
热门推荐
qq_29192703的博客
08-07 9万+
本文旨在让你快速了解HTML语法结构，通过实例操作快速从无到有的入门与进阶。Html语言学习的特点有点像刚开始学word软件，word的功能就像html标签，用多了就熟悉了，不常用的一些功能现学现用即可（你要不知道什么是标签的意思不要着急，下面会讲到）。 [注]本文使用的开发软件是Notepad++，我在文章的最后提供的所有需要素材和网站源码，但我希望你能在看完整篇文章后再去下载，文章中实验代码...
HTML基础知识
Love_Roro的博客
09-08 426
HTML基础知识 关于浏览器 Web标准 1、谷歌浏览器，内核Chromium 2、IE浏览器 ，内核Trident 3、火狐浏览器，内核Gecko 认识HTML HTML指的是超文本标记语言(Hyper Text Markup Language)是用来描述网页的一种语言。 HTML不是—种编程语言，而是—种标记语言(markup language) 标记语言是—套标记标签(markup tag) 超文本 所谓超文本，有2层含义: 1.因为它可以加入图片、声音、动画、多媒体等内容(超越文本限制） 2.它还可
HTML+CSS网页设计视频教程
weixistyle的博客
11-20 8190
本教程系统完整的讲解了HTML和CSS设计网页的基础知识，适合刚进入Web开发的新手学习。 教程借助大量代码实例来理解掌握各种语法，讲解思路清晰、言简意赅，精心制作的讲义一目了然。 教程分10章，共30集，385分钟，欢迎收看。如有疑问或意见建议，请加我QQ:167347309沟通交流。 更多课程信息，请参阅魏曦课堂官网：http://www.weixistyle.com 1. 课程安排 ...
#1使用html+css+js制作网站教程 准备
Eritque arcus的博客
01-26 4402
#1使用html css js制作网站教程 准备阶段 介绍编辑软件，基本框架，基本概念
HTML+CSS入门教程：构建简单网页布局
HTML+CSS基础教程是针对IT行业的初学者设计的一个入门级课程，主要讲解如何理解和使用这两种核心技术来构建和设计网页。在2015年10月10日的微创软件EKA部门中，这个教程旨在帮助员工建立团队知识库，掌握前端开发的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值