【无标题】

XStarling

已于 2022-10-30 18:46:39 修改

阅读量626

点赞数

分类专栏：新手练习文章标签：前端 html

于 2022-10-18 17:23:10 首次发布

本文链接：https://blog.csdn.net/XStarling/article/details/127391364

版权

新手练习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Web前端第一周学习

Html+CSS课程学习导言
第一周
Day1
- 什么是Html、CSS？
- 如何去写代码，写在哪里呢？
- 网页与网站的关系
- - 课后作业:什么是html
  - 什么是CSS
- 宇宙第一编辑器VSCode
- - VS基本操作
Day2
- chrome浏览器
- 深入了解网站开发？
- JavaScript与HTML与CSS之间的关系：
Day3
- Web前端的三大核心技术？
- HTML基础结构与属性
- HTML初始代码
- HTML注释
Day4
- HTML语义化
- 标题与段落（网页内容body区域）
- 文本修饰标签
Day5
- 图片的标签与属性
- 引入文件的地址路径
- 跳转链接
Day6
- 跳转锚点
- 特殊符号
- 列表标签
第二周
Day1
- 嵌套列表
- 表格标签
- 表格属性
Day2
- 表单input标签
- - 表单相关标签
- 表格表单组合
CSS
- div与span
- CSS基础语法
- 内联样式与内部样式
- CSS中的颜色表示法
- 背景样式
- - 背景实现视觉差
- CSS边框样式
- - 边框实现三角形
- CSS文字样式
- CSS段落样式
- CSS选择器
- - ID选择器及注意事项
  - CLASS选择器及注意事项

Html+CSS课程学习导言

第一阶段【拨云见日】 1.Html 2.CSS 3.切图流程 4.PC企业站布局 5.PC游戏站布局
第二阶段【溯本求源】 1.扩展Html 2.扩展CSS 3.Html5新语法 4.CSS3新语法 5.兼容与hack
第三阶段【风生水起】 1.弹性布局 2.网格布局 3.移动端布局 4.响应式布局 5.Bootstrap
第四阶段【巧夺天空】 1.预编译CSS 2.postcss 3.CSS架构 4.高级功能 5.CSS与JS交互

第一周

Day1

什么是Html、CSS？

做网站的编程语言。他们是两种编程语言，一般情况下需要配合使用，是作为网站开发的基础语言

浏览器把Html文件解析后即成为我们所看到的网站。
可通过网页鼠标右键➡查看网页源代码操作查看该网页的源代码。
例如在如下淘宝网网页源代码的截图中，
上部分有紫色字母开头的为html语言下部分黑色字符部分为CSS语言

Alt

如何去写代码，写在哪里呢？

可新建一个文本文档文件，再将txt的后缀改为html，一个网页文档就创建成功了，能在浏览器打开。
如要编写该新建网页内容，则对该html文件右键点击➡打开方式➡记事本（或其他可编写软件）即可编辑该网页打开后的内容

网页与网站的关系

类似于图库与图片，电视剧有四十集
一个网站由许多个网页组成

课后作业:什么是html

Html是超文本标记语言，是用来描述 web文档的一种标记语言。使用标签作为页面的开始和结束部分。

总结：

1），html通常被称为静态网页。

2），HTML是带html或Htm扩展名的文件。

3），HTML的一些标签代码规则将内容呈现在浏览器中所需的风格。

4），HTML可以使用记事本创建，并以.html或.htm为扩展名保存。

Html文件中的代码包含一些规则、规则、标签和内容。形成具有指定的html结构和内容的完整的HTML文件。您可以直接用浏览器打开它来查看网页的效果。

若要在浏览器中显示各种网页，则需要 html文件(HTML基本结构+内容+标签)和 css文件(css风格)才能实现所需的漂亮网页。

什么是CSS

1）层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
2）CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

宇宙第一编辑器VSCode

     VS Code ,全称Visual Studio Code ,来自微软,是一个开源的、基于Electron的轻量代码编辑器。

VS基本操作

设置：文件>首选项>设置（大小，是否换行 word wrap）
快捷键
- Ctrl+s：保存
- Ctrl+a：全选
- Ctrl+x：剪切
- Ctrl+c：复制
- Ctrl+v：粘贴
- Ctrl+z：撤销
- Ctrl+y：还原
- shift+end：从头选中一行
- shift+home：从尾部选中一行
- shift+alt+↓：快速复制一行
- alt+↑或↓：快速移动一行
- tab：向后缩进
- tab+shift：向前缩进
- alt+鼠标左键：多光标
- ctrl+d：选择相同元素的下一个
- 对菜单右键>view in browser(或对编辑页面右键>open in browser): 快速用浏览器打开正在编辑的网站
- 在菜单中新建文件与文件夹
- 在菜单中的搜索栏可搜索当前文件内容

