一、HTML概述
1.HTML的基本概念
(1)HTML语言是超文本标记语言，是制作网页的标准语言
HTML不区分大小写
（超文本：通过超链接将文本有机的组织在一起就是超文本了）
(2)HTML的标记称为标签
由尖括号包围，通常是成对出现的
HTML的一个元素如下
<title>//开始标签 中间要有内容 </title>//结束标签
HTML中也有单独出现的标签
例如：<img />单独出现标签“/”表示结束
(3)HTML标签的嵌套关系
错误的嵌套关系
<html> <body> </html> </body>
正确的嵌套关系
<html> <body> </body> </html>
(4)HTML标签要注意缩进
<html> <!--外层：父元素-->
<head> <!--内层：子元素-->
</head>
<!--这两个子元素属于同级，又称为兄弟元素-->
<body> <!--内层：子元素-->
</body>
</html>
(5)标签的嵌套
HTML DOM树
DOM：Document Object Model（文档对象模型）
6.标签属性
<img src="logo.jpg" alt="站标" />
（1）img:标签名
（2）src1:属性1
（3）值1：logo.jpg
（4）“=”:赋值符号
（5）alt后面有空格
（6）alt：属性2，是图片显示不出来时的替换性文本
（7）值2：站标
注：一个标签内可以带有多个属性且属性的先后顺序无关
2.HTML的文件结构
1.文件后缀
.html或.htm
2.HTML文件结构
<html> <!--文件从此处开始就由HTML的语法规范来规定的-->
<head>
<title> 此处内容会出现在网页的标题栏中 </title>
</head>
<!--以上三行是文件的头部信息，头部：浏览器，搜索引擎所需信息-->
<body>
内容
</body>
<!--以上三行是网页的主题内容：呈现在浏览器的主体部分-->
</html> <!--结束位置-->
<!--注：<html> </html>是最外层-->
3.HTML5的文件结构
<!DOCTYPE html> <!--文档符合HTML5标准-->
<html lang="en"> <!--lang属性：搜索引擎 en:英文 zh：中文-->
<head>
<meta charset="UTF-8"> <!--<meta>:元数据，包含这个网页一些很基础的信息
如网页作者、修改时间，修改的最新版本，搜索关键字-->
<!--charset属性：字符集编码方式
UTF-8是国际编码方式，由浏览器进行解读-->
<title> </title>
</head>
<body>
</body>
</html>
4.字符集与编码
（1）字符：文字符号 例：123 abc 一二三 ！ ， % @
（2）字符集：字符的集合
字符集→语言文字 例：汉字字符集、英文字符集、日文汉字字符集
（3）编码
将字符和二进制码对应起来 例：a→01000001
（4）几种字符集
1.ASCII：数字，英文字母，符号
2.GB2312:简体中文
3.Unicode：所有语言
4.UTF-8：所有语言，所占空间更小
（5）乱码问题
源文件保存时的编码和源文件声明不一样，就会出现乱码的问题
3.HTML的常用标签
1.标题标签 <h1> 标题 </h1>
字体是默认加粗的，有h1-h6六种大小
每一级标题都可以用CSS的样式来规定字号的大小，后面会讲到
一个页面建议只有一级标题
<html>
<h1>这是一级标题标签</h1>
<h2>这是二级标题标签</h2>
<h3>这是三级标题标签</h3>
<h4>这是四级标题标签</h4>
<h5>这是五级标题标签</h5>
<h6>这是六级标题标签</h6>
</html>
输出样式如下
2.段落标签<p> 段落内容 </p>
会对段落里面的内容进行自然的分段，多个连续的空格只能生成一个空格
3.段内换行<br />
是单独出现的标签
4.空格字符 ；
如果需要三个空格则输入三个 （全部小写）
<p>文 字</p>
输出样式如下
5.预留格式标签<pre> </pre>
无论是空格空行都会保留原格式
<pre>
这里保留了空格 和
空行
</pre>
输出样式如下
6.行内组合标签<span>需要特殊表示的文字</span>
组合行内元素，以便通过CSS样式来格式化
<p>最新<span>中国人口调查报告</span>指出</p>
<style type="text/css">
span{
color: blue;
font-weight: bold;
}
</style>
输出样式如下
7.水平线<br />
单独出现，默认方向：网页左端→网页右端
<p>正文段落</p>
<hr />
<p>正文段落</p>
输出样式如下
8.注释<!--内容-->
对代码的功能进行说明，注释可以跨行
9.超链接标签<a href="网址">文字或图片</a>
href属性：超链接
超链接分为以下几种情况
（1）链接到本站点的其他网页上
<a href="news.html">新闻</a>
（2）链接到其他站点的网页上
<a href="http://www.baidu.com">百度</a>
（3）虚拟超链接
<a href="#">板块</a>
10.插入图像<img />
是单独出现的标签
网页中常见的图片格式
（1）JPG：有损压缩，打开图片快，不失真，保留信息多，不会影响观看效果而且文件压缩下来回非常小
（2）GIF：简单动画,背景透明
（3）PNG:无损压缩，透明，交错，动画，支持有损压缩和无损压缩两种压缩方式
交错：显示图片的过程中先显示一部分或者是一个大概的轮廓再看到全貌，清晰度由小变大
图像透明的概念：可以是指某一种特定的颜色透明也可以指背景颜色透明
如何插入图片
<img src="w3school.gif" alt="3wc"/>
src 属性：图片的来源 ：路径（图片在什么位置可以找到）+文件名
alt 属性：若没有找到或没有打开图片，会将alt里的文字显示出来。alt属性设置的就是图片的替换文本
绝对路径和相对路径
（1）绝对路径：以根目录为基准
<img src="C:/site/logo.gif"/>
弊端：这样只会在C盘下找到，但这个网站的站点文件夹可能会随着服务器端可能会迁移到其他的位置，就无法正确找到所需图片
（2）相对路径：以网页文件所在的位置，网页文件当前所在的文件夹来查找
<img src="logo.gif"/>
11.斜体标签<em></em>
12.加粗标签<b> </b> <strong> </strong>
13.下划线标签<u> </u><ins> </ins>
14.删除线标签<s> </s><del> </del>
<em>这是斜体标签</em>
<br />
<b>这是加粗标签</b>
<br />
<strong>这也是加粗标签</strong>
<br />
<u>这是下划线标签</u>
<br />
<ins>这也是下划线标签</ins>
<br />
<s>这是删除标签</s>
<br />
<del>这也是删除标签</del>
输出样式如下
15.区域列表<div> </div>
是成对出现的标签
用于确定一个单独的区域，如页面的一个组成部分，一个栏目板块
div标签结合CSS样式对每个区域进行排版布局
<div id="container" align="center"> <!--id属性：给区域命名是唯一的/align属性：表示对齐方式/center：居中对齐-->
<h1>web 前端开发 </h1>
<p>HTML</p>
<p>CSS</p>
<p>JavaScript</p>
</div>
输出样式如下
16.无序列表<ul> </ul>列表项<li> </li>
<h1>web前端开发</h1>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
输出样式如下
17.有序列表<ol> </ol>列表项<li> </li>
<h1>web前端开发</h1>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
输出样式如下
18.表格标签<table></table>
1.单元行标签
<tr></tr>
2.单元格标签<td></td>
3.表头单元格<th></th>
<table border="1"> <!--border属性：取值代表边框的粗细-->
<tr> <th>班级</th> <th>学生数</th> <th>平均成绩</th> </tr>
<tr> <td>一班</td> <td>30</td> <td>65</td> </tr>
<tr> <td>二班</td> <td>40</td> <td>67</td> </tr>
<tr> <td>三班</td> <td>50</td> <td>69</td> </tr>
</table>
输出样式如下
19.表单与表单元素
表单是一个区域，用于采集用户信息
表单元素是指文本框，按钮，单选，复选，下拉区域文本框
1.表单标签
<form></form>
<form action="数据处理网页"> <!--action：表示收集来的数据交由哪个页面来处理-->
表单元素
</form>
2.文本框，密码框
<input />
<form>
账户：<input type="text" name="username"/>
<br/>
密码：<input type="password" name="userPsd">
</form>
文本框由明文表示，密码框由*来表示
name属性用来给表单元素命名
3.按钮
提交按钮：将用户输入的数据提交给后端页面
<input type ="submit" value="提交" />
重置按钮：清空的作用
<input type="rest" value="重置" />
<form>
爱好:
<input type="text">
<input type="submit" value="确定"/>
<input type="reset" value="重置"/>
</form>
输出样式如下
4.单选框，复选框
单选框：只可选择一项
<input type="radio" value="值" name ="名称" checked="checked" />
复选框：可以选择多项
<input type="checkbox" value="值" name ="名称" checked="checked" />
当设置checked="checked"时，该选项被默认选中
<form>
性别：
男：<input type="radio" value="boy" name="gender" checked="checked"/>
女：<input type="radio" value="boy" name="gender"/>
<br/>
爱好：
<input type="checkbox" value="1" name ="music" checked="checked" />音乐
<input type="checkbox" value="2" name ="sport" />体育
<input type="checkbox" value="3" name ="reading"/>阅读
</form>
5.下拉列表框
<select> <option> </option> </select>
<form>
性别：
<select>
<option selected="selected">男</option>
<option>女</option>
</select>
</form>
输出样式如下
6.文本域
<textarea rows="行数" cols="列数">文本</textarea>
<form>
爱好：
<br/>
<textarea rows="10" cols="15">在这里输入内容.......</textarea>
<br/>
<input type="submit" value="确定"/>
<input type="reset" value="重置"/>
</form>
二、CSS概述
1.CSS基本概念
(1)基本概念
CSS全称：Cascading Style Sheets 层叠样式表
HTML负责网页结构，CSS负责网页样式
内容与样式相分离便于修改样式，且一个内容上可以添加多层样式
(2)基本语法格式
p{ /*表示选择器选择p标签内的*/
font-size:12px; /*字号：12像素大小*/
color:blue; /*文字颜色：蓝色*/
font-weight:bold; /*字体加粗*/
}
注意：1.所有属性的设置最后一条可以没有分号，但为了以后修改方便，一般加上分号
2.为了使样式更容易阅读，可以将每一条代码写在一个新行内
2.CSS添加方式
1.行内添加法
将属性和属性取值的设定直接添加到需要添加样式的元素标签内部
<p style="color:red;">
2.内嵌样式
1.只对当前页面有效，内嵌到head标签部分，body部分只有段落内容
2.即便是有公共的CSS代码，每个页面也都需要定义
3.适合文件很少，CSS代码也不多的情况
4.如果一个网站有很多页面，每个文件都会变大，后期维护的难度也变大
<head>
<style type ="text/css">
p{
color:red;
}
</style>
</head>
3.外部样式表法
1.与内嵌样式法一样，都是添加到head标签中
2.将样式放在一个站点文件夹的子文件中
3.外部样式表文件以.css结尾
p{
color:red;
}
/*这个是公共区域的CSS文件*/
<head>
<link rel="stylesheet" href="css/style.css"/>
<!--link表示要进行文字的链接， rel属性表示要链接到什么类型的文件
stylesheet该属性取值表示要链接到一个样式表文件上面，后面超链接与HTML中的都是一样的-->
</head>
优点：维护方便，HTML与CSS完全分离，要改变网页的风格，只需修改公共CSS文件即可，并且可以在同一个HTML文档内部引用多个外部样式表
4.优先级
(1)多重样式可以层叠覆盖
(2)样式的优先级遵循“就近原则”
行内>内嵌>外部样式表>默认
3.CSS选择器
1.标签选择器
内嵌样式引入，选择器名字就是标签名字
<style type="text/css">
p{color:red;}
</style>
2.类别选择器
内嵌样式引入，以"."开始命名，可以自主命名
<style type="text/css" >
.one{font-size:12px}
</style>
引用类别选择器时用“class”属性不要带“.”
<body>
<p class="one">类别1</p>
</body>
3.ID选择器
内嵌样式引入，以“#”开始命名，可以自主命名
<style type="text/css" >
#one{font-size:12px}
</style>
引用ID选择器时用“class”属性不要带“#”
<body>
<p id="one">文字1</p>
</body>
注意区别：类别选择器可以被多次引用，而ID选择器只可以被引用一次
4.嵌套声明
不同标签选择器之间可以进行集体使用，中间用空格隔开
<style type="text/css">
p span{
color:red
}
</style>
<body>
<p> <span>aaaaa</span>bbbbb</p>
</body>
5.集体声明
不同标签选择器之间可以进行集体使用，中间用“，”隔开
<style type="text/css">
h1,p{text-align:center;} /*表示作用于h1和p标签*/
</style>
<body>
<h1>aaaaa</h1>
<p>bbbbb></p>
</body>
6.全局声明
<style type="text/css">
*{text-align:center;}
</style>
<body>
<h1>aaaaaa</h1>
<p>bbbbb</p>
</body>
4.CSS样式
1.CSS文本属性
（1）单位
px:像素
em:字符 例：2em→两个字符 （一般自适应）
%:百分比
(2)颜色的表示方法
①英文名称
例：color:red；
②RGB值：rgb (0-255, 0-255,0-255)
例：红色（255，0，0）灰色（66，66，66）
③RGB百分比值：rgb (x%, x%, x%)
例：rgb（100%，0%，0%）
④RGB值+透明度a值：rgba (x,x,x,x)
a值：0.0（完全透明）与 1.0（完全不透明）
例：红色半透明rgba（255，0，0，0.5）
⑤#rrggbb 十六位进制数
重复的可以删除如红色#ff0000 可以表示为#f00
(3)文本属性
（4）CSS字体属性
232
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
