HTML&CSS
HTML基础入门
1.HTML概述
HTML:超级文本标记语言(HyperText Markup Language)
- “超文本”就是指页面内可以包含图片、链接等非文字内容。
- “标记”就是使用标签的方法将需要的内容包括起来。例如:<a>www.baidu.com</a>
1.1HTML能干什么
HTML用于编写网页。平时上网通过浏览器我们看到的大部分页面都是由html编写的。在浏览器访问网页时,可以通过“右键/查看网页源代码”看到具体的html代码。
网页内容包含:HTML代码、CSS代码、JavaScript代码等内容。
- HTML代码:用于展示需要显示的数据。
- CSS代码:使显示的数据更佳好看。
- JavaScript代码:使整个页面显示的数据具有动画效果。
网页根据内容是否改变分为:静态页面、动态页面
- 静态页面:编写之后在浏览器不再改变的网页。HTML就是用于编写静态网页的。
- 动态页面:会根据不同的情况展示不同的内容。例如:登录成功后右上角显示用户名。
1.2HTML语言特点
- HTML文件不需要编译,直接使用浏览器阅读即可
- HTML文件的扩展名是*.html 或 *.htm
- HTML结构都是由标签组成
- 标签名预先定义好的,我们只需要了解其功能即可。
- 标签名不区分大小写
- 通常情况下标签由开始标签和结束标签组成。例如:<a></a>
- 如果没有结束标签,建议以/结尾。例如:<img />
- HTML结构包括两部分:头head和体body
1.3创建模板
- 在任意位置(F盘根目录),创建“文本文档”,重命名“1.html”
- 右键/打开方式/记事本,开发html文件,并编写如下内容
<html>
<head>
<title>这是标题</title>
</head>
<body>
这里是正文
</body>
</html>
以上使用的标签组成了HTML页面的基本结构,现将所有标签进行陈述:
- <html> 整个页面的根标签,理论上一个页面只需要一个,由头和体组成。
- <head> 头标签,用于引入脚本、导入样式、提供元信息等。一般情况下头标签的内容在浏览器端都不显示。
- <title>子标签,用于显示浏览器标题。
- <body>体标签,是整个网页的主体,我们编写的html代码基本都在此标签体内。
2.基本标签使用
2.1标题标签:
HTML提供<hn>系列标签,用于修饰标题,包含:<h1>,<h2>,<h3>,<h4>,<h5>,<h6>。<h1>定义最大的标题。<h6>定义最小的标题
2.2HTML 水平线:
<hr /> 标签在 HTML 页面中创建一条水平分隔线,用于定义内容中的主题变化。
size属性:水平线的高度,单位像素
noshade属性:没有阴影,取值:noshade,表示显示纯色
2.3字体标签:
<font> 用于设置字体尺寸、字体颜色等。
size属性:设置字体的大小。可能的值:从 1 到 7 的数字。浏览器默认值是 3。
color属性:设置字体的颜色
2.4格式化标签:
<b> 粗体
<i> 斜体
2.5段落化标签:
<p> 定义段落。p 标签会自动在其前后创建一些空白。
<br /> 插入单个换行。
2.6图片标签:<img>
<img> 在html页面中引用一张图片
- src :指定需要显示图片的URL(路径)
- alt:图片无法显示时代替的文本
- width :设置图像的宽度
- height :定义图像的高度
- title:鼠标移上显示
2.7列表标签:<ol><ul>
- <ol>定义有序列表
- type列表类型,取值:a,A,I,i,1等
- <ul>定义无序列表
- type符号的类型,取值:disc实心圆,square方块,circle空心圆
- <li>定义列表项.是<ul>或<ol>的子标签
2.8超链接标签</a>
</a>标签是超链接,是在html页面提供一种可以访问其他位置的实现方式。
- href:用于确定需要显示页面的路径(URL)
- target:确定以何种方式打开href所设置的页面。常用取值:_blank、_self 等
- _blank 在新窗口中打开href确定的页面。
- _self 默认。使用href确定的页面替换当前页面。
2.9表格标签<table><tr><td>
HTML表格由<table>标签以及一个或多个<tr>、<th>或<td>标签组成。
- <table> 是父标签,相当于整个表格的容器。
- border 表格边框的宽度
- width表格的宽度
- cellpadding单元边沿与其内容之间的空白
- cellspacing单元格之间的空白
- bgcolor表格的背景颜色
- <tr>标签用于定于行
- <td>标签用于定义表格的单元格(一个列)
- colspan 单元格可横跨的列数
- rowspan 单元格的可横跨的行数
- align 单元格内容的水平对齐方式,取值:left左,right右,center居中。
- nowrap单元格中的内容是否折行
2.10框架标签:<frameset>
<frameset> 标签,是多个窗口页面整合在一起的一个集合(框架集)。每一个页面(框架)都是单独文档,需要使用子标签来确定页面的位置。<frameset>通过列和行来确定整体布局,使用cols确定列数,使用rows确定行数。多个<frameset>可以嵌套使用。
- <frameset>和<body>两个不能共存。
- rows属性和cols属性取值:值1,值2,值3,…… 一个值表示一行(列),多值使用逗号分隔,值可以是 10px、10% 等,最后一个值如果不想计算可以使用*匹配剩余量。
2.11 框架子标签:<frame>
<frame>标签,用于设置<frameset>框架集中的一个页面(框架)。
- src属性:确定页面的路径
- noresize属性:框架分隔先不能移动
- target属性:确定需要显示的页面在何处显示
2.12框架案例:<frameset>
框架.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<!-- 页面进行分割,
rows:行切 80,*
上面部分80,下面全满
-->
<frameset rows="80,*">
<!--上面部分,a.html -->
<frame name="top" src="a.html">
<!-- 页面进行分割, cols列分 -->
<frameset cols="150,*">
<frame name="lower_left" src="b.html">
<frame name="lower_right" src="c.html">
</frameset>
</frameset>
</html>
a.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
我是a.html
</body>
</html>
b.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
我是b.html <br />
<!-- target 属性默认是 "_self"-->
<a href="d.html" target="lower_right">点我是连接</a>
</body>
</html>
c.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
我是c.html
</body>
</html>
d.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
我是d.html
</body>
</html>
2.13表单标签:<form>
<form>
表单标签,表单标签在浏览器上没有任何显示。
-
作用: 收集浏览器用户进行输入的数据, 并把数据发送到服务器端
-
属性
- action:表示用户输入的内容, 被发送到服务器端的路径
- method:表单数据发送方式。常用的取值:GET、POST
<body>
<!--表单-->
<form action="#" method="get">
<!--此处的内容可以被表单收集, 提交到服务器-->
</form>
<!--此处的内容在<form>标签外,此处数据表单收集不到, 不能提交到服务器-->
</body>
2.14输入标签<input>
<input>
标签用于获得用户输入信息,type属性值不同,搜集方式不同。最常用的标签。
- 文本输入框:
属性type=“text” | value=“文本框的默认值” | placeholder=“输入框预期值的提示信息” | name:发送给服务器的名称 - 密码输入框:
属性type=“password” | placeholder=“输入框预期值的提示信息” | name:发送给服务器的名称 - 单选按钮:
属性type=“radio” | name=“定义名字”,同名的单选按钮可以保证单选 | checked=“checked” 默认选中属性. - 复选按钮:
属性type=“checkbox” | checked=“checked” 默认选中属性 - 文件域:
属性type=“file” | 文件上传服务器 - 按钮:
- 普通按钮:
属性 type=“button” | value=“按钮上显示文本”
用于配合后面的技术JavaScript - 重置按钮:
属性 type=“reset” - 提交按钮: 表单数据发送到服务器
提交按钮: 属性 type=“submit”
图片按钮: 属性 type=“image”
- 普通按钮:
<form action="#" method="get">
<!-- 文本输入框 -->
用户名:<input type="text" value="" placeholder="请输入用户名" name="user"/> <br/>
<!-- 密码输入框 -->
密 码:<input type="password" placeholder="请输入密码" name="pass"/> <br/>
<!-- 单选按钮 -->
性 别:<input type="radio" name="gender" checked="checked"/>男
<input type="radio" name="gender" />女 <br/>
<!-- 复选按钮 -->
爱 好:<input type="checkbox" checked="checked"/ name="hobby">抽烟
<input type="checkbox" name="hobby"/>喝酒
<input type="checkbox" name="hobby"/>打牌 <br />
<!-- 文件域 -->
上传头像:<input type="file" /> <br />
<!-- 普通按钮 -->
<input type="button" value="点我提交"/>
<!-- 重置按钮 -->
<input type="reset" />
<!-- 提交按钮 -->
<input type="submit" />
<input type="image" src="img/btn.jpg"/>
</form>
2.14下拉菜单
<select>
下拉列表。可以进行单选或多选。需要使用子标签指定列表项- 属性name:发送给服务器的名称 | multiple属性:不写默认单选,取值为“multiple”表示多选。| size属性:多选时,可见选项的数目。
<option>
子标签:属于下拉列表中的一个选项(一个条目)。- 属性selected :勾选当前列表项 | value :发送给服务器的选项值
<form action="#" method="get">
<!-- 下拉列表 -->
<select name="city" multiple="multiple" size="5">
<!-- 列表项 -->
<option value ="beijing">北京</option>
<option value ="shanghai">上海</option>
<option value ="guangzhou">广州</option>
<option value ="shenzhen">深圳</option>
<option value ="hangzhou">杭州</option>
<option value ="tianjin">天津</option>
</select>
<input type="submit" />
</form>
2.15多行文本域
<textarea>
文本域。多行的文本输入控件。
- cols属性:文本域的列数
- rows属性:文本域的行数
<form action="#" method="get">
<!-- 多行文本域 -->
<textarea name="area" cols="50" rows="8"></textarea>
<input type="submit" />
</form>
2.16提交方式区别
服务器提交方式GET和POST区别
- GET:
表单提交的参数,放在浏览器地址栏, 暴露敏感数据; 浏览器的地址栏数据有限的,不适合提交过大的数据
?user=tom&pass=123&gender=女&hobby=抽烟&hobby=喝酒
数据的格式 k=v 多个键值对使用 & 分割
服务器获取提交的数据,依靠是键 - POST:
表单提交的参数,不会显示在地址栏上; 不会暴露敏感信息; 没有数据大小的限制
HTTP协议区别:
- GET: 参数放在请求行
- POST: 参数放在请求体
<form action="#" method="post">
用户名<input type="text" placeholder="请输入用户名" name="user"/><br />
密 码<input type="password" placeholder="请输入密码" name="pass" /> <br />
性 别<input type="radio" name="gender" checked="checked" value="男"/> 男
<input type="radio" name="gender" value="女"/> 女 <br />
爱 好<input type="checkbox" name="hobby" checked="checked" value="抽烟"/>抽烟
<input type="checkbox" name="hobby" value="喝酒"/>喝酒
<input type="checkbox" name="hobby" value="打牌"/>打牌 <br />
<input type="submit" />
</form>
3.DIV+CSS
3.1div标签span标签
-
div标签: div 块级元素标签
- 霸占屏幕的一行, 就是页面中的一个行
- 配合CSS样式表使用
-
span标签: span 行级元素标签
- 不会占屏幕一行
- 配合CSS样式表
<body>
<div>123</div>
<span>我是span标签</span>4
</body>
3.2css样式作用和语法
CSS (Cascading Style Sheets) :指层叠样式表. 指使用不同的添加方式,给同一个HTML标签添加样式,最后所有的样式都叠加到一起,共同作用于该标签。
-
主要用于设置HTML页面中的文本内容(字体、大小、对其方式等)、图片的外形(高宽、边框样式、边距等)以及版面的布局等外观显示样式。
-
作用: 美化页面作用. HTML负责显示数据, CSS负责美化效果
-
语法结构
选择器{ 属性名:属性值; 属性名:属性值; }
- 选择器: 指定对HTML的哪个标签起作用
div { width: 200px; height: 200px; border: red 1px solid; }
3.3css引入方式
css引入方式一_行内
- 行内样式:
- 在HTML标签中添加属性 style=“属性:属性值”
- 作用域最小,作用当前标签; 行内样式的优先级最高
<body>
<h3 style="color: red;">h3标签</h3>
<h3>哈哈</h3>
</body>
css引入方式二_内部
- 内部样式:
- 在HTML页面里面写CSS代码, 一般写在中, 使用标签 style , 属性: type=“text/css”
- 作用是当前整个页面有效
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
h3{color: chocolate;}
</style>
</head>
<body>
<h3>h3标签</h3>
<h3>哈哈</h3>
</body>
</html>
css引入方式三_外部
- 外部样式:
- CSS样式定义在另一个文件中,后缀名.css (文本文件)
- 在HTML页面中,引入样式表, 使用link标签 写在head中
- 属性: href=“css文件路径” | type=“text/css” | rel=“引入的文件和当前页面是什么关系”
- 作用范围最大,哪个页面引入,哪个有效
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="css/1.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<h3>h3标签</h3>
<h3>哈哈</h3>
</body>
</html>
css/1.css
h3{
color: blue;
}
3.4css选择器
css基本选择器
选择器就是对HTML标签设置样式作用
-
标签元素选择器
用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。
其基本语法格式如下:标签名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
-
ID选择器
id选择器使用“#”进行标识,后面紧跟id名.
其基本语法格式如下:#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
需要在html标签上,添加属性id=“选择器名”, 配合ID选择器进行使用 -
class选择器,类选择器
类选择器使用“.”(英文点号)进行标识,后面紧跟类名
其基本语法格式如下:.类名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
需要在html标签上,添加属性class=“选择器名”, 配合class选择器进行使用
注意:
尽量不要使用ID选择器,如果需要使用ID选择器. 要保证:ID的属性值具有唯一性
因为后面学习的JavaScript技术中: 对象document中的方法getElementById("one"), 会把标签变成对象,只要找到第一个了,后面就不找了. 所以,ID的属性值要唯一.
当使用ID选择器和class选择器, 对同一个标签设置相同属性时, ID选择器 优先级高于 class选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*标签元素选择器,选择器名字和标签名相同*/
h1{
color: red;
}
/*ID选择器*/
#one{
color: blue;
}
/*class选择器*/
.two{
color: yellow;
}
</style>
</head>
<body>
<h1>123</h1>
<h1>456</h1>
<h2 id="one">789</h2>
<h2 class="two">789</h2>
</body>
</html>
css属性选择器
属性选择器,在标签后面使用中括号标记
其基本语法格式如下:标签名[标签属性=’标签属性值’] {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
input[type="text"]{
color: red;
}
input[type="password"]{
background-color: green;
}
</style>
</head>
<body>
用户名<input type="text" /><br />
密 码<input type="password" />
</body>
</html>
包含选择器
包含选择器,两个标签之间使用空格,给指定父标签的后代标签设置样式,可以方便在区域内编写样式。
其基本语法格式如下:父标签 后代标签{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div span{
color: red;
}
</style>
</head>
<body>
<div>哈哈</div>
<div>
<span>div中的span</span>
</div>
<span>就是span</span>
</body>
</html>
css伪元素选择器
CSS伪元素用于将特殊的效果添加到某些选择器。例如: 超链接的不同状态都可以指定不同的效果.
- 四个状态: 没点过,点过,鼠标悬浮,激活
- 样式: 固定顺序 l-v-h-a
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a:link{color: #333333; text-decoration: none;}/*没点过*/
a:visited{color: #333333;text-decoration: none;}/*点过*/
a:hover{color: red;text-decoration: none;}/*鼠标悬浮*/
a:active{color: green;text-decoration: none;}/*激活*/
</style>
</head>
<body>
<a href="http://www.itheima.com">黑马</a>
<a href="http://www.baidu.com">百度</a>
</body>
</html>
3.5css常用属性
css边框属性
- border :设置边框的样式
- 格式:宽度 样式 颜色
- 例如:style=”border:1px solid #ff0000” ,1像素实边红色。
- 样式取值:solid 实线,none 无边,double 双线 等
- width、height:用于设置标签的宽度、高度。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 200px;
height: 200px;
/*设置边框 粗细,样式(实线,虚线,点划线,双实线),颜色*/
/*border-right: 5px solid yellow;*/
border: 10px solid cyan;
}
</style>
</head>
<body>
<div>我是div</div>
</body>
</html>
css转换属性
语法格式: 选择器{display:属性值}
常用的属性值:
- inline:此元素将显示为行内元素(行内元素默认的display属性值), 常见行内元素有:
<span>、<a>
- block:此元素将显为块元素(块元素默认的display属性值),常见块元素有:
<div>、<h1>、<ul>
- none:此元素将被隐藏,不显示,也不占用页面空间。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="display: inline;">我是div</div> 2
<span style="display: block;">我是span</span>3
<div style="display: none;">我是隐藏的div</div>
</body>
</html>
css字体属性
常用的属性值:
- font-size:文本大小
- font-family: 字体
- color: 颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
font-family: 楷体;
font-size: 32px;
color: red;
}
</style>
</head>
<body>
<div>我是div</div>
</body>
</html>
css背景属性
常用的属性值:
- background-color 背景色
- background-image 背景图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
body{
background-color: red;
background-image: url(img/btn.jpg);
}*/
div{
width: 200px;
height: 200px;
background-image: url(img/btn.jpg);
background-color: blue;
}
</style>
</head>
<body>
<div>我是div</div>
</body>
</html>
css浮动属性
通常默认的排版方式,将页面中的元素从上到下一一罗列,而实际开发中,需要左右方式进行排版,就需要使用浮动
- 使用浮动:
选择器{float:属性值;}
- 常用属性值:left:元素向左浮动 | right:元素向右浮动 | none:元素不浮动(默认值)
由于浮动元素不再占用原文档流的位置,所以它会对页面中其他元素的排版产生影响。如果要避免影响,需要使用clear属性进行清除浮动。
- 清除浮动:
选择器{clear:属性值;}
- 常用属性值:
- left:不允许左侧有浮动元素(清除左侧浮动的影响)
- right:不允许右侧有浮动元素(清除右侧浮动的影响)
- both:同时清除左右两侧浮动的影响
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
CSS浮动属性
float: 两个div在同一行出现
div1 漂浮起来
清除浮动: clear 不会跟随上一个元素浮动
-->
<div>
<div style="float: left;">div1</div>
<div style="float: left;">div2</div>
<div style="clear: both;">div3</div>
</div>
</body>
</html>
css盒子模型
什么是盒子模型: CSS的 框模型 (Box Model) 规定了元素框 处理元素内容、内边距、边框 和 外边距 的方式。
- 边框 border
- 也可以使用下面四个单端的属性, 分别设置上、右、下、左 的边框:
- border-top-style | border-right-style | border-bottom-style | border-left-style
- 外边距:margin, 设置不同元素之间, 它们边框与边框之间的距离
- 也通过使用下面四个单独的属性,分别设置上、右、下、左 的外边框:
- margin-top | margin-right | margin-bottom | margin-left
- 内边距 padding, 设置元素边框与元素内容之间的距离
- 也通过使用下面四个单独的属性,分别设置上、右、下、左 的内边距:
- padding-top | padding-right | padding-bottom | padding-left
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 200px;
height: 200px;
/* 边框 */
border: 1px solid red;
/* 外边距 */
margin-top: 50px;
margin-left: 100px;
/* 内边距 */
padding-top: 5px;
padding-left: 10px;
}
</style>
</head>
<body>
<!--
盒子模型:处理边距的
-->
<div>我是div</div>
</body>
</html>
css盒子模型框模型 (Box Model) 多属性值使用:
- margin: 50px; 上下左右
- margin: 10px 50px; 上下 10 , 左右50
- margin: 10px 20px 30px; 上10 ,左右20, 下30
- margin: 10px 20px 30px 40px; 顺时针 上 右 下 左
- margin: 0 auto; 上下0, 左右距离自动调整(居中)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
width: 200px;
height: 200px;
border: red 1px solid;
}
.top {
width: 600px;
}
.bottom {
width: 600px;
clear: both;
/* margin: 0 auto; 上下0, 左右距离自动调整(居中) */
margin: 0 auto;
}
.box {
float: left;
}
/* css盒子模型框模型 (Box Model) 多属性值使用 */
.box_model {
float: left;
/* margin: 50px; 上下左右 */
/* margin: 10px 50px; 上下 10 , 左右50 */
/* margin: 10px 20px 30px; 上10 ,左右20, 下30 */
/* margin: 10px 20px 30px 40px; 顺时针 上 右 下 左 */
}
</style>
</head>
<body>
<div class="top">上边div</div>
<div class="box">左边div</div>
<div class="box_model"><img src="img/btn.jpg"/></div>
<div class="box">右边div</div>
<div class="bottom">下边div</div>
</body>
</html>
4.注册页面实战
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
background-image: url(img/bg.jpg);
}
/*注册div*/
.form{
width: 550px;
height: 400px;
border: 1px solid black;
background-color: white;
margin: 0 auto;
margin-top: 100px;
}
.form span{
color: blue;
font-size: 22px;
margin-left: 100px ;
}
</style>
</head>
<body>
<div class="form">
<br />
<br />
<br />
<span>用户注册</span><b> USERREGiSTER</b>
<form action="#" method="post">
<table align="center">
<tr>
<td>用户名</td>
<td><input type="text"></td>
<td></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password"></td>
<td></td>
</tr>
<tr>
<td>性别</td>
<td><input type="radio" name="gender">男<input type="radio" name="gender">女</td>
<td></td>
</tr>
<tr>
<td>验证码</td>
<td><input type="text"></td>
<td><img src="img/checkcode.jpg"></td>
</tr>
<tr>
<td align="center" colspan="3"><input type="image" src="img/btn.jpg"></td>
<!--<td></td>
<td></td>-->
</tr>
</table>
</form>
</div>
</body>
</html>