Day2

chrome浏览器

   谷歌浏览器是一款可让您更快速、轻松且安全地使用网络的浏览器。

五大浏览器：IE、火狐(Firegox)、谷歌(Chrome)、Safari和Opera

深入了解网站开发？

 一个大型网站的开发，需要团队的配合，各个岗位不可或缺

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

JavaScript与HTML与CSS之间的关系：

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。
Web前端三剑客：分别是HTML、CSS、JavaScript，它们看上去是三种不同的技术，但在实际中却是相互搭配使用的。

Day3

Web前端的三大核心技术？

HTML：结构
CSS：样式
JavaScript：行为
例子：
HTML：改变字体颜色与斜体

<style>
div{color: blue;font-style:italic}
</style>
<div>123456</div>

HTML基础结构与属性

HTML: 超文本标记语言(HyperText Markup Language) ,标准通用标记语言下的一个应用。是网页制作必备的编程语言

超文本：文本内容，非文本内容（图片，视频，音频等）
标记(也叫标签):<单词> 例如：<header><footer>
语言：编程语言

标签写法分为两种
单标签 <header>
双标签 <header></header>
创建标签的快捷键：单词+tab键➡<单词>
标签是可以上下排列(一号楼与二号楼)，也可以组合嵌套（一栋楼里的每户人家甚至每个房间）。
标签的属性：来修饰标签的，设置当前标签的一些功能 <标签属性=“值” 属性2=“”>

HTML常见标签: 网址已过期
在这里插入图片描述

HTML初始代码

  每一个html文件都有的代码叫初始代码,初始代码就是无论你写什么样的网页,这些代码都是要有的,这就是初始代码。

!+tab键：快速的创建html的初始代码
<!DOCTYPE html>文档声明：告诉浏览器这是一个html文件

<html lang="en">html文件的最外层标签：包裹着所有html标签代码 lang="en"表示是一个英文网站； lang="zh-CN"表示一个中文网站

<head>

<meta charset="UTF-8">元信息：是编写网页中的一些赋值信息。charset="UTF-8"国际编码，让网页不出现乱码的情况

<title>Document</title> 设置网页的标题（例如标签页）

</head>
<body>
显示网页内容的区域
</body>
</html>

HTML注释

    注释的代码，只有在文件中看得到，但是浏览器显示不出来

写法：
意义：
1. 把暂时不用的代码隐藏起来，方便以后使用。
2. 对开发人员进行提示。
快捷添加注释与删除注释：(操作一次快捷添加，操作两次快捷删除)
1. Ctrl+/
2. shift+alt+a
Day4

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

好处：

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

Tip:网页功能小提取的网址H5O
作用：提炼出当前网页的标题，整理成大纲

将网址中的H5O v0.12.4拖拽到书签栏，形成书签
切换到需要提取标题的网页
点击一下书签栏中的H5O书签

标题与段落（网页内容body区域）

h标签：标题
p标签：段落

标题>双标签：<h1></h1>...<h6></h6>
在一个网页中，h1标题最重要，并且一个.html只能出现一次h1标题
且h1标题最大h6标题最小
段落>双标签：<p></p>
在chrome浏览器鼠标右键>检查可以查看并定位该内容在网页源代码中的位置

文本修饰标签

强调>双标签

<strong></strong>表示强调，会把文本进行加粗
<em></em>表示强调，会把文本斜体化
其中，strong的强调性更强，em的强调性稍弱
<sup></sup>上标
<sub></sub>下标
<del></del>删除（中间加删除线）
<ins></ins>插入（加下划线）
一般情况下，删除文本都是和插入文本配合使用的

Day5

图片的标签与属性

图片的标签：img是单标签
格式<img src="图片的地址" alt="当图片出问题时才显示的提示文字" title="鼠标移到图片上时显示的图片信息">

src：引入图片的地址
alt：当图片出现问题时，可以显示一段有好的提示文字
title:提示信息
width、height:图片的大小（如果没预设图片的大小，网页加载时，夹着图片的两个段落间不会预留图片位置，紧挨在一起；若预设，则给图片预留位置）

引入文件的地址路径

