HTML与CSS基础教程
HTML+CSS复习
一、网页是怎么形成的
1.网页通过浏览器才能访问阅读
2.网页时网站中的一个“页”
3.文件扩展名.html
二、什么是HTML
HTML指的是超文本标记语言
1.HTML不是编程语言，而是一种标记语言，
2.HTML使用标记标签来描述网页，包括视频，音频，图片，等等......
3.标记语言是一套标记标签
三、浏览器知多少
利用 Can I Use网站，可以查询哪些标签不被兼容
四、web标准的制定
1.W3C万维网联盟
2.Web标准的组成
<1>.HTML结构
<2>.CSS表现
<3>.JS行为
五、HTML的基本语法
1.<常规标记>也叫双标记
<标记></标记>
例如：<head></head>
2.空标记也叫单标记
<标记/>
例如：<br/>
六、VSCode开发工具
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VSCode创建</title>
</head>
<body>
<center>
hello,
<br>
world!
</center>
</body>
</html>
七、文档声明与字符编码
en 代表英文
zh-CN代表中文
ja-jp代表日文
<!DOCTYPE html>
<!-- 特殊且固定的文档声明标签 -->
<html lang="en">
<!-- 搜索引擎优化和浏览器有帮助 -->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
八、HTML常用标签
1.语义是什么
语义就是让机器可以读懂内容
2.常用标签
<1>.文本标签
<h1></h1>
<h2></h2>
...
<h6></h6>
注:文本标题标签自带加粗，有自己的文本大小，并且独占一行,有默认间距
<2>.段落标签
<p></p>
<3>.换行标签
<br>
<4>.水平线
<hr>
<5>.加粗标签（推荐strong标签）
<strong></strong>
<b></b>
<6>.倾斜标签（推荐em标签）
<em></em>
<i></i>
<7>.删除标签（推荐del标签）
<del></del>
<s></s>
<8>.扩展
<u></u> 下划线
<sub><sub> 下标
<sup><sup> 上标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>
我是一级标题
</h1>
<h2>
我是二级标题
</h2>
<p>你好</p>
<hr>
<strong><em>传递正能量</em></strong>
门票不要<del>998</del>，不要<del>99.8</del>，只要<u>9.98</u>
</body>
</html>
效果展示：
九、赋予属性的hr标签
<hr color="pink" , wide ="600px" align="right">
color 颜色
width 宽度
height高度
align 对齐方式
noshade 取消阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<hr color="green">
<hr color="yellow">
<hr color="red">
<hr color="bule" wide ="300px">
<hr color="yellow" wide ="20px">
<hr color="red" wide ="60px" align="left">
<hr color="pink" wide ="600px" align="right">
<hr noshade="">
</body>
</html>
十、特殊符号
< 尖角号（前）
> 尖角号（后）
空格
  空格（推荐，正好一个中文宽度）
