码迷,mamicode.com
首页 > Web开发 > 详细

HTML前期学习总结

时间:2019-03-16 20:51:56      阅读:199      评论:0      收藏:0      [点我收藏+]

标签:center   进制   删除线   使用场景   over   编码   跳转   特殊   back   

一、基本结构
<!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前期学习总结

标签:center   进制   删除线   使用场景   over   编码   跳转   特殊   back   

原文地址:https://www.cnblogs.com/zhuxinpeng-looking/p/10544223.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!