相对路径（相对于某一个文件）
例如：某一个文件与需引入的图片在同一个级别下，他们之间就是兄弟的关系，在内部是孩子，在外边是父亲。
.在路径中表示当前路径
..在路径中显示上一级路径
实例1：图片.jpg与网页.html在同一个文件夹中，平级关系，使用<img src=". /显示提示层，选中我们所需的jpg文件">
实例2：若图片在html同级的另一文件夹，则从html的同级开始书写包含图片的文件夹名<img src="./与html同级文件夹名/下一级文件夹名..../图片.jpg">
实例3：在html所在文件夹外部，则通过 . . / 所在的外部文件夹/之后操作同上
绝对路径
图片在电脑中的地址例：<img src="E:/x/x/x.jpg">
图片在网络中的网址例子<img src=http:s//www.xxx.xx>

跳转链接

链接标签：a→双标签<a></a>

href属性：链接的地址
格式：<a href="网址">注释</a>
例：<a href="http：//....">点击即可跳转至某网页</a>（若在注释中存入的是<图片绝对路径>，则点击图片跳转）
target属性:可以改变链接打开的方式，默认情况下：
在当前页面打开_self
新窗口打开_blank
格式：<a href="网址"target="_blank">注释</a>
base->单标签：作用是改变链接的默认行为。（base作为一个设置，需写在head部分当中）
格式：<base target="_blank">

Day6

跳转锚点

做法一：
#号+id属性（加给h2标题）
创建<a href="#biaoti">这是一个可以点的文字</a>
在需要跳转的的对应标题的代码中加入id：<h2 id="biaoti">这是一个标题</h2>
id是任意的，写啥都行
但是要与<a href="# ">井号后跟着的对应
做法二：
#号+name属性(加给a标签)
创建<a href="#biaoti">这是一个可以点的文字</a>
在需要跳转到的每个标题<h2>前
创建新一行代码<a name="biaoti"></a>

特殊符号

  编写一些文本时，经常会遇到输入法无法输入的字符，还有往一段文字中加入多个空格时，页面并不会解析出多个空格。这些无法输入和空格字符都是特殊字符，在HTML中，为这些特殊字符专门准备了专门的代码。

1、&+字符
2、解决冲突啊左右尖括号，添加多个空格等的实现
3、常用：左尖括号&lt；右尖括号&gt；空格&nbsp；（实现多个空格即对&nbsp进行复制操作）

列表标签

无序列表

前有小黑点等标记样式，而不是和有序列表一样由数字排序
无序列表→ul li 符合嵌套的规范

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

<ul>
        <li>第一项</li>
        <li>第二项</li>
</ul>（ul和li之间不允许插入其他标签）

错误写法

<ul>
    <p>
           <li>第一项</li>
           <li>第二项</li>
    </p>
</ul>

type属性：改变前面标记的样式（一般都是用CSS去控制）
【形式：<ul> type=" "</ul>】
type属性参考网站点击
如需加粗标签，则在li中夹一个strong双标签
<li><strong></strong></li>

有序列表

有序号排序
<ol>、<li>：列表的最外层容器，列表项
注：有序列表用的非常少，经常用的是无序列表，无序列表可以通过CSS去代替有序列表。
也具有type属性
有序列表自带1、2、3前缀排序（可通过CSS去掉序号）

<ol>
        <li>第一项</li>
        <li>第二项</li>
</ol>（ul和li之间不允许插入其他标签）(可单独在<li>之间插入<a>标签写入标题)

在这里插入图片描述

定义列表

类似于标题和标题内容
列表项需要添加标题和对标题
描述列表项由一个标题和解释内容组成的结构

<dl>定义列表
<dt>定义专业术语或名词
<dd>对名词进行解释和描述

<dl>
           <dt>专有名词</dt>
           <dd>注释</dd>
</dl>

图片
在这里插入图片描述

第二周

Day1

嵌套列表

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

菜单（嵌套列表练习）

<!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>嵌套练习</title>
</head>
<body>
 <h1>好美味小吃</h1>  
 <ul>
        <li>小吃类
            <ul>
                <li>炒粉</li>
                <li>螺蛳粉</li>
                <li>蛋炒饭</li>
                <li>鱼香肉丝</li>
            </ul>
        </li> 
 </ul> 
 <ul>
        <li>卤味类
            <ul>
                    <li>鸡肠</li>
                    <li>面筋</li>
                    <li>牛肚</li>
                    <li>鱿鱼</li>
                </ul>

        </li>
 </ul>
 <ul>
    <li>套餐类
        <ul>
                <li>卤肉饭</li>
                <li>烤肉饭</li>
                <li>黄焖鸡饭</li>
                <li>扬州炒饭</li>
            </ul>

    </li>
</ul>
<p><i>亲，满二十元可送餐哦！！</i></p>
</body>
</html>

请添加图片描述

表格标签