© 版权
™商标
® 商标
十一、div和span标签
div标签，没有具体含义，用来划分页面的区域，独占一行。
span标签,没有实际意义，主要应用在对于文本独立修饰的时候，
内容有多宽就占用多宽的空间距离。
<body>
<div>123</div>
<div>123</div>
<div>123</div>
<h1>体育<span style="color:blue;">spots</span></h1>
</body>
十二、有序列表
<ol>
<li></li>
</ol>
注：li里面可以随意放标签，但是ol里面只能防止li,
数字是自动生成的。
<body>
<ol type="A" start="4">
<!-- start:取值只能是一个数字 -->
<li>111</li>
<li>222</li>
<li>333</li>
</ol>
</body>
十三、无序列表
<ul>
<li></li>
</ul>
快捷创建:ul>li
注：li里面可以随意放标签，但是ul里面只能防止li,
默认的是黑色的实心圆
<body>
<!-- type: none(用的多) disc（默认） circle square -->
<ul type="circle">
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
</body>
十四、自定义列表
主要运用于 图文混排
<dl>
<dt>我是图片1</dt>
<dd>我是文字1</dd>
</dl>
快捷方式:dl>dt+dd
<body>
<dl>
<dt>我是图片1</dt>
<dd>我是文字1</dd>
</dl>
<dl>
<dt>我是图片2</dt>
<dd>我是文字2</dd>
</dl>
<dl>
<dt>我是图片3</dt>
<dd>我是文字3</dd>
</dl>
<dl>
<dt>1111</dt>
<dd>2222</dd>
<dd>2222</dd>
</dl>
</body>
十五、图片标签的路径
<img>
同级目录：
1. picture.gif
2. .picture.gif
上一级目录:
../Img/picture.gif
路径分类:绝对路径、相对路径
1、绝对路径
绝对路径是指文件在硬盘上真正存在的路径。
2、相对路径
相对路径,
就是相对于自己的目标文件位置。
<body>
<img src="../Img/" alt="">
</body>
十六、图片标签的属性
<img src=“图片 路径” title=“ 鼠标悬停上去之后的提示信息”>
<body>
<img src="2.jpg" alt="前后端的区别，请尝试刷新页面" >
<img src="2.jpg" alt="前后端的区别，请尝试刷新页面" title="这张图片描述了前后端的区别">
<img src="2.jpg" alt="前后端的区别，请尝试刷新页面" width="200px" height="200px">
</body>
十七、超链接标签
<a href= “路径”title=“ 鼠标悬停上去之后的提示信息”target= “规定在何处
打开文档">内容</a>
Target属性:规定在何处打开文档。
1. target=“_self" 默认值、
2. target=“_blank“新窗口打开
<body>
<a href="https://www.baidu.com" target="_blank">百度</a>
<a href="./13-2.text.html">成绩查询</a>
</body>
<body>
<div>成绩如下:</div>
</body>
十八、table标签
<1>.table表格的基本结构
<table>
<tr>
<td>
</td>
</tr>
</table>
快捷方式:table>tr*2>td*2
<2>.table表格的相关属性
表格属性
1.宽度 width
2.高度 height
3.边框 border
4.边框颜色 bordercolor
5.背景颜色 bgcolor
6.水平对齐 align="left 或 right 或 center”
7.cellspacing="单元格与单元格之间的间距"
8.cellpadding="单元格与内容之间的空隙"
<3>.行tr属性
1.高度 height
2.背景颜色 bgcolor
3.文字水平对齐 align="left 或 right 或 center”
4.文字垂直对齐 valign= “top 或 middle或 bottom"
<4>.单元格td属性
1.宽度 width
2.高度 height
3.背景颜色 bgcolor
4.文字水平对齐 align= "left 或 right 或 center”
5.文字垂直对齐 valign=“ top 或 middle 或 bottom";
注：td: 如果一个单元格的设置宽度，影响的是这一整列的宽度
<body>
<!--width px,百分比(相对于父元素的，) -->
<!--heightpx,百分比(相对于父元素的，) -->
<table border="1px" width="50%" height="500px" align="right"
bordercolor="yellow" bgcolor="red";
cellspacing="0px"
cellpadding="0px">
<!--创建表格-->
<tr bgcolor="orange" height="200px" align="center" valign="top">
<!--tr 表示行-->
<td width="200px">1</td>
<!--td 表示单元格-->
<td height="200px">2</td>
</tr>
<tr>
<td bgcolor="pink">3</td>
<td align="right" valign="top">4</td>
</tr>
</table>
</body>
十九、表格合并列
Colspan=“所要合并的单元格的列数”,必须给td。
Rowspan="所要合并的单元格的行数”,必须给td。
<body>
<table border="1" width="300" height="300">
<tr>
<td align="center">不毛</td>
<td colspan="2" rowspan="2" align="center">魏国</td>
<!-- <td>辽国</td> -->
</tr>
<tr>
<td rowspan="2" align="center">蜀国</td>
<!-- <td colspan="2">西凉</td> -->
<!-- <td>幽州</td> -->
</tr>
<tr>
<!-- <td>南中</td> -->
<td colspan="2" align="center">吴国</td>
<!-- <td>荆州</td> -->
</tr>
</table>
</body>
二十、表格案例
<body>
<table border="1" cellspacing="0" cellpadding="0" align="center">
<tr height="50px" align="center">
<td width="100">会员姓名</td>
<td width="150"></td>
<td width="100">出身日期</td>
<td width="150"></td>
</tr>
<tr height="50px" align="center">
<td width="100">身份证号</td>
<td colspan="4"></td>
<!-- <td></td>
<td></td> -->
</tr>
<tr height="50px" align="center">
<td width="100">通信地址</td>
<td colspan="4"></td>
<!-- <td></td>
<td></td> -->
</tr>
<tr height="50px" align="center">
<td width="100">联系电话</td>
<td colspan="4"></td>
<!-- <td></td>
<td></td> -->
</tr>
<tr height="50px" align="center">
<td width="100">会员卡号</td>
<td colspan="4"></td>
<!-- <td></td>
<td></td> -->
</tr>
</table>
</body>
效果如下：
二十一、表单标签
<form method=“get 或者 post” action=“向何处发送表单数据"></form>
<input>
A. 属性type定义输入框的类型
a) 文本框 type= "text" 密码框type= "password"
b) 提交框 type=“submit" 和 <button> 提交按钮 </button> 一样
c)按钮框 type= “button" 单纯的按钮
d) 重置框 type= "reset" 清空的效果
B. 属性 placeholder 描述输入字段预期值的简短的提示信息。兼容到IE8以上
C.属性 name 必须设置，否则在提交表单时,用户在其中输入的数据不会被发送给服务
D. 属性value
<body>
<form action="https://www.baidu.com" method="POST">
用户信息: <input type="text" placeholder="请输入您的用户名，注意大小写"
name="username">
<br>
密码: <input type="password" placeholder="请输入您的密码，注意大小写"
name="password">
<br>
<!-- <input type="submit" value="登录"> -->
<button type="submit">登录</button>
<!-- 提交信息到action指定的地址 -->
<!-- <input type="reset" value="重置"> -->
<button type="reset">重置</button>
<input type="button" value="hello!">
</form>
</body>
二十二、CSS样式表
CSS，层叠样式表
CSS语法：
1)每个CS样式由两部分组成，即选择符和声明，声明又分为属性和属性值;
2)属性必须放在花括号中，属性与属性值用冒号连接；
3) 每条声明用分号结束；
4)当一个属性有多个属性值的时候，属性值与属性值不分先后顺序，用空格隔开；
5)在书写样式过程中，空格、换行等操作。
1.CSS样式-内部样式
<style>
h1{color: red;}
h2{color: blue;}
h3{color: green;}
</style>
</head>
<body>
<h1>111</h1>
<h2>111</h2>
<h3>111</h3>
</body>
2.CSS样式-外部样式
<!-- <link rel="stylesheet" href="../CSS/index.css"> -->
<style>
@import url(../CSS/index.css);
</style>
</head>
<body>
<h1>hello world!</h1>
</body>
h1{ color: darkturquoise;}
3.CSS样式-行内样式
<body>
<div style="color: red;">我是div1</div>
<div style="color: blue">我是div2</div>
</body>
二十三、CSS样式表的优先级
!important>行内样式>内部样式>外部样式(就近原则)
<style>
div{color: yellow;}
</style>
</head>
<body>
<div style="color: blue;">111111111111111111</div>
</body>
div{color: red !important;
background-color: pink;
}
扫一扫
1408
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
