HTML
概念
超文本标记语言,主要用来描述一个页面
操作思想
网页中有很多数据,不同的数据需要不同的显示效果,这个时候就需要通过标签把要操作的数据包起来(封装)通过修改标签的属性值,实现标签内数据样式的改变
一个标签就相当于一个容器,想要修改容器内数据的样式,只需要修改容器的属性值,就可以实现容器内数据样式的改变
特点
语法非常的宽松
标签是不区分大小写(建议小写,html5标准建议小写)
标签是预定义好的,每个标签都有特殊的含义
语法
标签
由尖括号包裹起来的关键字组成 <font> <hr />
标签体
开始标签和结束标签中间的所有内容,都叫做标签体
可以是一段普通的文本,也可以是其他标签
属性
为了给元素提供更多信息,可以改变元素的样式,以名称和值的形式出现
注释
<!-- 内容--> 快捷键 选中 ctrl + /
特殊字符
空格 < < > >
标签分类
行级标签
如果上一行有空间,就在上一行显示,如果没有空间,才另起一行显示(font,span,a)
span是纯粹的行级标签,默认是不可以换行的,主要用来存放少量的数据
块级标签
不管上一行有没有空间,直接另起一行显示(h1,div)
div是纯粹的块级标签,默认是自动换行的,主要用于布局
常用标签
结构标签
<html>
<head></head>//文章标题
<body></body>//文章正文
</html>
文本标签
字体标签
font
size 尺寸
color 颜色
标题标签
<h1>--<h6>
align 位置
段落标签
<p>
排版标签
<br> 换行
<hr> 水平线
<u> 下划线
<b> <strong> 加粗
<i> <em>斜体
列表标签
有序列表 ol(order list)
属性
type 定义编号的类型
start 编号的起始值
无序列表 ul(unOrder list)
属性
type 定义编号的类型
列表项 li(list item)
图片标签
标签名 img
重要的属性
src 设置图片的地址
如果图片和当前的页面在同一个目录下
直接使用图片名称就可以访问
如果图片在当前的页面的下一级目录下
可以使用 目录名称/图片名称 来访问
如果图片在当前的页面的上一级目录下
可以使用 ../图片名称 来访问
其他属性
height 设置高度
width 设置宽度
alt 在图片无法访问的时候替代图片
链接标签
标签名 a
重要的属性
href 定义要跳转的资源
内部地址
如果要访问的资源和当前的页面在同一个目录下
直接使用资源名称就可以访问
如果要访问的资源在当前的页面的下一级目录下
可以使用 目录名称/资源名 来访问
如果要访问的资源在当前的页面的上一级目录下
可以使用 ../资源名 来访问
外部地址
CSS简单了解
概念
层叠样式表,用于设置样式,布局控制
语法
选择器
选定指定的元素,给它设置样式
id选择器:一般用于选择唯一的元素(#id的值)
类选择器:选择一批元素,批量设置样式(.class属性值)
元素选择器:选择一批元素,批量设置样式(直接使用标签)
常见属性
字体属性
font-size
背景属性
background
background-color
background-image
尺寸属性
width
height
盒子模型
margin
padding
css浮动
div+css是现在的主流的布局方式,可以提高网页的加载速度,提高代码后期的维护效率
div默认的排版方式从上到下显示的,需要从左到右排版,就需要使用到float
格式:
选择器{
float:属性值
}
取值
left:元素向左浮动
right:元素向右浮动
none:元素不浮动(默认值)
由于浮动元素不占用源文档的位置,所以它会对他后面的元素产生一些影响,可以使用clear来清除浮动
格式:
选择器{
clear:属性值
}
取值
left:清除左浮动的影响
right:清除右浮动的影响
both:清除左右两侧浮动的影响
888
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