<table>:表格的最外层容器
<tr>:定义表格行
<th>:定义表头
<td>:定义表格单元
<caption>:定义表格标题
注：之间有嵌套关系，要符合嵌套规范
语义化标签<tHead><tBody><tFood>
注：tbody是可以出现多次的，但是thead，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>标签页</title>
</head>
<body>
   <h1>是个网页</h1> 
  <p>欢迎打开这个网页</p>
    <table>
     <caption><strong>天气预报</strong></caption>
     <thead>
            <tr>
            <th>日期</th>
            <th>天气情况</th>
            <th>出行情况</th>
            </tr>
     </thead>
 
        <tbody>
        <tr>
            <td>2022年2月22日</td>
            <td><img src="./sun.png" alt=""></td>
            <td>天气晴朗适合出行</td>
        
        </tr>
       
        <tr>
            <td>2022年2月23日</td>
            <td><img src="./rain.png" alt=""></td>
            <td>天气有雨不适合出行</td>
        
        </tr>
        </tbody>
        <tfoot>
       
        </tfoot>   


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

表格属性

border：表格的边框
cellpadding：单元格内的空间
cellspacing：单元格之内的空间
rowspan：合并行
align：左右对齐方式：left靠左、center居中、right靠右
valign：上下对齐方式：top靠上、middle居中、bottom靠下

额外：

<font color="颜色"></font>：改变表格内字体颜色
<td bgcolor="颜色值">:设置表格单元格底色

<table border="1"> <border="1"代表1像素宽度的边框>

请添加图片描述

<table border="1"  cellpadding="30"><cellpadding="30"代表扩大表格内格子30像素>

请添加图片描述

<table border="1"  cellpadding="30" cellspacing="15"><cellspacing="15"代表扩大表格格间距离15像素>

请添加图片描述

<th colspan="2">日期</th><合并列 后跟数字表示合并几列>

请添加图片描述

<td rowspan="2">2022年2月22日</td><合并行 类似于colspan>

请添加图片描述
注意：合并行列后，要删掉原先表示单元格的代码，不然会多出单元格。即合并后单元格占位变多

<tr align="right" valign="top">

左右上下对齐的方式写在tr的表头位置
课后练习
请添加图片描述

<!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>表格练习</title>
</head>
<body>
    <table border="1" cellpadding="5" cellspacing="0">
    <thead bgcolor="lightgray">
        <tr ><strong>
            <th>班次名称</th>
            <th>科目</th>
            <th>授课内容</th>
            <th>增值服务</th>
            <th>课时</th>
            <th>价格</th>
            <th>试听</th>
            <th>购买</th>
            </strong>
        </tr>
    </thead>
   
    <tbody>
        
            <tr >
                <td rowspan="3"><strong>真题精解班</strong></td>
                <td>行测+申论</td>
                <td>全科历年真题精解</td>
                <td rowspan="3">课后赠2套模拟卷24小时以内答疑</td>
                <td>48</td>
                <td ><font color="red">1280元</font></td>
                <td><img src="./耳机1.png"></td>
                <td><img src="./购物车.png"></td>
            </tr>

               <tr >
               
                <td>行测</td>
                <td>行测历年真题精解</td>
                
                <td>32</td>
                <td >980元</td>
                <td><img src="./耳机1.png"></td>
                <td><img src="./购物车.png"></td>
            </tr>
            <tr >
                
                <td>申论</td>
                <td>申论历年真题精解</td>
              
                <td>16</td>
                <td >580元</td>
                <td><img src="./耳机1.png"></td>
                <td><img src="./购物车.png"></td>
            </tr>
            <tr >
                <td rowspan="3"><strong>高分技巧班</strong></td>
                <td>行测+申论</td>
                <td>全科技巧强化</td>
                <td rowspan="3">入学试卷测评24小时答疑</td>
                <td>32</td>
                <td ><font color="red">980元</td>
                <td><img src="./耳机1.png"></td>
                <td><img src="./购物车.png"></td>
            </tr>

               <tr >
               
                <td>行测</td>
                <td>行测速解技巧强化</td>
                
                <td>18</td>
                <td >680元</td>
                <td><img src="./耳机1.png"></td>
                <td><img src="./购物车.png"></td>
            </tr>
            <tr >
                
                <td>申论</td>
                <td>申论速解技巧强化</td>
               
                <td>14</td>
                <td >580元</td>
                <td><img src="./耳机1.png"></td>
                <td><img src="./购物车.png"></td>
            </tr>
    </tbody> 
</table>
</body>
</html>

Day2

表单input标签

 form、input....
 input<单标签>标签有一个type属性，决定是什么控件

