本文章仅为作者对html与css知识点的总结,如有不恰当的地方欢迎沟通交流,如需转载请注明出处http://blog.csdn.net/tobesuccess/article/details/78650724
HTML部分
HTML的概念
HTML(Hyper Text Mark-up Language)超文本标记语言
1.超文本:表达能力优于普通文本,指页面内可以包含图片、音乐、超链接及程序等。
2.标记语言:由标记构成的语言,其中还有XML、XHTML等。
html是用来制作网页的标记语言,不需要编译,直接由浏览器执行。它的后缀名有.html和.htm两种,这两种后缀名没有区别。
HTML的文档构成
<!--最外层包裹-->
<html>
<!--头标签 里面可以写标题、网页属性、css、js等-->
<head>
<meta charset="utf-8" />
<!--标题标签-->
<title></title>
</head>
<!--体标签 用来写正文部分-->
<body>
</body>
</html>
html标签的写法:
1.在<>中包裹一个英文单词。
2.所有标签中的英文单词不区分大小写(推荐使用小写)。
3.标签分为两类
1>围堵标签:有开始标签,也有结束标签(如<html></html>)。
2>自闭合标签:本身既是开始标签,也是结束标签(如<br />)。
注意:所有标记语言,标签中的英文单词没有以数字开头的。
HTML中的标签
- 排版标签
<!--这是一段注释。注释不会在浏览器中显示。-->
<p> → 标签定义段落。
<p> 相见时难别亦难, </p>
<p> 东风无力百花残。 </p>
<p> 春蚕到死丝方尽, </p>
<p> 蜡炬成灰泪始干。 </p>
效果:
相见时难别亦难,
东风无力百花残。
春蚕到死丝方尽,
蜡炬成灰泪始干。
<br> → 标签可插入一个简单的换行符。
成功没有快车道,幸福没有高速路。<br>所有的成功,都来自不倦的努力和奔跑;<br>所有幸福,都来自平凡的奋斗和坚持。
效果:
成功没有快车道,幸福没有高速路。
所有的成功,都来自不倦的努力和奔跑;
所有幸福,都来自平凡的奋斗和坚持。
<hr> → 标签在 HTML 页面中创建一条水平线。
春蚕到死丝方尽,<hr>
蜡炬成灰泪始干。
效果:
春蚕到死丝方尽,
蜡炬成灰泪始干。
<pre> → 可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。
<pre>
public static void main(String[] args){
System.out.println("Hello JavaWeb!");
}
</pre>
效果:
public static void main(String[] args){ System.out.println("Hello JavaWeb!"); }
<font> → 字体标签:该标签的使用必须配合属性。
size:大小(取值1~7之间从小到大)。
face:字体。
color:颜色,值的写法有以下三种:
1.可以直接填写颜色的英文名称
2.#FFFFFF
3.rgb(255,255,255)
<font size="5" face="黑体" color="red">这是一个字体标签!</font>
效果:
这是一个字体标签!
<strike> → 可定义加删除线的文本。
<strike>这行文字将被删除。
效果:
这行文字将被删除。
<big> → 标签呈现大号字体效果。
<big>这行文字将呈现大号字体效果。
效果:
这行文字将呈现大号字体效果。
<small> → 标签呈现小号字体效果。
<small>这行文字将呈现小号字体效果。
效果:
这行文字将呈现小号字体效果。
<u> → 标签为文本添加下划线。
<u>这行文字将添加下划线。
效果:
这行文字将添加下划线。
<b> → 标签呈现粗体文本效果。
<b>这行文字将加粗显示。
效果:
这行文字将加粗显示。
<sup> → 标签可定义上标文本。
5<sup>2</sup>
效果:
52
<sub> → 标签可定义下标文本。
5<sub>2</sub>
效果:
52
<hn> → 标题标签:n的取值范围是1-6。
可以达到的效果:
1>1-6文字从大到小;
2>文字加粗;
3>换行
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
注意:HTML中不支持:空格、回车、制表符,都会被解析成一个空白。
- 列表标签
<!-- ol有序列表:order list -->
<!-- type属性:取值A a I i 1(默认值) -->
<!-- start属性:从几开始计数 -->
<ol>
<li>First Line</li>
<li>Second Line</li>
<li>Third Line</li>
</ol>
效果:
- First Line
- Second Line
- Third Line
<!-- ul无序列表:unorder list -->
<!-- type属性:disc(默认)、square(方形)、circle(圆形) -->
<ul>
<li>First Line</li>
<li>Second Line</li>
<li>Third Line</li>
</ul>
效果:
- First Line
- Second Line
- Third Line
<!-- dl定义列表:definition list -->
<dl>
<!-- dt定义标题:definition title -->
<dt>html</dt>
<!-- dd定义条目:definition description -->
<dd>标签</dd>
<dt>css</dt>
<dd>选择器</dd>
</dl>
效果:
-
html
- 标签 css
- 选择器
- 图形标签
<!-- <img />自闭合标签:
src属性:指定图片的URL。
alt属性:当图片无法加载时显示的提示信息。
title属性:鼠标悬浮时显示提示信息。
height属性:图片的高(单位是像素)(如果宽和高只指定一个,图片会按比例缩放)
width属性:图片的宽。
border属性:边框(单位是像素)
usemap属性:将图片分区,每个区点了之后链接到不同的页面。 dw(不常用)
-->
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1511849983184&di=a71f72def5bc9e741dd9b5d0ac2457a4&imgtype=0&src=http%3A%2F%2Fpic31.photophoto.cn%2F20140622%2F0035035760337678_b.jpg" alt="唯美图片" title="flower" height="300px" width="900px"/>
效果:
- 表格标签
<!-- <table>表格
<th>:table header 标题单元格
align属性:对齐
cellspacing:外边距 → 单元格和其他单元格(边框)之间的距离
cellpadding:内边距 → 内容和单元格框线之间的距离
<tr>:table row 表格中的一行
<td>:table data cell 一行中的一个单元格
colspan属性:横着占多少列
rowspan属性:竖着占多少行
-->
<table border="1">
<tr>
<th colspan="3">学生信息表</th>
</tr>
<tr>
<td>学号</td>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr>
<td>001</td>
<td>苏娜</td>
<td>18</td>
</tr>
<tr>
<td>002</td>
<td>亚森</td>
<td>19</td>
</tr>
</table>
效果:
学生信息表 | ||
---|---|---|
学号 | 姓名 | 年龄 |
001 | 苏娜 | 18 |
002 | 亚森 | 19 |
- 框架标签
<!-- 框架标签与<body>标签互斥(使用时需要把body标签删除掉)
frameset标签:定义一个框架集。
rows属性:定义框架集中行的数目和尺寸。
cols属性:定义框架集中列的数目和尺寸。
frame标签:定义 frameset 中的一个特定的窗口(框架)。
src属性:指定显示页面的路径。
noresize属性:不能调整框架大小。
scrolling属性:是否显示滚动条yes no auto。
frameborder属性:是否显示边框0(无边框)、1(有边框)。
name属性:规定框架的名称。
target属性用法:如果想在框架中指定在哪个框架页显示,那么该值填写框架名称。-->
<html>
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
<frame src="frame_c.htm" />
</frameset>
</html>
- 锚(超链接)标签
<!-- <a>标签可定义锚(anchor),有两种用法:
1. 通过使用 href 属性,创建跳转的超链接(格式:协议名+资源);
2. 通过使用 name 或 id 属性,在当前页面中跳转,例如:回到顶部 → 使用就是锚。
步骤:1> 做一个锚标记,使用a标签的name属性指定锚点名称。
2> 跳转到锚标记,使用href属性指定要跳转到的锚点。
<a>标签中的属性:
href属性:跳转的资源名或锚点名称。
name属性:定义锚点时,指定锚点名称。
target属性:针对资源跳转时使用。
该属性不指定 → 在当前页面打开新的窗口。
该属性值为_blank → 在空白页打开新的窗口。
-->
<a href="http://blog.csdn.net/" name="csdn">CSDN博客</a>
效果:
- 表单标签
<!-- 将要提交的内容放入form标签中,
1.action属性:决定表单提交到哪里。
2.method属性:决定表单的提交方式,取值:get(默认值)/post。
post提交和get提交的区别:
1.post提交(http请求正文中)键值对没有在地址栏上,而get是放在地址栏上的。
2.安全性上post更高一些。
3.长度上:get因为是放到地址栏中,长度受限(2k),post理论上是无限的。 -->
<form action="" method="post">
<table border="1" width="100%" cellspacing="15">
<tr>
<td>用户名</td>
<!-- text 文本框 -->
<td><input type="text" id="username" name="username"></td>
</tr>
<tr>
<td>密码</td>
<!-- password 密码框 -->
<td><input type="password" id="password" name="password"></td>
</tr>
<tr>
<td>确认密码</td>
<td><input type="password" id="repassword" name="repassword"></td>
</tr>
<tr>
<td>性别</td>
<!-- radio 单选框 -->
<!-- 同一组单选项name值相同 -->
<td><input type="radio" name="sex" value="男">男<input
type="radio" name="sex" value="女">女</td>
</tr>
<tr>
<td>籍贯</td>
<!-- select标签:下拉选 -->
<td><select id="province" name="province">
<option>-请选择-</option>
<option>北京</option>
<option>上海</option>
<option>广东</option>
</tr>
<tr>
<td>爱好</td>
<!-- checkbox 多选框 -->
<!-- 同一组多选框name值相同 -->
<td><input type="checkbox" name="hobby" value="篮球" />篮球 <input
type="checkbox" name="hobby" value="足球" />足球 <input
type="checkbox" name="hobby" value="排球" />排球 <input
type="checkbox" name="hobby" value="羽毛球" />羽毛球</td>
</tr>
<tr>
<td>邮箱</td>
<td><input type="text" id="email" name="email"></td>
</tr>
<tr>
<td>描述</td>
<!-- textarea标签:文本域 -->
<td><textarea rows="3" cols="20"></textarea>
</td>
</tr>
<tr>
<!-- submit 提交 -->
<!-- 用于提交表单内容 -->
<td colspan="2"><input id="regBut" type="submit" value="注册"></td>
</tr>
</table>
</form>
<!--
input 标签的type属性还有:
file → 文件上传
hidden → 隐藏域(用于提交用户看不到的,必要的提交的内容)
reset → 重置(还原)
image → 提交(图片,没用了)
button → 按钮
input 标签的name属性:
对于需要提交的表单项:提交时键值对的键
input 标签的value属性:
1.对于需要提交的表单项:提交时的值
2.对于按钮类型的:按钮上显示的文字。
input 标签的readonly属性:
1.只读属性,只是限制value属性的变化
2.只能给:text和password使用。textarea也有这个属性
input 标签的disabled属性:
1.禁用。颜色变灰,不参与提交。
2.使用范围,所有input都可以使用。
input 标签的checked属性:
1.默认被选中。
2.只适用于:1 raido,2 checkbox
input 标签的maxlength属性:
定义最大长度(只能放在text和password中)
input 标签的size属性:
定义输入框的显示长度(只能放在text和password中)
select 标签:
name 属性:下拉列表的名称:提交的键
size 属性:下拉列表中可见选项的数目
multiple 属性:可选择多个选项
selected 属性:让option默认被选中。
textarea 标签:
name 属性:文本区的名称:提交的键
col 属性:文本区内的可见宽度
row 属性:文本区内的可见行数
readonly 属性:文本区为只读
注:该标签没有value属性
-->
- meta标签
<!-- meta标签:属性定义了与文档相关联的名称/值对,网页元标签。 -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- 可以实现当前网页定时刷新或定时跳转 -->
<meta http-equiv="refresh" content="3;url=#" />
<!-- 可能对于进入搜索引擎的索引有帮助 -->
<meta name="keywords" content="#" />
<meta name="description" content="#" />
- 转义字符
→ 空格
> → 大于号
< → 小于号
™ → ™商标
© → ©版权
® → ®已注册
" → "引号
注:在html中,当属性的键和值完全一样时,可以忽略属性的值。
CSS部分
CSS的概念
CSS(Cascade Style Sheet)层叠样式表
CSS 能够决定页面的样式,对网页的配色以及元素的布局进行精确控制。
CSS与html的结合方式
- 在标签上加入style属性
<!-- 属性值为CSS样式代码 -->
<p style="color: red;">aaa</p>
- 在页面的head标签中,书写一个style标签
<html>
<head>
<title></title>
<!-- 在style标签中书写css代码 -->
<style type="text/css">
p{
color: blue;
}
</style>
</head>
<body>
</body>
</html>
- 在页面head标签中填写link标签
<html>
<head>
<title></title>
<!-- type:mime类型 rel:类型 href:css文件路径(.css文件) -->
<link type="text/css" rel="stylesheet" href="#" />
</head>
<body>
</body>
</html>
CSS的选择器
- 元素选择器
<!-- 语法:元素名称{
属性键:属性值;
}
-->
<style type="text/css">
html {
color:black;
}
h1 {
color:blue;
}
</style>
<body>
<h1>标题标签</h1>
</body>
- ID选择器
<!-- ID属性唯一标识符,要确保页面当中id属性的唯一性
语法:#ID{
属性键:属性值;
}
-->
<style type="text/css">
#tb{
background-color: red;
}
</style>
<body>
<talbe id="tb">
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
- 类选择器
<!-- class属性可以随意重复
语法:.class名称{
属性键:属性值;
}
-->
<style type="text/css">
.tb{
background-color: red;
}
</style>
<body>
<talbe class="tb">
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
- 选择器分组
<!-- 语法:选择器1,选择器2...{
属性键:属性值;
}
-->
<style type="text/css">
.t1,#t2{
background-color: red;
}
</style>
<body>
<talbe>
<tr id="t1">
<td></td>
<td></td>
</tr>
<tr class="t2">
<td></td>
<td></td>
</tr>
</table>
</body>
- 伪类选择器
<!-- 指的是选择的某个标签的某种状态。常见状态有4种,a标签最全:
l link 没有点击过的状态
v visited 访问过的状态
h hover 鼠标悬浮
a active 激活状态(鼠标点下去没有弹起)
-->
<style type="text/css">
a:link {
color: #FF0000;
} /* 未访问的链接 */
a:visited {
color: #00FF00;
} /* 已访问的链接 */
a:hover {
color: #FF00FF;
} /* 鼠标移动到链接上 */
a:active {
color: #0000FF;
} /* 选定的链接 */
</style>
<body>
<a href="#">a标签的不同状态</a>
</body>
CSS的基本语法
选择器{
属性键:属性值;
属性键:属性值1 属性值2 ...;
}
注释:与java中多行注释相同 /*注释内容*/
CSS的常用属性
单位(了解)
颜色单位(color units) #RRGGBB rgb(R,G,B) color name 长度单位(Length units) em ex px像素(常用) pt pc in cm mm 单位换算:1in = 2.54cm = 25.4mm = 72pt = 6pc
字体属性
color → 文字颜色 font-family → 文字样式 font-size → 文字大小 font-style → 文字样式(斜体) font-weight → 文字加粗 font-variant → 异形字 font → 复合属性
背景属性
background-color → 背景色 background-image → 背景图 background-repeat → 图片重复 background-attachment → 背景定位 background → 复合属性