HTML和Css的学习
文章目录
- 第一部分：
-
- 了解学习的目标
- 第二部分
-
- 开始步入学习
-
- 1.HTML和Css是做网站的编程语言。
- 2.VS Code的基本快捷操作
- 3.网站开发的基本需求
- 4.初步的代码实践
- 5.HTML
- 6.总手敲的代码：
- 7. 图片标签与图片属性
- 8.引入文件的地址路径：
- 9. 链接标签
- 10.跳转锚点
- 11.特殊符号：
- 12.列表标签
- 13.嵌套列表
- 14.表格表单
- 15.Css基础语法
- 16.Css文字样式
- 17 .Css段落样式
- 18.Css的复合样式
- 19.Css选择器
第一部分：
了解学习的目标
1.拨云见日
Html、Css、切图流程、 PC企业站布局、PC游戏站布局
2.溯本求源
扩展HTML、扩展Css、HTML5新语法、CSS3新语法、兼容与hack
3.风生水起
弹性布局、网格布局、移动端布局、响应式布局、Bootstrap
4.巧夺天工
预编译Css、postcss、css架构、高级功能、css与JS交互
第二部分
开始步入学习
1.HTML和Css是做网站的编程语言。
HTML和Css的介绍：
（浏览器把代码解析后的样子就是我们看到的网站）
HTML（HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明we以说明文字、图形、动画、声音、表格、链接等）
Css（“Cascading Style Sheet”。CSS 的主要作用是定义网页的样式（美化网页),对网页中元素的位置、字体、颜色、背景等属性进行精确控制。CSS 不仅可以静态地修饰网页，还可以配合 JavaScript 动态地修改网页中元素的样式，而且市面上几乎所有的浏览器都支持 CSS ）
2.VS Code的基本快捷操作
需要使用优良的编辑器：VS Code编辑器
ctrl+c：复制
ctrl+v：粘贴
ctrl+x：剪切
ctrl+a：全选
ctrl+s：保存
ctrl+z：撤销
ctrl+y：前进
ctrl+d：选择相同元素的下一个
alt+⬆或⬇：快速移动
alt+鼠标左键：多光标
3.网站开发的基本需求
主流浏览器：Chrome浏览器（2022年7月）
1.UI设计师
2.web前端开发工程师（H5开发）
设计稿→代码
数据库里的数据→显示到页面
HTML+Css：
HTML：结构
Css：样式
JavaScript:行为（ 是一种脚本语言，可以用来创建动态更新的内容，控制多媒体，制作图像动画）
3.web后端开发工程师
4.初步的代码实践
<style>
div{ color:red;font-style:italic;}
style>
<div>HTML+Cssdiv>
5.HTML
一.HTML基本结构和属性:
HTML：超文本、标记、语言
1.超文本：
文本内容+非文本内容（图片，视频，音频等）
2.标记：单词
标记也叫标签：
快捷键：单词+tab→<单词>
单标签：
双标签：
<标签 属性="值"属性2="值"属性2>
例：
3.语言：编程语言
二.HTML初始代码：
快捷键：（！+ tab）
DOCTYPE html> 文档声明（告诉浏览器这是一个html文件）
<html lang="en"> html文件的最外层标签：包裹着所有html标签代码 lang="en"英文网站 lang="zh-CN"中文网站
<head>
<meta charset="UTF-8"> 元信息：是编写网页中的一些赋值信息
<title>Documenttitle> 设置网页标题
head>
<body>
显示网页内容的区域
body>
html>
三.HTML注释：
<!--注释内容-->在浏览器里看不到，只能在代码中看到注释的内容
快速添加注释与删除：
1.ctrl+/
2.shift+alt+a
注释的意义：
1.将暂时不用的代码存储起来
2.对开发人员进行提示
四.HTML语义化：
1.在没有Css的情况下，页面也能呈现出很好的内容结构
2.有利于SEO，让搜索引擎爬虫更好的理解网页
3.方便其他设备解析（如屏幕阅读器，盲人阅读器）
4.便于团队开发与维护
五.标题与段落：
（查看源文件就可以看点网页代码）
1.标题→双标签：
······
在一个网页中：
h1标题最重要且只能出现一个
h5和h6不经常使用
2.段落→双标签：
六.文本修饰标签：
<strong>：表示强调，会对文本进行加粗
<em>:表示强调，会对文本进行斜体
<sub>：下标文本
<sup>：上标文本
<del>：删除文本
<ins>：插入文本
（删除和插入配合使用）
6.总手敲的代码：
<p>
<strong>一个需要强调的东西strong>
<em>一个需要强调的东西em>
p>
<p>
a<sub>2sub> +b<sup>2sup> =c<sup>2sup> H<sub>2sub>
p>
<P>
促销：原价<del>300del>，现价<ins>100ins>
P>
7. 图片标签与图片属性
src：引入图片的地址（图片所在网页链接）
alt：当图片出现问题的时候可以显示一段友好的显示文字
title：提示信息
width，height：控制图片的大小（像素）
代码展示：
<img src=""alt=""title=""width、height="">
8.引入文件的地址路径：
1.相对路径：（用\隔开）
.在路径中表示当前路径
..在路径中表示上一级路径
2.绝对路径：
文件夹所在位置D:\visual studio\VB\Bin
网站链接https://www.bilibili.com/bangumi/play/ep266323
9. 链接标签
1.a→标签（双标签）
href属性：地址
target属性：可以改变链接打开的方式，默认情况下：在当前页面打开_self 新窗口打开 _black
（可以与图片链接联合使用）
<a href="https://www.taobao.com/"target="https://www.taobao.com/"_black>访问淘宝a>
2.base→标签（单标签）：改变链接的默认行为，在中使用
<head>
<base href="" target="">
head>
10.跳转锚点
实现一：#加id属性：
<a href="#html">html样式a>
<a href="#Css">Css层叠样式表a>
<a href="#javascript">java脚本a>
<h2 id="html">html样式h2>
<p>模拟段落p>
<p>模拟段落p>
<p>模拟段落p>
<h2 id="Css">Css样式h2>
<p>模拟段落p>
<p>模拟段落p>
<p>模拟段落p>
<h2 id="Javascript">java脚本h2>
<p>模拟段落p>
<p>模拟段落p>
<p>模拟段落p>
实现二：#加name属性（加在a标签内）：
<a href="#html">html样式a>
<a href="#Css">Css层叠样式表a>
<a href="#javascript">java脚本a>
<a name="html">html样式a>
<h2 >html样式h2>
<p>模拟段落p>
<p>模拟段落p>
<p>模拟段落p>
<a name="Css">Css样式a>
<h2 >Css样式h2>
<p>模拟段落p>
<p>模拟段落p>
<p>模拟段落p>
<a name="javascript">java脚本a>
<h2 >java脚本h2>
<p>模拟段落p>
<p>模拟段落p>
<p>模拟段落p>
11.特殊符号：
1.&+字符
2.解决冲突啊 左右尖括号、添加多个空格实现
空格符
版权 ©
注册商标 ®
小于号 <
大于号 >
和号 &
人民币 ¥
摄氏度 °
12.列表标签
1.无序列表→ul li
ul li：符合嵌套的规范（二者必须组合出现，他们之间不能有其他标签）
type属性：改变前面标记的样式（一般都用Css去控制）
<ul type="circle">
<li>#li>
ul>
<ul>
<li><a href="#"><strong>内容strong>a>li>
<li><a href="#">内容a>li>
<li><a href="#">内容a>li>
<li><a href="#">内容a>li>
<li><a href="#">内容a>li>
ul>
（#字用来占位）
2.ol li：一般用的比较少，可以用无序列表来实现
type属性：改变前面标记的样式（一般都用Css去控制）
<ol>
<li><a href="#"><strong>内容strong>a>li>
<li><a href="#">内容a>li>
<li><a href="#">内容a>li>
<li><a href="#">内容a>li>
<li><a href="#">内容a>li>
ol>
3.dl dt dd列表项：需要添加标题和对标题进行描述的内容
<dl>
<dt>HTMLdt>
<dd>超文本标记语言dd>
<dt>Cssdt>
<dd>层叠样式表dd>
<dt>JavaScriptdt>
<dd>网页脚本语言dd>
dl>
Type属性：<ul type="">``<ol type="">
1.在ul中：
disc实心圆
circle空心圆
square实心方块
2.在ol中：
1代表数字
a代表小写字母
A代表大写字母
i代表小写希腊字母
I代表大写希腊字母
13.嵌套列表
列表之间可以互相嵌套形成多层级列表
例子1：
<ul>
<li>
江苏省
<ul>
<li>徐州li>
<li>邳州li>
<li>苏州li>
ul>
li>
<li>
山东省
<ul>
<li>济南li>
<li>青岛li>
<li>烟台li>
ul>
li>
ul>
例子2：
<dl>
<dt>好美味的小吃dt>
<dd>
<dl>
<dt>小吃类dt>
<dd>煮粉干dd>
<dd>拌青菜dd>
<dd>蛋炒饭dd>
<dd>煎蛋dd>
<dd>米饭dd>
dl>
<dl>
<dt>卤味类dt>
<dd>鸭肠dd>
<dd>面筋dd>
<dd>牛肚dd>
<dd>猪耳朵dd>
<dd>大肠dd>
<dd>鱿鱼dd>
dl>
<dl>
<dt>套餐类dt>
<dd>卤面筋饭dd>
<dd>猪肉肉饭dd>
<dd>猪耳朵饭dd>
<dd>卤猪脚饭dd>
<dd>卤猪舌头饭dd>
dl>
<dl>
<dt>炖爆类dt>
<dd>猪蹄黄豆dd>
<dd>猪肚莲子dd>
<dd>猪心枸杞dd>
<dd>羊肉枸杞dd>
<dd>牛肉枸杞dd>
dl>
<dt><em>亲,20元以上可送餐哦!!em>dt>
dd>
dl>
14.表格表单
1.表格标签：
<table>:表格的最外层容器
<tr>:定义表格行
<th>:定义表格头
<td>:定义表格单元
<caption>:定义表格标题
<tHead>、<tBody>、<tFood>语义化标签
（之间有嵌套关系，要符合嵌套规范）
例子：见下面表格属性
2.表格属性：
border:表格边框
cellpadding:单元格内的空间
cellspacing:单元格之间的空间
rowspan:合并行(上有rowspan=“2”那下面相同的就可以删去)
colspan:合并列
align:左右对齐方式(left,center,right)
valign:上下对齐方式(top,middle,botton)
<table border="1" cellpadding="" cellspacing="">
<tr align="right" valign="top">
<td rowspan="2">内容td>
<table border="1"cellpadding="20"cellspacing="5">
<caption>购物caption>
<tHead>
<tr>
<th>班次名称th>
<th>科目th>
<th>授课内容th>
<th>增值服务th>
<th>课时th>
<th>价格th>
<th>试听th>
<th>购买th>
tr>
tHead>
<tBody>
<tr>
<td rowspan="3">真题精解班td>
<td>行测+申论 td>
<td>金科历年真题解析td>
<td rowspan="3">课后2套模拟卷24小时内答疑td>
<td>48td>
<td>1280元td>
<td>td>
<td>td>
tr>
<tr>
<td>行测 td>
<td>行测历年真题解析td>
<td>32td>
<td>980元td>
<td>td>
<td>td>
tr>
<tr>
<td>申论 td>
<td>申论历年真题解析td>
<td>16td>
<td>580元td>
<td>td>
<td>td>
tr>
<td rowspan="3">高分技巧班td>
<td>行测+申论td>
<td>金科历年真题解析td>
<td rowspan="3">入学试卷测评24小时内答疑td>
<td>32td>
<td>980td>
<td>td>
<td>td>
tr>
<tr>
<td>行测td>
<td>行测历年真题解析td>
<td>18td>
<td>680td>
<td>td>
<td>td>
tr>
<tr>
<td>申论td>
<td>申论历年真题解析td>
<td>14td>
<td>580td>
<td>td>
<td>td>
tr>
tBody>
table>
3.表单标签
<form>:表单的最外层容器
<input>：标签用于搜集用户信息，根据不同的type属性值，展示不同的控件（单标签）
text：普通的文本输入框
password：密码输入框
checkbox：复选框
radio：单选框
file:上传文件
submint：提交按钮
reset：重置按钮
例子：
<form>
<h2>输入框：h2>
<input type="text"placeholder="请输入密码">
<h2>密码框：h2>
<input type="password"placeholder="请输入密码"> （placeholder提示文字）
<h2>复选框：h2>
<input type="checkbox"checked>可乐 (checked选定，disabled否定)
<input type="checkbox"checked>雪碧
<input type="checkbox"disabled>果汁
<h2>单选框：h2>
<input type="radio"name="gender">男
<input type="radio"name="gender">女
<h2>上传文件：h2>
<input type="file">
<h2>提交按钮：h2>
<input type="submit">
<input type="reset">
form>
<textarea>：多行文本框
<select>、<option>：下拉菜单 （selected被选择，multiple多选择，size出现几项）
<label>：辅助标签
例：
<textarea name="" id="" cols="30" rows="10">textarea>
<option selected disabled>请选择option>
<input type="radio"name="gender"id="man"><label for="man">男label>
<input type="radio"name="gender"id="woman"><label for="woman">女label>
4.表格表单组合
表格表单之间可以互相组合形成数据展示效果
<form action="">
<table border="1"cellpadding="30">
<tBody>
<tr>
<td rowspan="4">总体用户信息td>
<td colspan="2"align="center">用户注册td>
tr>
<tr>
<td>用户名：td>
<td><input type="text"placeholder="请输入用户名">td>
tr>
<tr>
<td>密码：td>
<td><input type="text"placeholder="请输入密码">td>
tr>
<tr>
<td colspan="2"align="center">
<input type="submit">
<input type="reset">
td>
tr>
tBody>
table>
form>
5. 一 2.内部样式：
div（块）:分割，分区，做一个区域划分的块
span（内联）：用来修饰文字的
二者没有默认样式，需配合Css来使用
<div>
<h2><a href="#">内容<span>html5span>内容a>h2>
<a href="#"><img src=""alt="">a>
<p>内容p>
<a href="#">链接a>
div>
15.Css基础语法
1.格式：选择器（属性1：值1；属性2：值2）
2.单位：px→像素（pixel）、%→百分比
3.基本样式：width、height、background-color
4.Css注释：/*内容 */
二
1.内联（行内，行间）样式：
在html标签上添加style属性来实现<body>
<div style="width:100px;height:100px;background-color:red">我的天哪div>
body>
style标签
在