一些通用属性

加disabled表示禁选
name后加相同后缀制造多选一效果
加selected默认显示
size=数字多项显示
multiple 多选

表单相关标签

        表单标签？form，input，textarea，select，label..
input（单标签）有一个type属性，决定是什么控件。还有一些常见属性：
checked，disabled，name，for...

<textarea>多行文本框
<select><option>下拉菜单（select包option）
<label>：辅助表单

<!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>
    <from action>"需要提交到的地址"
    <h2>输入框：</h2>
    <input type="text">
    <h2>密码框：</h2>
    <input type="password">
    <h2>复选框：</h2>
     <input type="checkbox" disabled>苹果<!--加disabled表示禁选 -->
    <input type="checkbox">香蕉
    <input type="checkbox">李子
    <h2>单选框</h2>
    <input type="radio" name="gender">男  <!-- （加gender制造多选一效果） -->
    <input type="radio" name="gender">女
    <h2>上传文件</h2>
    <input type="file">
    <h2>提交按钮和重置按钮</h2>
    <input type="submit"><!-- （提交） -->
    <input type="reset"><!-- （重置） -->
    <h2>多行文本框</h2>
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <h2>下拉菜单</h2>
    <select name="" id="">
        <option value="">请选择</option>
        <option value="">北京</option>
        <option value="">上海</option>
        <option selected value="">杭州</option><!-- 加selected默认显示 -->

    </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>《与前面的单选框相比，扩大了可选范围，点击字体也可以进行选择操作（input标签的辅助作用）》
</from>
</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>
    <table >
        <thead>
        <tr>
            <td>登录</td>
        </tr>
    </thead>
    <tbody>
    <tr><td>
        电子邮箱：
    <input type="text"></td>
</tr>
    <tr><td>设置密码：
    <input type="password"></td></tr>
    <tr><td>真实姓名：
    <input type="text"></td></tr>
    <tr><td>性别：
    <input type="radio" name="gender">男
    <input type="radio" name="gender">女</td></tr>
    <tr><td>生日：
    <select name="" id="">
        <option value="">请选择</option>
        <option value="">2002</option>
        <option value="">2003</option>
        <option value="">2004</option>
    </select>
    <select name="" id="">
        <option value="">..</option>
        <option value="">..</option>
        <option value="">..</option>
        <option value="">..</option>
    </select>
    <select name="" id="">
        <option value="">..</option>
        <option value="">..</option>
        <option value="">..</option>
        <option value="">..</option>
    </select></td></tr>
    <tr align="center">
         <td >
            <font color="blue" size="1">
            为什么要填写我的生日?
            </font>
         </td>
    </tr>
    <tr align="left"><td>我现在：
    <select name="" id="">
        <option value="">请选择身份
        <option value=""></option>
        <option value=""></option>
        <option value=""></option><td><font size="1">(非常重要)</font></td></option</td>
        
    </select>
    
    
    
    <tr><td>验证码：
        <input type="text">
   </td></tr>
   <tr><td><img src="./登录按钮.png" alt=""></td></tr>
   <tr>
    <td>
        <input type="button" value="立即注册"/>
   </td>
</tr>
</tbody>
</table>

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

CSS

div与span

  没有默认样式

<div>（块）：做一个区域划分的块
div全称为division，“分割、分区”的意思，<div>标签用来划分一个区域，相当于一块区域容器，可以容纳段落、标题、表格、图像等各种网页元素。即HTML中大多数的标签都可以嵌套在<div>标签中，<div>中还可以嵌套多层<div>,用来将网页分割成独立的、不同的部分，来实现网页的规划和布局。
<span>（内联）：对文字进行修饰的内联
用来修饰文字的，div与span都是没有任何默认样式的，需要配合CSS才行。

CSS基础语法

格式：
选择器{属性1：值1；属性2：值2}
长度单位：
px：像素
%：百分比
外容器>600px 当前容器50%>300px
外容器>400px 当前容50%>200px
基本样式：
width：宽
height：高
background-color：背景色
CSS注释：
/*CSS注释内容*/

内联样式与内部样式

内联（行内、行间）样式
在html标签上添加style属性来实现的
内部样式
在style标签内添加的样式
注：内部样式的优点，可以复用代码
CSS样式的引入方式？
1.内联样式
style属性
2.内部样式
style标签
区别：
内部样式的代码可以复用、复合W3C的规范标准，进行让结构和样式分开处理
3.外部样式
引入一个单独的CSS文件，name，css

