什么是HTML
HTML是超文本标记语言
1.超文本:页面内可以包含图片,连接,甚至是音乐,程序等非文字元素
2.标记:标签,不同的标签实现不同的功能
3.语言:人与计算机的交互工具
HTML通过使用标签,标记描述网页,展示信息显示给用户
HTML书写规范
* HTML标签是以尖号包含的关键字
* HTML标签通常是成对出现,有开始就有结束
* HTML通常都有属性,格式:属性=“属性值”(多个属性之间用空格隔开)
* HTML标签不计大小写,但建议小写
HTML基本标签
结构标签
<html>根标签
<head>网页头标签
<meta charset="utf-8">
<title></title>页面的标题
</head>
<body>网页正文
</body>
</html>
由于本人不懂如何写出双尖号,所以就只写了代码
属性名 | 代码 | 描述 |
---|---|---|
text | <body text="#F00" | 设置网页正文中所以文字的颜色 |
bgcolor | <body bgcolor="#00F" | 设置网页的背景色 |
background | <body background=“1.png” | 设置网页的背景图 |
如果背景颜色和背景图片同时设置,最后只会显示背景图片。
颜色的表达方式
* 第一种:用表示颜色的英文单词:red,yellow(但只有固定的,颜色
不能改变深度)
* 第二种:用十六进制表示颜色:如:#ffffff
相对路径
如果你的html文件和图片文件(picture.jpg)在同一个文件直接写picture.jpg,如果你的图片文件在html文件的下一级文件(pic)里面pic/picture.jpg,如果你的图片文件在html的上一级文件(pic)中,…/pic/picture.jpg
排版标签
* 可用于实现简单的布局
* 注释标签:<!--注释-->
* 换行标签<br/>
* 段落标签<p>文本文字</p>
* 特点:段与段之间有空行
* 属性align:对齐方式(center,left,right)
* 水平线标签:<hr/>
* 属性:
* width:水平线的长度
* size:水平线的粗细
* color:水平线的颜色
* align:对齐的方式
块标签
属性名 | 代码 | 描述 |
---|---|---|
div | <div | 行级块标签,独占一行,换行 |
span | <span | 所有内容都在同一行 |
基本文字标签
<font></font>,处理网页中文字显示
属性名 | 代码 | 描述 |
---|---|---|
size | <font size=“7” | 用于设置字体的大小,最大1号,最小7号 |
color | <font color="#f00" | 用于设置字体颜色 |
face | <font face=“宋体” | 用于设置字体的样式 |
文本格式化标签
b | 粗体标签 |
---|---|
strong | 加粗 |
em | 强调字体 |
big | 大号字体 |
i | 斜体 |
small | 小号字体 |
sup | 下标标签 |
sub | 上标标签 |
del | 删除线 |
标题标签
h1,h2…h7.从大到小。
列表标签
无序列表
使用一组无序的符号定义
<ul type="circle">
<li>
</li>
</ul>
属性值 | 描述 |
---|---|
circle | 空心圆 |
disc | 实心圆 |
square | 黑色方块 |
有序列表
使用一组有序的符号定义
<ol type="a" start="1">
<li>
</li>
</ol>
属性值 | 描述 |
---|---|
1 | 数字类型 |
A | 大写字母类型 |
a | 小写字母类型 |
i | 古罗马类型 |
图形标签
在页面指定位置插入一副图片:<img />
属性名 | 描述 |
---|---|
src | 引入图片的地址 |
width | 图片的宽度 |
height | 图片的高度 |
border | 图片的边框 |
align | 与图片对齐方式 |
alt | 提示信息 |
hspace | 在图片左右设定空白 |
vspace | 在图片上下设定空白 |
链接标签
在页面中使用链接标签跳转到另一个页面
标签 <a href=" "></a>
属性:href:跳转页面的地址
设置跳转页面的打开方式:target属性
* _blank在新窗口打开
* _self在原窗口打开
指向同一页面中指定位置
定义位置 <a name=" 名称"></a>
指向<a href="#名称 "></a>
<#middle>回到中部
<#top>活到顶部
表格标签
普通表格(table,tr,td)
<table>
<tr>
<td></td>
</tr>
</table>
表格的列标签(th):内容有加粗和居中效果
<table>
<tr>
<th></th>
</tr>
</table>
表格的列合并(colspan):在同一行合并多个列
<table>
<tr>
<td colspan=""></td>
</tr>
</table>
表格的行合并(rowspan):在同一行合并多个列
<table>
<tr rowspan="">
<td ></td>
</tr>
</table>
表单标签
html表单用于收集不同类型的用户输入数据
input元素
<body>
<form action="demo01.html" method="get">//点击提交会跳转到demo01.html页面
用户名:<input type="text" name=""><br/>
密码:<input type="password" name=""><br/>
单选:<input type="radio" name="sexy"><input type="radio" name="sexy"><br/>
多选:<input type="checkbox" name=""><input type="checkbox" name=""><input type="checkbox" name=""><br/>
生日:<input type="date" name=""><br/>
薪资:<input type="number" name=""><br/>
电话:<input type="tel" name=""><br/>
照片:<input type="file" name=""><br/>
颜色:<input type="color" name=""><br/>
年龄范围:<input type="range" name=""><br/>
隐藏域:<input type="hidden" name=""><br/>
<hr />
表单提交:<input type="submit" name=""><br/>
数据重置:<input type="reset" name=""><br/>
图片提交按钮:<input type="image" name=""><br/>
普通按钮:<input type="button"value="普通" name=""><br/>
</form>
</body>
在单选时,需要给后面的name写上属性值才会体现单选;
select元素(下拉列表)
* 单选下拉列表:<select></select>
* 默认选中属性:selected="selected"
<select>
<option selected="selected">内容</option>
</select>
* 多选下拉列表:<select></select>
* 多选列表:multiple="multiple"
<select multiple="multiple">
<option >内容</option>
</select>
textarea元素(文本框)
多行文本框:<textarea cols="列" rows=“行”></textarea>
就是给出一个规定大小的文本框,你可以在里面填写信息
html框架标签
* 通过使用框架,你可以在同一个浏览器窗口看到不同的页面。每份html文档被
称作一个框架,并且每个框架独立于其他的框架。
* 使用框架的缺点:
开发人员必须同时跟踪更多的html文档
很难打印整张页面
框架结构标签frameset
* 框架结构标签用于定义如何将窗口分割为框架
* 每个frameset定义一系列的行或列
* rows/colums的值规定每行每列占屏幕面积
<frameset rows=""/col=""></frameset>
框架标签frame
每个frame引入一个页面
<frameset col="*,*">
<frame src="demo01.html">
<frame src="demo02.html">
</frameset>
CSS
什么是CSS
* CSS:全称:层叠样式表,定义如何显示html元素
* 多个样式可以层层叠加,如果不同的css的样式对同一html标签进行修饰,样式有冲突的优先级高的优先,不冲突的共同作用。
CSS作用
* 修饰美化html网页
* 外部格式表可以提高代码复用性,提高效率
* html内容与样式分离,便于后期维护。
CSS书写规范
CSS规则由两个部分组成,选择器,一条以及多条说明
* 选择器通常是需要改变样式的html元素
* 每条说明由一个属性和属性值组成
基础语法 选择器{属性:值;属性:值…}
* 用花括号来包围说明
* 多个说明之间用分号隔开
* css对大小写不敏感,如果css和html一起使用,class和id名称对大小写敏感。
CSS导入方式
内嵌方式
把css样式嵌入在html标签中
<div style="color:blue ;font-size:50px"></div>
内部方式
在head标签中加入style标签引入css
<head>
<style type="text/css">//告诉浏览器用css解析器去解析
div{color:blue;font-size:50px;}
</style>
</head>
外部方式
新建一个css文件,在引用该css文件
div.css
引用:
语句写在head标签内部
<link rel="stylesheet" type="text/css" href="div.css">
rel:代表当前页面与href所指定文档的关系
type:文本类型,告诉浏览器用css解析器去解析
href:css文件位置
@import导入
在页面中引入一个独立的文件
<style>
@import url("div.css")
</style>
基本选择器
元素选择器
在head中引入style标签引入在其中声明元素选择器:html标签{属性:属性值}
<style type="text/css">//告诉浏览器用css解析器去解析
span{color:blue;font-size:50px}
</style>
id选择器
给需要修改样式的html元素添加id属性标识,在head中引用style标签在其中声
明id选择器:#id{属性:属性值}
创建id选择器
<div id="s1"></div>
<div id="s2"></div>
<div id="s3"></div>
根据id选择器用html文件修饰
<style type="text/css">
#s1{color:blue;font-size:50px};
#s2{color:blue;font-size:50px};
#s3{color:blue;font-size:50px};
</style>
class选择器
给需要修改的样式的html元素增加class属性,在head中引用style标签在其中声
明id选择器:.class名{属性:属性值}
创建class选择器
<div class="s1"></div>
<div id="s2"></div>
<div id="s3"></div>
根据class选择器用html文件修饰
<style type="text/css">
.s1{color:blue;font-size:50px};
.s2{color:blue;font-size:50px};
.s3{color:blue;font-size:50px};
</style>
在遇到同属性时,基本选择器优先级由高到低:id选择器,class选择器,元素选择器
伪元素选择器
主要针对a标签
语法:
* 静止状态:a:link{css属性}
* 悬浮状态:a:hover{css属性}
* 触发状态:a:active{css属性}
* 完成状态:a:visited{css属性}
层级选择器
父级选择器 子级选择器。。。
#div .d1{}
#div .d2{}
div与d1和d2呈现层级关系
<div id="div">
<div class="d1"></div>
<div class="d2"></div>
</div>
css属性
属性名 | 取值 | 描述 |
---|---|---|
font-size | 数值 | 设置字体大小 |
font-family | 默认,宋体,楷体等 | 设置字体样式 |
font-style | 斜体等 | 设置斜体样式 |
font-weight | bolder | 粗体样式 |
列表属性
属性名 | 取值 | 描述 |
---|---|---|
list-style-type | disc等 | 改变列表的标识类型 |
list-style-image | url(“图片地址”) | 用图像表示标识 |
list-style-position | inside outside | 标识出现在列表项内部还是外部 |
尺寸属性
width:设置元素宽度
height:设置元素高度
显示属性
显示属性是display,以下是常用值:
none:不显示
block:区块显示
inline:行级显示
轮廓属性
绘制于元素周围的一条线,位于边框的外围,可以突出元素的作用
属性名 | 取值 | 描述 |
---|---|---|
outline-style | solid(实线)/dotted(虚线)/dashed(虚线) | 设置轮廓的样式 |
outline-color | 16进制;用于表示颜色的英文 | 设置轮廓的颜色 |
outline-width | 数值 | 设置轮廓的宽度 |
定位属性
相对定位(relative)
元素框偏移某个距离,元素仍保持前其未定位前的形状,它原本保留的空间会保留
(我的理解是相对位置是相对于它一开始应该在的位置)
<style type="text/css">
.hel{
position:relative;
left:-20px;
}
</style>
向左移动20px的位置如果是正数则向右移动。
绝对定位(absolute)
元素定位在其设定的位置,即便它设定的位置之前有一些部署,但它并不会
在下一行。
<style type="text/css">
.hel{
position:absolute;
left:100px;
top:100px;
}
</style>
固定定位(fixed)
固定定位:即便你下滑页面,元素并不会消失,而是一直在你的页面上设定的位
置。
<style type="text/css">
.hel{
position:fixed;
left:100px;
top:100px;
}
</style>
CSS盒子模型
通过层的概念进行页面布局。
边框相关属性
属性名 | 取值 | 描述 |
---|---|---|
border-style | solid(实线)/dotted(虚线)/dashed(虚线) | 设置轮廓的样式 |
border-color | 16进制;用于表示颜色的英文 | 设置轮廓的颜色 |
border-width | 数值 | 设置轮廓的宽度 |
外边距相关属性
margin:外边距,边框和边框外层的距离
top,left,right,bottom四个方向
内边距相关属性
padding:内边距,边框和文本的距离
top,left,right,bottom四个方向