一、基本结构
<!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.空格 &nbsp;
2.< &lt;
3. &gt;
4.© &copy;
5.¥ &yen;
六、其他常用样式
/*背景颜色*/
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前期学习总结的更多相关文章

  1. Windows底层开发前期学习准备工作

    1.若对Windows底层开发没有兴趣,不建议继续深究, 若有些兴趣可以继续. 2. 先广泛打基础,比如C/ASM/C++/MFC,再学习Windows核心编程,对R3上的一些开发有所熟悉,再系统的学 ...

  2. 在Android初次的前期学习中的十二个小例子（附案例下载）

    目录(点击标题即可下载): Hello:使用Intent在两个Activity之间切换 Hello2:实现特定的鼠标点击事件功能 Hello3:点击监听事件集中处理 Hello4:登录注册界面布局 H ...

  3. Selenium 前期学习

    一.了解selenium必读文档: 官方文档:http://docs.seleniumhq.org/docs/03_webdriver.jsp 二.公司使用c#开发,配合开发的要求,使用visual ...

  4. 在Android初次的前期学习中的二个小例子（2）

    Hello13:SQLite数据库 一.简述SQLite的概念和主要特性 SQLite是一个轻量级的关系型数据库,运算速度快,占用资源少,使用非常方便,支持SQL语法标准和数据库事务原则. 相对于Sh ...

  5. 从零开始编写自己的C#框架——框架学习补充说明

    非常感谢轩辕公子提出了对本框架的看法与意见,所以这里也将回复贴出来,让大家都了解一下 本系列的快速开发指的是,框架构建完毕后,在这个基础上开发新功能非常快捷方便,基本不用写太多代码就可以在短时间内完成 ...

  6. 学习 React(jsx语法) + es2015 + babel + webpack

    视频学习地址: http://www.jtthink.com/course/play/575 官方地址 https://facebook.github.io/react/ 神坑: 1.每次this.s ...

  7. SSE指令集优化学习：双线性插值

    对SSE的学习总算迈出了第一步,用2天时间对双线性插值的代码进行了优化,现将实现的过程梳理以下,算是对这段学习的一个总结. 1. 什么是SSE 说到SSE,首先要弄清楚的一个概念是SIMD(单指令多数 ...

  8. 00.PHP学习建议

    各位师弟师妹,大家好~PHP不是我们专业的本该有的方向.我不知道大家为什么来学习这门语言,也许是自己了解之后喜欢这门语言(我想这种可能在我们专业是挺少的),也许是听守中哥说这门语言简单好学,为了躲避学 ...

  9. TensorFlow简易学习[1]:基本概念和操作示例

    简介 TensorFlow是一个实现机器学习算法的接口,也是执行机器学习算法的框架.使用数据流式图规划计算流程,可以将计算映射到不同的硬件和操作系统平台. 主要概念 TensorFlow的计算可以表示 ...

随机推荐

  1. python 参数传递 传值还是传引用

    个人推测结论: 可变对象传引用,不可变对象传值 python里的变量不同于c中地址储值模型 a=100 b=100 print(id(a),id(b),a==b,a is b) #8790877986 ...

  2. JavaScript常见的继承方式

    原型链机制: 在ECMAscript中描述了原型链的概念,并将原型链作为实现继承的主要方法,其基本思想就是利用原型让一个引用类型继承另一个引用类型的属性和方法. 构造函数和原型还有实例之间的关系: 每 ...

  3. Gym101889B. Buggy ICPC（打表）

    比赛链接:传送门 题目: Problem B – Buggy ICPC Author : Gabriel Poesia, Brasil Alan Curing is a famous sports p ...

  4. 洛谷P1357 花园（状态压缩 + 矩阵快速幂加速递推）

    题目链接:传送门 题目: 题目描述 小L有一座环形花园,沿花园的顺时针方向,他把各个花圃编号为1~N(<=N<=^).他的环形花园每天都会换一个新花样,但他的花园都不外乎一个规则,任意相邻 ...

  5. Web服务器之Nginx详解（理论部分）

    大纲 一.前言 二.Web服务器提供服务的方式 三.多进程.多线程.异步模式的对比 四.Web 服务请求过程 五.Linux I/O 模型 六.Linux I/O 模型具体说明 七.Linux I/O ...

  6. visio画图有感

    昨天在和一个同事看流程图,在我还在考虑图的含义时他说这个图太乱了,如果要团队成员看也会很费劲,并找出觉得画的好的案例. 对比两个图我发现了一个最大的差别是好的图形状都是水平或垂直对齐的,连接线也都是水 ...

  7. jQuery基础（三）事件

    1.鼠标事件 jQuery鼠标事件之click与dblclick事件 click方法用于监听用户单击操作,dbclick方法用于监听用户双击操作. 方法一:$ele.click() 绑定$ele元素, ...

  8. 邮件报警以及服务端能否ping通客户端的小例子（三）

           就这个小小的东西,弄了一天,弄的头晕眼花,毕竟第一次弄这个,记录下来,若干年之后,回看这些笔记,不知是什么样的感想,哈哈.我学一个东西的时候喜欢系统的来,一点一点的来,做这个的时候想法很 ...

  9. Unity外包团队：Daydream控制器只提供了3个自由度

    HTC Vive,Oculus Rift以及微软即将推出的MR头显都拥有6自由度的运动控制器,这意味着你在虚拟世界中可以任意摆动你的手.然而,Daydream控制器只提供了3个自由度,这对于手部运动具 ...

  10. C 栈实现队列节点的管理

    栈预先存储节点,队列的malloc/free均有栈模拟,从而保证不频繁的开辟/是否节点内存. #include "com_is_buf.h" #include "com_ ...