通过<link>标签引入外部资源<link rel="stylesheet" href="">其中stylesheet表示链接外部样式表，href后接./xxx.css
rel属性指定资源（当前文档）跟页面（被链接文档）的关系
hrel属性资源的地址
属性值表
@import也能实现引入外部样式，不过不推荐使用<@import url(./xxx.css)>

CSS中的颜色表示法

1.单词表示法：用英文单词表示颜色red，yellow

2.十六进制表示法：#000000黑色 #ffffff 白色
#ff0000红色
十六进制：0 1 2 3 4 5 6 7 8 9 a b c d e f

3.RGB三原色表示法：rgb（255，255，255）；取值范围0~255
rgb（0，0，0）黑色
（RGB红绿蓝）

提取颜色网页工具的下载地址：https：//www.baidufe.com/fehelper
或使用PS吸色

背景样式

1.background-color：背景颜色
2.background-image：背景图片
- url（背景地址）
- 默认水平垂直都平铺满背景图
3.background-repeat：背景图片的平铺方式
- repeat-x x轴平铺
- repeat-y y轴平铺
- repeat x , y都进行平铺，默认值
- no repeat 都不平铺
4.background-position：背景图片的位置（以左上角为原点）
- x y ：number（px、%）| 单词
- x：left、center、right
- y：top、center、bottom
5.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">
    <title>爱门</title>
    <style>
        #div1{width: 1920px; height: 800px;background-image: url(./爱1.png);background-attachment: fixed; }
        #div2{width: 1920px; height: 800px;background-image: url(./爱3.png);background-attachment: fixed;}
        #div3{width: 1920px; height: 800px;background-image: url(./43.png);background-attachment: fixed;}
        table{background-color: rgb(255, 200, 213);}
    </style>
</head>
<body>
    <div id="div1">
                <table >
                    <thead>
                    <tr>
                        <td>登录</td>
                    </tr>
                </thead>
                <tbody>
                <tr><td>
                    电子邮箱：
                <input type="text"></td>
            </tr>
                <tr><td>设置密码：
                <input type="password"></td></tr>
                <tr><td>真实姓名：
                <input type="text"></td></tr>
                <tr><td>性别：
                <input type="radio" name="gender">男
                <input type="radio" name="gender">女</td></tr>
                <tr><td>生日：
                <select name="" id="">
                    <option value="">请选择</option>
                    <option value="">2002</option>
                    <option value="">2003</option>
                    <option value="">2004</option>
                </select>
                <select name="" id="">
                    <option value="">..</option>
                    <option value="">..</option>
                    <option value="">..</option>
                    <option value="">..</option>
                </select>
                <select name="" id="">
                    <option value="">..</option>
                    <option value="">..</option>
                    <option value="">..</option>
                    <option value="">..</option>
                </select></td></tr>
                <tr align="center">
                    <td >
                        <font color="blue" size="1">
                        为什么要填写我的生日?
                        </font>
                    </td>
                </tr>
                <tr align="left"><td>我现在：
                <select name="" id="">
                    <option value="">请选择身份
                    <option value=""></option>
                    <option value=""></option>
                    <option value=""></option><td><font size="1">(非常重要)</font></td></option</td>
                    
                </select>
                
                
                
                <tr><td>验证码：
                    <input type="text">
            </td></tr>
            <tr><td><img src="./登录按钮.png" alt=""></td></tr>
            <tr>
                <td>
                    <input type="button" value="立即注册"/>
            </td>
            </tr>
        
            <tr><td><img src="./5.png" alt=""></td></tr>
            <tr>
            </tbody>
            </table >
    </div>
    <div id="div2">
        <tr><td><img src="./111.png" alt=""></td></tr>
        <tr> <tr><td><img src="./9.png" alt=""></td></tr>
    </div>
    <div id="div3">    
            <table border="1" cellpadding="5" cellspacing="0">
            <thead bgcolor="lightgray">
                <tr ><strong>
                    <th>班次名称</th>
                    <th>科目</th>
                    <th>授课内容</th>
                    <th>增值服务</th>
                    <th>课时</th>
                    <th>价格</th>
                    <th>试听</th>
                    <th>购买</th>
                    </strong>
                </tr>
            </thead>
        
            <tbody>
                
                    <tr >
                        <td rowspan="3"><strong>真题精解班</strong></td>
                        <td>行测+申论</td>
                        <td>全科历年真题精解</td>
                        <td rowspan="3">课后赠2套模拟卷24小时以内答疑</td>
                        <td>48</td>
                        <td ><font color="red">1280元</font></td>
                        <td><img src="./耳机1.png"></td>
                        <td><img src="./购物车.png"></td>
                    </tr>
        
                    <tr >
                    
                        <td>行测</td>
                        <td>行测历年真题精解</td>
                        
                        <td>32</td>
                        <td >980元</td>
                        <td><img src="./耳机1.png"></td>
                        <td><img src="./购物车.png"></td>
                    </tr>
                    <tr >
                        
                        <td>申论</td>
                        <td>申论历年真题精解</td>
                    
                        <td>16</td>
                        <td >580元</td>
                        <td><img src="./耳机1.png"></td>
                        <td><img src="./购物车.png"></td>
                    </tr>
                    <tr >
                        <td rowspan="3"><strong>高分技巧班</strong></td>
                        <td>行测+申论</td>
                        <td>全科技巧强化</td>
                        <td rowspan="3">入学试卷测评24小时答疑</td>
                        <td>32</td>
                        <td ><font color="red">980元</td>
                        <td><img src="./耳机1.png"></td>
                        <td><img src="./购物车.png"></td>
                    </tr>
        
                    <tr >
                    
                        <td>行测</td>
                        <td>行测速解技巧强化</td>
                        
                        <td>18</td>
                        <td >680元</td>
                        <td><img src="./耳机1.png"></td>
                        <td><img src="./购物车.png"></td>
                    </tr>
                    <tr >
                        
                        <td>申论</td>
                        <td>申论速解技巧强化</td>
                    
                        <td>14</td>
                        <td >580元</td>
                        <td><img src="./耳机1.png"></td>
                        <td><img src="./购物车.png"></td>
                    </tr>
                    <tr><td><img src="./7.png" alt=""></td></tr>
            </tbody> 
        </table>
    </div>
  
