文章目录
导语
HTML是超文本标记语言（HyperText Markup Language）的缩写，是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。 而学习HTML，需要掌握标签的使用，如常见的 body、head、title、p、img、a、div、span、ol、table等。 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。 而CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
一.学习HTML
1.HTML的文档的基本结构
< head >
< title >网页标题< /title >
< /head >
< body >
网页内容
< /body >
< /html >
2.HTML标签元素
HTML元素由开始标签和结束标签组成。
如< html >< /html >。
3.常用元素
1、段落 <p></p>
< p >
UTF-8。UTF-8就是在互联网上使用最广的一种unicode的实现方式。
< /p >
< p >
编码，包括了GB2312中的编码，同时扩充了许多，通行于大陆。
< /p >
2、标题
标题有六种大小h后的数字越大，说明标题越大。
分别为:
< h1 >标题1< /h1 >
< h2 >标题2< /h2 >
< h3 >标题3< /h3 >
< h4 >标题4< /h4 >
< h5 >标题5< /h5 >
< h6 >标题6< /h6 >
4、文本格式化
一些常用于设置文本字体的元素：
<b>定义粗体文本</b><br />
<i> 定义斜体文本 </i><br />
<del>定义删除文本</del><br />
<sup>定义上标字</sup><br />
<sub>定义下标字</sub><br />
5、 锚点
有时我们在浏览网页时会发现，有些网页比较人性化，会有点击返回顶部的按键。这样的效果其实用锚点标签就能做到。锚点就是点击使用户跳到文档的某个部分。
< a href="#位置名" > < /a >
< a name=“位置名” > < /a >
如代码例子：
<a href="#map">跳转</a>
<p id="map">代码代码</p>
6、图像
| 属性 | 属性值 | 说明 |
|---|---|---|
| src | url | 图像资源的地址 |
| width | 像素（px） | 图像宽度 |
| height | 像素（px） | 图像高度 |
| alt | 替代文字 | 图片的替代文字 |
如代码例子：
<img src="img/ta.jpg" width="100" height="100" alt="ta" />
7、地址 相关说明
./ 当前目录
. ./ 回到上一层目录 images/ 进入一层目录
. ./images/ 回到上一层目录，然后再进入images目录
| 情形 | html文件位置 | 图片位置 |
|---|---|---|
| 同一个目录 | D:/html/demo.html | D:/html/01.jpg |
| 下一层目录 | D:/html/demo.html | D:/html/img/01.jpg |
| 上一层目录 | D:/html/demo.html | D:/01.jpg |
| 同一层不同目录 | D:/html/demo.html | D:/img/01.jpg |
8、列表
无序列表 Html中列表也是常用的元素。
无序列表用< ul >< li >< /li ></ ul >表示。
说明： 属性：type 属性值： 列表前的符号 disc 实心原点 circle 符号为空心圆 square 符号为方形
- 苹果
- 香蕉
- 雪梨
有序列表 有序列表使用数字或字母系统来组织列表里包含的信息。有序列表可以使用数字(默认)、大写字母、小写字母、大写罗马数字和小写罗马数字排列项目。
- 苹果
- 香蕉
- 雪梨
说明： 属性 属性值 说明 type 1、 a 、 A、i、I 用来设置项目前面的标记 start 数值 排序的起点数值
9、 form 表单
html中表单的作用是很强大的。我们生活中经常要用到表单，如一些基本信息的填写。在网页中也是如此，我们免不了注册一些账号，此时用到的表单就比较多了。 表单主要负责获取用户填写的数据，并通过浏览器向服务器传送数据。
表单的基本结构：
< form name=“form1” action=“URL” method=“get|post” target=“文档显示方式”
用户名：< input type=“text” name=“uname” />
密 码：< input type=“password” name=“passwd” />
< /form >
说明： 属性 说明 name: 表单的名称;
action :表单提交地址 ;
method: 表单数据提交的方式 (get:在url地址上面传送参数到服务器,post：在后台传送参数到服务器） enctype MIME类型
target :打开方式（_blank:在一个新的窗口打开 _self:在相同的框架中调入文档 _top:把文档调入原来的最顶部的浏览器窗口中）
二.学习CSS
1.CSS语法结构
CSS的语法结构由三部分组成：选择符、属性、值。
说明:
选择符：通常是需要改变样式的 HTML 元素。
属性：是您希望设置的样式属性
值：每个属性有一个值。
例：
<style type="text/css">
p { background-color:#cccccc;}
</style>
2.CSS选择符
1、通配选择符*
*表示所有的对象。凡是在html文件中的元素，都会被选中。
例子：
<html>
<head>
<style>
*{
background-color:blueviolet ;
}
</style>
</head>
<body>
<h2 >标题2</h2>
<h3 >标题3</h3>
<a>这是个链接</a>
</body>
</html>
2、id选择器及class选择器
id和class的名称是由用户自定义的。id号可以唯一地标识html元素，为元素指定样式。id选择符以#来定义。
id选择符 在网页中，每个id名只能是唯一不重复的。
例子：
<style type="text/css">
#title2{ /*#后的是id名称*/
background-color: red;
}
</style>
<body>
<h2 id="title2">我也是标题2</h2>
</body>
class选择符 class与id不同，class可以重复使用，定义一类的元素。class选择符以
.来定义。
例子：
<style type="text/css">
.pp{ background-color: blue; }
</style>
<body>
<p class="pp">这是个段落</p>
</body>
3.CSS的生效
1、内联样式
所谓内联样式，就是直接把样式规则直接写到要应用的元素中,将CSS样式编码直接写在HTML 标签中的style属性里。注意这种方式的引入CSS，是不需要写选择器的。
例子：
<h3 style="color: red;">标题3</h3>
2、内部样式表
将样式作为页面中的一个单独部分，由标签定位在之中。
例子：
<head>
<style type="text/css">
h1{ background-color:blue;
}
a {color:red;}
</style>
</head>
3、外部样式表
在html文件同一目录新建一个样式表文件mycss.css（注意后缀名为css）再由网页进行调用。
例子：
<head>
<link rel="stylesheet" type="text/css" href="demo.css" />
</head>
/demo.css文件内容/
div
{
width:50px;
height:100px;
background-color:red;
}
三种样式的优先级从高到低注：三种引入CSS的方式是有优先级之分的。其排序是就近原则，即内联>内部>外部。也就是说用三种方式来对某元素进行设置时，最先引用的将会是离元素最近的那种方式。
4、颜色，尺寸，对齐
灵活的运用颜色可以美化我们的网页，颜色是一个网站的重要组成部分
（1）、英文单词，比如 red , yellow ,green …
（2）、十六进制表示方式，#开头，6个十六进制的字符或数字 组合。比如：#FFFFFF，#000000，#CCCAAA，#22BCAD。十六进制： 0-9 和 a-f RGB模式，红 0-255，绿 0-255，蓝 0-255。比如： RGB(120,33,234)。 RGBA(255,0,0,.5) RGBA模式，最后的A表示透明度50%小数点前的0可以省略不写
<h3 style="background-color:Tomato;">Tomato</h3>
<h3 style="background-color:#ff0000;">#ff0000</h3>
<h3 style="color:Tomato;">Hello World</h3>
用 height 和 width 设定元素内容占据的尺寸。常见的尺寸单位有：像数 px，百分比 %等。
<body>
<div class="example-1">
这个元素高 200 pixels，占据全部宽度
</div>
<div class="example-2">
这个元素宽200像素,高300像素
</div>
</body>
.example-1 {
width: 100%;
height: 200px;
background-color: powderblue;
text-align: center;
}
元素中的文本，可以简单的设置text-align属性为left, center, right即可（缺省的是左对齐）
5、边距
1.内边距
取值： padding-top: 设置上边的内边距 padding-right: 设置右边的内边距 padding-bottom: 设置下边的内边距 padding-left: 设置左边的内边距
例子：
<style type="text/css">
#div3{
width: 100px;
height: 100px;
padding-top: 20px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 10px;
}
</style>
<body>
<div id="div3"> 我是里面的内容
</div>
</body>
2、外边距
取值： margin-top: 设置上边的外边距 margin-right: 设置右边的外边距 margin-bottom: 设置下边的外边距 margin-left: 设置左边的外边距
例子：
#div2{
width: 110px;
height: 80px;
margin-top:20px;
margin-right: 20px;
}
<div id ="div2">
我是里边的内容。
</div>
6、伪类选择符
常见的伪类选择link、hover、visited
语法：选择器后使用 : 号，再跟上某个伪类/伪元素
例子：
#div1 a:link{
background-color: red; /*设置链接a在未访问前的样式为红色背景色*/ }
}
#div1 a:visited{
background-color: blue;/*设置链接a在访问后的样式的背景色为蓝色*/
}
#div1 a:hover{
text-decoration: none; /*当鼠标悬停在链接上时，链接的下划线消失*/
}
7、组合选择器
对单个标签进行样式指定外，还可以对一组标签进行相同的样式定义。这样一来，我们可以快速地对相关的元素进行整体调节。
子选择符 ：直接后代选择器，以>作为分隔，如：.haha > p 代表在有.haha类的元素内的直接元素 包含选择符（EF）：选择所有被E元素包含的F元素
例子：
<style>
ul li>a{
font-family: "微软雅黑";
font-size: 20px;
background-color: indianred;
div h3{
font-family: "微软雅黑";
background-color: blue;
}
}
</style>
<body>
<ul>
<li><a href=#>我是链接</a></li>
</ul>
<div>
<h3>标题3</h3> /*div包含h3*/*
</div
</body>
8、浮动
当元素内容超过其指定的区域时，我们通过溢出overflow属性来处理这些溢出的部分。
visible 默认值，溢出部分不被裁剪，在区域外面显示
hidden 裁剪溢出部分且不可见
scroll 裁剪溢出部分，但提供上下和左右滚动条供显示
auto 裁剪溢出部分，视情况提供滚动条
例子：
.example-overflow-scroll-y {
width: 200px;
height: 100px;
background-color: #eee;
overflow-y: scroll;
}
总结：
网页的本质就是HTML，通过结合使用其他的Web技术可以创造出功能强大的网页。CSS简化了网页的格式代码，减少了需要上传的代码数量能够设计整个站点的风格特色，在修改页面数量庞大的站点时，显得格外有用。
扫一扫
3802
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
