1：HTML纯干货学习后的达到的效果
（1）：会使用HTML的基本结构，创建网页
（2）：会使用文本字体相关标签，实现文字修饰和布局
（3）：会使用图像、超链接相关标签，实现图文并茂的页面
（4）：会使用表格相关标签，实现简单表格，跨行、跨列的复杂表格，并对表格进行美化修饰
（5）：会使用表单及表单元素标签，实现表单页面的制作
（6）：理解post和get两种提交方式的区别
2：HTML的基本结构
2.1：标题和其他说明信息。包括在 <HEAD>…</HEAD> 标签内，<head>标签定义的内容在网页中不可见
2.2：<TITLE>： 定义网页标题
2.3：<meta>标签
<HEAD>
<META name="author" content="zpark">
<!--定义网页的作者-->
<META name="keywords"content="云计算,分布式处理,大数据,...">
<!--定义网页的关键字-->
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<!--避免出现乱码-->
<META http-equiv="refresh" content="1">
<!--定义网页每隔1秒自动刷新-->
<META http-equiv="refresh" content="2;url=http://www.taobao.com">
<!--定义网页2秒后自动刷新到"淘宝"-->
</HEAD>
2.4：文本、图像和链接。它包括在 <BODY>…</BODY> 标签内
<BODY bgcolor="#FFCCFF“ background="back_image.GIF" text="#FF0000">
hello world!!!
</BODY>
2.5：<HTML>…</HTML>标签标记 HTML 文档的开始和结束
2.6：标题标签(H1 到 H6 标签用于指定不同级别的标题)
<h1><h2><h3><h4><h5><h6>字体大小依次递减
2.7：字体字号<font>标签
<font size="1-7" color="" face="">
<!--字体大小可取1-7，字体颜色，字体类型-->
</font>
2.8：特殊符号
空格：
引号("")："
小于(<)：<
大于(>)：>
版权符：©
2.9：段落和换行
段落标签：<p aligin="right/center/left"></p>
<!--align可以调正文字的位置，左中右-->
换行标签：<br/>
2.10：水平线和列表和预格式文本
水平线：<hr size="5" color="red" width="300">标签
设置水平线的厚度值，颜色和宽度
列表标签：
有序列表：
<ol type="1">
<li></li>
...
</ol>
无序列表：
<ul type="circle">
<li></li>
...
</ul>
预格式段落：<pre>标签
2.11：图像标签
<img src="images/adv_2.jpg" width="300“ height="150“ alt="明星演唱会开幕" >
<!--图像的位置，宽度，高度，为图形添加的提示性文字（鼠标移动到图形上）-->
<img ... align="middle">
<!--图像与文本的对齐方式，图像与文本居中对齐,还可以取top, bottom 值-->
2.12：超链接<a>标签：
<a href="register/register.html">[免费注册]</a>
<!--链接的地址，和链接的内容（可单击）-->
设置超链接的显示位置：
target：目标窗口属性四个特殊的窗口
<a href=url target=“_blank”> 显示在新窗口
<a href=url target=“_self”> 显示在本窗口
<a href=url target=“_parent”> 显示在父窗口
<a href=url target=“_top”> 显示在整个浏览器窗口
注意重点：
超链接-锚记属性：
链接到本页面
锚记标签用于使用户“跳”到文档的某个部分
步骤1：创建锚记
<a name=“marker”>主题名称</a>
步骤2：在超链接的 href中使用该锚记
<a href="#marker">xxx</a>
2.13：表格的基本结构
在 HTML 文档中，广泛使用表格来存放网页上的文本和图像
语法如下：
<table border="1'>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<!--border用来设置表格边框尺寸大小，tr定义行，td定义列，table定义表格-->
跨多行的表格 ：
rowspan =“n” 属性表示跨多少行？
<td rowspan="3">学生成绩表</td>
跨多列的表格：
colspan=“n” 属性表示跨多少列？
<td colspan="3">学生成绩表</td>
2.14：表格的美化修饰（表格的宽度，高度，背景色，背景图片，文字的对齐方式）
设置表格的尺寸和边框：
width用来设置表格的宽度
height用来设置表格的高度
border用来设置表格边框尺寸大小
bordercolor用来设置表格边框颜色
设置背景：
background属性用来设置表格的背景图片
bgcolor属性用来设置表格、行、列的背景色。“#EBEFFF”是用RGB表示的一种颜色
值，RGB指的是红绿蓝 ，下图就是RGB颜色对照表 。
设置对其方式：
align属性用来设置表格、行、列的对齐方式
填充属性、间距属性：
border(边框的厚度)
cellpadding(单元格填充)用来设置表格内填充距离
cellspacing(单元格间距)用来设置表格内框宽度
2.15：表单
表单的典型应用：
注册用户
收集信息
反馈信息
为网站提供搜索工具
表单中包含的表单元素：
单行文本输入框(TEXT)
<INPUT type=“text ” value="张三" size="20">
type="text";文本输入框
value="";输入元素的默认值
size="";文本框的宽度
密码框(PASSWORD)
<INPUT type=“password ” value=“ 123456 ” size=“22”>
type="password";密码框
value="";初始密码
size="";密码区的宽度
单选按钮(RADIO)
<INPUT type="radio" value="男" checked="checked">
type="radio";单选按钮
value="";初始值
checked="checked";默认选中
复选框(CHECKBOX)
<INPUT type=“checkbox” name="cb2" value="talk">
type="checkbox";复选框
name="":复选框名
value="";复选框值
checked="checked";设置此复选框默认被选中
重置按钮(RESET)
<INPUT type="reset" name="Reset" value="重填">
type="button/reset/submit";按钮类型可为button、submit,reset
name="":按钮名称
value="";按钮上面的文字
多行文本框(TEXTAREA)
<TEXTAREA name="textarea" cols="40" rows="6">
文本框中的内容
</TEXTAREA>
name="textarea" ;文本框的名字
cols="40";文本框的列数
rows="6";文本框的行数
下拉列表(SELECT)
<select name=“名称” >
<option value=“选项的值” selected>
…
</option>
<option value=“选项的值”>
…
</option>
……
</select>
说明： selected默认被选中的可选项。
案例说明
<INPUT name="byear" value="yyyy" size=4 maxlength=4 >年
maxlength=4;设置此输入框最多只能输入四个符号
提交按钮(SUBMIT)
表单的基本结构：
<FORM action=“http://www.sohu.com” method=“post”>
……
</FORM>
ACTION = “URL”；指定提交后，由服务器上那个处理程序处理
METHOD =“post或get”；指定向服务器提交的方法:一般为post或get方法,
post方法比较安全
表单元素的统一格式：
<FORM name="form3" method="post" action="">
<INPUT type="xxx" name="xxx" value="xxx" size="21“ maxlength="4"
checked="checked">
……
</FORM>
type="";指定元素的类型，可为TEXT、RADIO、SUBMIT等
name="";控件的名称
value="";控件的初始值
size="";控件的初始宽度
maxlength="":控件中输入的最多字符个数
checked="":控件是否被选中
2.16：框架
（1）：框架集页面(FrameSet.htm)
（2）：广告栏顶部框架(top.htm)
（3）：框架的边框
（4）：导航栏左侧框架(left.htm)
（5）：详细内容页面右侧框架(main.htm)页面中此部分是变化的
框架的基本结构：
<FRAMESET rows="25%,50%,*" border="5">
<FRAME name=“top" src="the_first.html">
<FRAME name="middle" src="the_second.html">
<FRAME name=“bottom" src="the_third.html">
</FRAMESET>
rows=""; 将窗口进行上下分割，各部分的高度用逗号分开
cols: 将窗口进行左右分割，各部分的宽度用逗号分开,可选。
在浏览器中创建左中右结构的窗口： <frameset cols="150,*"...>
border="5"；窗口边框的宽度
使用框架：
创建多个复杂的窗口实现步骤如下：
1、创建1个HTML页面“top.html”
2、创建1个HTML页面“left.html”
3、创建1个HTML页面“right.html”
4、创建框架集HTML页面“Frame_Sets.html”
<FRAMESET rows="20%,*" frameborder="0">
<FRAME src="top.html" name="topframe“ scrolling="no"
noresize="noresize">
<FRAMESET cols="20%,*">
<FRAME src="left.html" noresize="noresize“ scrolling="no"
name="leftframe“ >
<FRAME src="right.html" name="rightframe">
</FRAMESET>
</FRAMESET>
frameborder="0"；设置无框架边框
scrolling="no" ；不显示滚动条
name="rightframe"；框架名称，便于超链接target属性所引用
设置超链接的显示位置：
框架指定名称
<frame src=“url” name=“框架名”>
target 给超链接指定显示位置
<a href="url" target=“框架名”>
<P>
<a href="right.html" target="rightframe">
<IMG src="images/reg.jpg" width="158" height="31" border="0" />
</a>
</p>
<P>
<a href="buy.html" target="rightframe">
<IMG src="images/buy.jpg" width="160" height="32" border="0" />
</a>
</p>
target="rightframe"；target属性指定了要链接的文件会出现在名称
为“rightframe”的框架窗口里
3：CSS纯干货学习后的达到的效果(CSS层叠样式表)
（1）：会创建统一外观的字体
（2）：文本会创建无下划线的超连接样式
（3）：会创建个性化的表格
（4）：会创建个性化的表单
（5）： 会使用DIV实现页面布局
（6）：CSS样式表
HTML标签的外观样式比较单一
颜色只有黑白
字体类型和大小无变化
CSS（Cascade Style Sheets）级联/层叠样式表
作用：
HTML页面的美化（相当于华丽的衣服）
实现内容与样式的分离，方便团队开发
4：CSS语法学习
4.1：样式表的基本语法
样式表的基本结构：
<STYLE type="text/css">
P{color:red; font-size:30px; font-family:隶书;}
……
</STYLE>
<style type="text/css">文档样式表开始，类型为CSS样式
</style>声明文档样式表结束
p{....}样式规则;
样式规则：
P {color:red; font-size:30px; font-family:隶书;}
p:选择器
属性名称：color:red; font-size:30px; font-family:隶书;
注意：在最后一个属性后面加上一个分号 (;) 是一个好习惯
4.2：样式的分类
根据样式代码的位置，分为三类：
行内样式：
使用场景：如果希望某段文字和其他段落的文字显示风格不一样，
那么使用用“行内样式”。
使用语法：行内样式使用元素标签的 STYLE 属性定义。
<html标签 ... style="样式规则">xxx</html标签>
<p style=“color:#FF00FF; font-family:隶书; font- weight:bold; font-
size:24px">
...
</p>
内嵌样式：
行内样式表局限于某1个标签，如果希望本网页内的所以同类标签都采用统一样式，
这时应采用内嵌样式。
P { font-size:20px; color:blue; text-align:center }
选择器名称，样式规则，样式表；
根据选择器的不同，内嵌样式又分为：
HTML 选择器：
P { font-size:20px; color:blue; text-align:center }
CLASS 类选择器：
.myinput {border: 1px solid;border-color:#D4BFFF;
color:#2A00FF}
类选择器的定义格式为：
.类名{ …样式规则;}
应用类选择器：class＝"类名(不含 . )"；
ID 选择器：
#fire { color:red; font-size: 24px; }
ID选择器的定义格式为：
＃ID名{ …样式规则;}
应用ID选择器：id＝"ID名(不含#)"；
CLASS和ID选择器的区别：
1、在CSS中定义样式表时，ID选择器以"#"开头；CLASS选择器以"." 开
头；
2、在HTML中使用样式表时，使用ID选择器需要id属性；使用CLASS选择
器需要class属性；
3、HTML标签中的id属性，通常用于唯一的标识页面中的一个页面元素，
不允许重复；class允许重复。
4、优先使用CLASS选择器；ID选择器不推荐。
内嵌样式-特殊的选择器：
A:hover 特殊的伪类选择：
其中A代表超链接
hover：代表鼠标悬停
active：当前活动的超链接
visited：访问过的超链接
link：未访问过的超链接
外部样式：
使用场景：同一网站内的多个网页，样式风格统一。
第一步：创建样式表文件newstyle.css
第二步：把样式文件和网页关联
<HEAD>
<LINK rel="stylesheet" type="text/css" href="样式表文件.css">
</HEAD>
第三步：浏览查看各网页
样式文件：newstyle.css P{…..}；
4.3：样式的混合使用
行内样式表、内嵌样式表、外部样式表各有优势，实际的开发中常常需要混合使用：
有关整个网站统一风格的样式代码，放置在独立的样式文件*.css
某些样式不同的页面，除了使用外部样式文件，还需定义内嵌样式
某个网页内，部分内容”与众不同“，采用行内样式
对于某个HTML标签：
1）如果有多种样式，如果规定的样式没有冲突，则叠加；
2）如果有冲突，则最先考虑行内样式表显示，如果没有，再考虑内嵌样式显示，如果还
没有，最后采用外面样式表显示，否则就按HTML的默认样式显示。
4.4：常用样式属性-文本字体：
color: red / blue / #ff7300; 颜色
font-family: ”隶书”; 字体类型
font-size:20px; 字体大小(单位，px,em,ex)
text-align: center / left / right; 文本对齐
font-weight: bold / normal; 字体粗细
text-decoration: underline/none; 文本修饰
4.5：常用样式属性-边框
border-width: 1px; 边框粗细
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-width: 1px;
border-style:solid/dashed/dotted; 边框线类型
border-top-style、
border-bottom-style、
border-left-style、
border-right-style
border-color: #ff7300; 边框颜色
border-top-color、
border-bottom-color、
border-left-color、
border-right-color
border: 1px solid #ff7300 缩写
4.6：常用样式属性-背景
背景颜色
background-image:url(“xxx.gif”); 背景图片
background-repeat: repeat/no-repeat/repeat-x/repeat-y; 背景是否重复
background-position:center/left/right/top/bottom 背景图片定位
4.7：<SPAN> 标签
<SPAN>是行级层标签，不可以包含图片、标题、段落等，只能包含文字内容，对其中
的内容可单独做样式控制。
4.8：<DIV> 层标签
<DIV>是块级层标签，可以包含图片、标题、段落、文字等
DIV的样式属性：
position:absolute; 绝对定位
left:149px; x坐标
top:110px; y坐标
z-index:1; z坐标(位于哪一层)
width:357px; 宽
height:87px; 高
display: none/block/inline; 显示方式
DIV布局：
float属性：定义元素在哪个方向浮动
left-左侧浮动，从左往右排列显示
right-右侧浮动，从右往左排列显示
none-默认，显示在文档中定义的位置
盒模型：
每个元素都被看作一个矩形框（盒子），由内容、padding（填充/内边距）、
border（边框）和margin（空白边/外边距）组成。
![[HTML、CSS]知识点](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635461/20241109/bcc34220ff734707ab00ebc739596dff.jpeg?x-oss-process=image/resize,h_160,m_lfit)