一、基本结构
<!DOCTYPE html> ???? //设置字符编码集格式
<html> ??????????????//
<head> ??????????????//网页头部
<title></title>
</head>
<body>
</body>
</html>
二、文本标记
1.加粗 b
2.倾斜 i
3.下划线 u
4.删除线 u
5.上标 sup
6.下标 sub
三、引用css样式表的方式
1.内联样式
????在元素的开始标签里，设置一个style属性，并设置对应的属性名及属性值
????例：<div ></div>
????使用场景：js里，使用js给元素添加样式
2.内部样式表
???在head标签里加上一对style标签，并且在style标签设置对应的样式
???<style type="text/css">
???样式规则
???</style>
3.外部样式表
???新建一个css样式表文件，并在文件中设置对应的样式通过link属性，将html文件与css文件关联在一起
四.css语法规范
选择器{
属性名：属性值；
}
元素选择器-以元素标签作为选择器
五、其他元素
1.标题元素hn（n=1~6）
???特点：a.从h1到h6文本大小依次减小
????????b.文本加粗
????????c.每行文本上下都有距离
????????d.独占一行
2.段落元素 p
???特点：a.每行文本上下有距离
????????b.独占一行
????????c.一般应用于纯文本
???注意：不要和其他块级元素嵌套
3.块级元素&行级元素
???a.块级元素
??????默认情况下，独占一行
??????div，h1~h6，p
???b.行内元素
??????默认情况下，可以和其他元素在一行内显示
??????span，b，++++++++++++++++++++++++++++++，u，s，sup，sub
4.实业字符
???1.空格
???2.< ???<
???3. ????>
???4.© ???©
???5.¥ ???¥
六、其他常用样式
/*背景颜色*/
background-color：red；
/*文本尺寸*/
font-size：25px;
/*文本加粗*/
font-weight:bold;
/*文本修饰*/
text-decoration:none/underline;
text-decoration:underline;
/*文本排列*/
/*text-align：left/center/right；
七、图片
??1.图片的分类
??????a.jpeg -压缩比例比较大，图片大小（小）
??????b.png ?-支持透明背景，无损压缩
??????c.gif ?-支持动图
??2.语法 ?img
?????必须的属性 ?src=“要引用的图片资源的路径”；
???????????????width/height
???????注：当只设置宽度或者高度其中的一个属性时，另一个属性会等比缩放
???3.路径
??????a. ?-绝对路径
??????b. ?-相对路径
???????????相对于正在编辑的网页找想要使用的资源
???????????返回上一级 ??../
???????????文件夹上的资源 ??文件夹名称/图片名称
???????c. -根相对路径
???4.圆角图片
???????border-radius：px/%；
???????直角变圆角
八、超链接
??1.定义：链接又叫超链接，允许用户进行点击操作完成页面跳转
??2.语法 <a href=""></a>
??3.属性
??必须的属性href=“跳转到资源的地址”；
??如果没有href属性，a就不是链接
??target ?控制新页面以什么样的方式打开
??4.特殊用法
??href=“#”；默认会有一个返回顶部的效果
??5.锚点
??a.定义锚点
??<div id="#锚点名称"> </dir>
???b.链接到锚点
???<a href="锚点名称"></a>
???如果需要跳转到其他页面的指定位置
???<a href="demo.html#锚点名称"></a>
???6.伪类选择器
???给元素添加一些特殊的效果
???语法：选择器:伪类选择器
???7.css链接
???a.当链接没有被访问的样式 ????:link
???b.当链接已经被访问过的样式 ??：visited
???c.当鼠标移动到链接上的样式 ??：hover ??--重点
???d.当链接被选中时的样式 ??????：active
九、列表
???1.概念：将一些具有相同或者相似特征的元素进行以整齐的排列
???2.分类：有序列表ol，无需列表ul
???3.语法：定义列表->书写列表li
???4.属性：type ?- ?定义列表项标识的样式
??????有序列表的取值：1/a/A/i/I
??????无序列表的取值：circle/square
??????有序列表独有的属性： ?start -> ?取值：阿拉伯数字
???5.css列表
?????list-style-type：none； ?-使用css的方式去掉列表项标识
???6.注意：今后能用无序列表的地方就用无序列表，有序列表尽量少用，不利于seo
十、尺寸
???1.常用尺寸单位
?????a ??-%
?????b ??-px
?????c ??-em相对于父元素的尺寸
?????d ??-rem相对于根元素的尺寸
???2.常用颜色单位
?????a. ?-rgb（x，x，x）
??????????x->0~255之间的数字，绝大部分用于js中随机生成随机颜色
?????b. ?- ?#rrggbb
?????????6位十六进制数字 ???1~9 ?a~f
?????????简写： ?#rgb
?????c. ?-英文单词
???3.设置尺寸的元素
?????a.能够设置尺寸的属性
????????i.所有的块级元素都能设置尺寸
??????????div，h1~h6，p，ol，ul，li
????????ii.一些能够设置尺寸的HTML元素
??????????img，canvas，video
?????b.不能设置尺寸的属性
??????i大部分的行内元素都不不能设置尺寸
??????span，i，b，u，s，sup，sub
十一.浮动
???1.语法 ?float
???2.取值 ?none/left/right
???3.概述 ?
???????a.浮动的元素会脱离文档流，不占据页面空间
???????b.浮动的元素会停靠在包含框的左边或右边
???????c.浮动的元素依然会位于包含框之内
???????d.如果浮动的元素前已经有了一个已经浮动的元素，那么他会停靠在这个元素的左边或右边
???????e.浮动是专门用于解决块级元素在一行显示的问题
???4.清除浮动
???????目的：解决后续元素受浮动影响的问题
???????语法：clear
???????取值：none/left/right/both（常用）；
???5.浮动对父元素的影响（父元素为0的问题）
??????解决方案
?????????a.直接给父元素添加一个高度
?????????b.使用清除浮动的方式
?????????c.让父元素也浮动起来
?????????d.overflow：hidden； ?//溢出隐藏（下拉菜单不能用）
HTML前期学习总结
原文地址：https://www.cnblogs.com/zhuxinpeng-looking/p/10544223.html