</body>
</html>

CSS边框样式

border-style：边框的样式
- solid：实线
- dashed：虚线
- dotted：点线
border-width：边框的大小
- px . . .
border-color：边框的颜色
- red #f0000 . . .
  注：针对某一条边框进行单独设置

边框实现三角形

练习：边框实现三角形
请添加图片描述

<!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>
        body{background-color: rgba(199, 39, 39, 0.83);}
        div{width: 0px;height: 0px;
        border-top-color: transparent;
        border-top-style: solid;
        border-top-width: 30px;
        border-right-color: transparent;
        border-right-style: solid;
        border-right-width: 30px;
        border-bottom-color: blue;
        border-bottom-style: solid;
        border-bottom-width: 30px;
        border-left-color: transparent;
        border-left-style: solid;
        border-left-width: 30px;

        
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

CSS文字样式

font-family：字体类型

英文字体：Arial，′Times New Roman′
中文字体：宋体，微软雅黑（默认）
中文字体的英文名称

微软雅黑：′Microsoft YaHei′
宋体：SimSun

衬线体与非衬线体
注意事项：

1.设置多字体的方式

div{ font-family：SimSun，微软雅黑，宋体}设置多个字体，用逗号隔开，作备选方案，防止用户计算机无该字体。

2.引号的问题

英文中间有空格在外部需要用引号隔开

font-size：字体大小
默认大小：16px
写法：nuber（px 建议偶数便于实现对齐）或单词（见下表，不推荐）

属性取值	字体大小
xx-samll	最小
x-small	较小
small	小
medium	正常（默认值）
large	大
x-large	较大
xx-large	最大

font-weight：字体粗细
模式：正常（normal）加粗（bold）
写法：单词（normal、bold）| number（100 200 . . . . . 900等整百数，100到500是正常的，600到900是加粗的）
font-style：字体样式

模式：正常（normal）斜体（italic）
写法：单词（nomal italic）
注：oblique也表示斜体，用的比较少，了解即可
区别：
- 1、italic 所有带有倾斜字体的可以设置
- 2、oblique 没有倾斜属性的字体也可以设置倾斜操作

color：字体颜色

CSS段落样式

text-decorattion：文本装饰

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

注：装饰可以添加多个：line-through underline overline
text-transform：文本大小写（针对英文）

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

text-indent：文本缩进

首行缩进
使用：p{ text-indent:需要空出来的像素（32px）；font-size：字体大小像素（字体默认16px像素）}

缺点：使用像素单位时，若字体不是16px容易不对齐

em单位：相对单位,lem永远都是跟文字大小相同
使用：p{ text-indent:几em）;font-size：字体大小像素}

text-align：文本对齐方式

对齐方式：left（左对齐）、right（右对齐）、center（居中对齐）、justify（左右对齐）

使用：p{ text-align:left；}

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

请添加图片描述

文本间距

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">
    <title>Document</title>
    <style>
        div{width: 800px;}
        h1{text-align: center;color: #3fff21;}
        h2{color: #14822a9a;}
        #p1{font-style:italic ;font-weight: bold;}
        #p2{color: #21fff4;line-height: 30px;text-indent: 2em; }
        #p3{color: #3021ff;line-height: 30px;text-indent: 2em;text-decoration: underline;font-style: italic;}
        #p4{color: #91a301;letter-spacing: 10px;font-weight: bold;   line-height: 30px;text-indent: 2em;}
        #p5{color: #ffb121;line-height: 30px; text-indent: 2em;}   
        #p6{color: #21ff58;line-height: 30px;}
        #p7{color: #ff21ec;line-height: 30px;}

    </style>
</head>
<body>
    <div>
        <h1>纳西妲简介</h1>
            <p id="p1">米哈游出品的游戏《原神》及其衍生作品中的角色，“尘世七执政”中须弥的草之神，被须弥人给予“小吉祥草王”的爱称。现今七神中最年轻的一位，自诞生起已五百年。</p>
        <h2>角色形象</h2>
            <p id="p2">
                在纳西妲的观点中，万事万物都存在着相互联系，一切事物都可以指向“命运”。纳西妲很喜欢使用比喻，她认为比喻是可以用已知知识来理解未知知识的奇妙工具 。虽然会很多大道理，但对常识却不怎么了解 。</p>
            <p id="p3">对比起全知全能的大慈树王，纳西妲自认还远远担不起“智慧之神”的名号，对国家的治理也是教令院更加驾轻就熟，她的存在并没有那么大的意义。所以她在净善宫的每一刻都不停在学习，希望尽快成长为一位合格的神明。 </p>    
        <h2>角色生活</h2>
            <p id="p4">大慈树王消失后，贤者们找到了刚刚诞生的纳西妲，并接回须弥。当时的她幼小无力，贤者们便以“保护”的名义，将她囚禁在净善宫中，几乎不再过问</p>
            <p id="p5">纳西妲深居净善宫内，向来不受重视，也很少被人提及。她一刻不停地学习各种知识，只为更快成长为一位合格的神明，尽早地开始引导国民。若不是“禁忌”的威胁日渐临近，她又何尝不想暂时休憩，亲眼去看看须弥的无数生灵？现在的她，只能于梦中遍览五彩斑斓的世间盛景。</p>
            <p id="p6">在心灵的净土中，她与阳光和微风作伴，与人类和动物交友，一起讲故事，做游戏，唱刚刚学会的歌…她将最美好的向往尽数倾注于梦境，但无论夜晚如何喧闹，每当白日来临，她的身畔又会重归寂静。她悠悠起身。睡眼惺忪之际，孤独突如寒潮般袭来，她不由得抱紧了双肩。</p>
        <h2>角色能力</h2>
            <p id="p7">草神拥有操控梦境的能力。虚空依靠神之心来运转，是智慧之神力量的具现。它统合全民的智慧，并将知识赐予人民 。虚空是大慈树王的遗产，而纳西妲既是小吉祥草王，又是“最初的虚空终端”，她的意识一直连接在虚空当中。理论上，纳西妲可以进入任何佩戴着虚空终端的人的脑海里。不过她一向尊重须弥子民的自我意志，从未真的去侵占他们的意识，只会在必要时借用一下至冬的仿生人偶凯瑟琳。</p>
    </div>
    
</body>
</html>

CSS复合样式

一个CSS属性只控制一种样式，叫做单一样式。
一个CSS属性控制多种样式，叫做复合样式。
复合样式
复合的写法是通过空格的方式实现的。复合写法有的是不需要关心顺序，例如background、border；有的需要关心：font

background：red url( ) repeat 0 0;
border：1px red solid;
font：
- 注意：最少由两个值 size family（包尾）
- weight style size family✔
- style weight size family✔
- weight style size/line-height family✔

尽量不要混写，如果非要混写，那么一定要先写复合样式再写单一样式，样式才不会被覆盖掉。

CSS选择器

ID选择器及注意事项

css：#elem{}
html：id=“elem”
其中elem：elem是单词element（元素）的缩写，在程序定义中代表某一不确定的类型，也就是抽象的数据类型
为了使程序可读性强，并且便于修改，让elem代表多种的数据类型
注：
- ID是唯一值，在一个页面中只能出现一次，多次出现时不符合规范的。
- 命名的规范：由字母、下划线、中划线、字母组成（并且第一个不能是数字）
- 驼峰写法：searchButton（小驼峰，也作searchSmallButton）SearchButton（大驼峰）两种驼峰区别于开头大小写
  - 短线写法：search-samll-button
  - 下划线写法：search_samll_button

一些命名规则 请添加图片描述