HTML(5)和CSS(3)入门
header–表示头部
section–表示一个标签栏
footer–表示尾部标签栏
aside定义侧边栏区域
在 html 中是忽略回车和空格的，你输入的再多回车和空格也是显示不出来的。使用
表示的
；–实现空格
hr–实现横线
实现无序列表
<ul>
<li>信息li>
<li>信息li>
......
ul>
实现有序列表
<ol>
<li>信息li>
<li>信息li>
......
ol>
标签为网页添加图片
标签中的target属性
<html>
<head>
<meta charset="UTF-8">
<title>target属性title>
head>
<body>
<a href="https://www.baidu.com" target="_self">百度自己窗口a><br />
<a href="https://www.baidu.com" target="_blank">百度新的窗口a>
body>
html>
a标签有的target属性，代表打开网页的方式。可选值为”_self和_blank”，默认值为_self，代表在当前页面打开链接，_blank代表在新窗口打开链接。
制作表格table
<html>
<head>
<meta charset="UTF-8">
<title>学习表格标签title>
head>
<body>
<table border="1">
<caption>前端三剑客caption>
<tr>
<th>知识点th>
<th>重要程度th>
<th>难度th>
<th>学习周期th>
tr>
<tr>
<td>htmltd>
<td>五星td>
<td>三星td>
<td>7天td>
tr>
<tr>
<td>csstd>
<td>五星td>
<td>四星td>
<td>10天td>
tr>
<tr>
<td>jstd>
<td>五星td>
<td>四星td>
<td>20天td>
tr>
table>
body>
html>
1、table标签用来定义整个表格，为双标签，必须有结束标签。
2、table标签里面可以放caption标签和tr标签。
3、caption标签用来定义表格的标题。
4、tr标签用来设置表格的行，tr里面只能放th或者td标签，一组tr标签代表一行。
5、th用来设置表格的标题，会加粗居中显示。也就是th标签中的文本默认为粗体并且居中显示。
6、td同来设置表格的列，一组td标签代表一列。
7、table表格在没有添加border属性之前, 在浏览器中显示是没有表格线的。
使用thead、tbody、tfoot定义表格
<body>
<h3>成绩表h3>
<hr />
<table border="1">
<thead>
<tr>
<th>科目th>
<th>分数th>
tr>
thead>
<tbody>
<tr>
<td>语文td>
<td>99td>
tr>
<tr>
<td>数学td>
<td>60td>
tr>
tbody>
<tfoot>
<tr>
<td>总分td>
<td>159td>
tr>
tfoot>
table>
body>
html>
我们表格第一行为表头数据,我们用标签包裹,中间的科目和分数为表格的主体内容,我们用标签包裹,最后的总分我们用标签包裹。
文本输入框和密码输入框
1、type：
当type="text"时，输入框为文本输入框;
当type="password"时, 输入框为密码输入框。
2、name：为文本框命名，以备后台程序ASP 、PHP使用。
3、value：为文本输入框设置默认值。(一般起到提示作用)
<body>
<form method="post" action="save.php">
账户:<input type="text" name="myname"/>
<br>
密码:<input type="password" name="pass"/>
form>
body>
html>
placeholder占位符
技术点的解释：
1、placeholder属性为输入框占位符,里面可以放提示的输入信息。
2、placeholder属性的值可以任意填写,当输入框输入内容时,占位符内容消失,输入框无内容时,占位符内容显示。
3、占位符内容不是输入框真正的内容。
<form action="post">
<label>用户名：label>
<input name="myName" placeholder="请输入用户名" value="andy"/>
<br />
<label>密码：label>
<input name="pass" placeholder="请输入密码"/>
form>
数字输入框
技术点的解释：
1、input的type属性设置为number,则表示该输入框的类型为数字。
2、数字框只能输入数字，输入其他字符无效。
3、数字框最右侧会有一个加减符号,可以调整输入数字的大小,不同浏览器表现不一致。
<body>
<form>
<label>请输入数字:label>
<input name="number" type="number"/>
form>
body>
网站输入框
1、input的type属性设置为url,则表示该输入框的类型为网址。
2、数字框的值需以http://或者https://开头,且后面必须有内容,否则表单提交的时候会报错误提示。
<body>
网站输入框
<input type="url"/>
body>
邮箱输入框
1、Input的type属性设置为email,则表示该输入框的类型为邮箱。
2、数字框的值必须包含@。
3、数字框的值@之后必须有内容,否则会报错误提示。
<body>
<input type="email"/>
body>
创建文本域
1、结束。
2、cols ：多行输入域的列数。
3、rows ：多行输入域的行数。
4、在标签之间可以输入默认值。
<form method="post" action="save.php">
<label>联系我们label>
<textarea cols="50" rows="10" >在这里输入内容...textarea>
form>
注意这两个属性可用css样式的width和height来代替：col用width、row用height来代替。（这两个css样式在以后的章节会讲解）
使用label标签装饰input标签
label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。
注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。
<form methed="post">
<label for="myName">用户名label>
<input type="text" id="myName" placeholder="请输入用户名"/><br />
<label for="myPass">密码label>
<input type="password" id="myPass" placeholder="请输入密码">
form>
单选框和复选框
<input type="radio/checkbox" value="值" name="名称" checked="checked"/>
1、type:
当 type="radio" 时，控件为单选框
当 type="checkbox" 时，控件为复选框
2、value：提交数据到服务器的值（后台程序PHP使用）
3、name：为控件命名，以备后台程序 ASP、PHP 使用
4、checked：当设置 checked="checked" 时，该选项被默认选中
<form methed="post">
<label for="">你是否喜欢电脑label><br />
<input type="radio" name="radiolove" value="喜欢" checked="checked"/>喜欢
<input type="radio" name="radiolove" value="不喜欢"/>不喜欢
<input type="radio" name="radiolove" value="无所谓"/>无所谓
<br />
<br />
<label for="">请选择你喜欢的运动label><br />
<input type="checkbox" name="one" value="跑步" checked="checked">跑步
<input type="checkbox" name="two" value="登山">登山
<input type="checkbox" name="three" value="跑步">游泳
<input type="checkbox" name="four" value="骑车" checked="checked">骑车
form>
使用select、option标签创建下拉菜单
1、select和option标签都是双标签，它总是成对出现的，需要首标签和尾标签。
2、select标签里面只能放option标签，表示下拉列表的选项。
3、option标签放选项内容，不放置其他标签。
4、value：是向服务器提交的值，option中间的是显示的值
5、selected=“selected”：
设置selected="selected"属性，则该选项就被默认选中。
<form action="">
<select >
<option value="看书">看书option>
<option value="看书">骑车option>
<option value="看书">玩游戏option>
<option value="看书" selected="selected">做饭option>
select>
form>
提交按钮
<input type="submit" value="提交">
type:只有当type值设置为submit时，按钮才有提交作用
value:按钮上显示的文字
<form method="post" action="save.php">
<label for="myName">姓名：label>
<input type="text" value=" " name="myName " />
<input type="submit" value="提交" name="submitBtn" />
form>
使用重置按钮
<input type="reset" value="重置" />
type：只有当type值设置为reset时，按钮才有重置作用
value：按钮上显示的文字
input和选择框融合使用
<html>
<head>
<meta charset="UTF-8">
<title>labeltitle>
head>
<body>
<form action="">
<label for="">下拉菜单label><br />
<select >
<option value="看书">看书option>
<option value="看书">骑车option>
<option value="看书">玩游戏option>
<option value="看书" selected="selected">做饭option>
select>
<br />
<br />
<label for="">单选label>
<div>
<input type="radio" value="喜欢" name="radiolove" checked="checked"/>喜欢
<input type="radio" value="不喜欢" name="radiolove"/>不喜欢
<input type="radio" value="随便" name="radiolove"/>随便
div>
<br />
<br />
<label for="">多选label>
<div>
<input type="checkbox" name="one" value="牛肉" checked="checked">牛肉
<input type="checkbox" name="two" value="猪肉">猪肉
<input type="checkbox" name="three" value="鱼肉" checked="checked">鱼肉
<input type="checkbox" name="four" value="狗肉">狗肉
div>
<br />
<br />
<div>
<label for="MyName">用户名label>
<input type="text" name="MyName" placeholder="请输入用户名">
<label for="pass">密码label>
<input type="password" name="pass" placeholder="请输入密码">
div>
<input type="submit" value="提交" style="color: blue">
<input type="reset" value="重置" style="color: red">
form>
body>
html>
css代码语法
**选择符：**又称选择器，指明网页中要应用样式规则的元素，如本例中是网页中所有的段（p）的文字将变成蓝色，而其他的元素（如ol）不会受到影响。
**声明：**在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔，如下所示：
p{font-size:12px;color:red;}
注意：
1、最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号。
2、为了使用样式更加容易阅读，可以将每条代码写在一个新行内，如下所示：
p{
font-size:12px;
color:red;
}
<html>
<head>
<meta charset="UTF-8">
<title>CSS代码语法title>
<style type="text/css">
p {
font-size:12px;
color:red;
font-weight:bold;
}
style>
head>
<body>
<p>慕课网，超酷的互联网、IT技术免费学习平台，创新的网络一站式学习、实践体验；服务及时贴心，内容专业、有趣易学。专注服务互联网工程师快速成为技术高手！p>
body>
html>
css的注释
css的注释使用/*这里是注释*/
p {
font-size:12px;/*设置文字字号为12px*/
color:red;/*设置文字颜色为红色*/
}
内联式css样式
CSS样式可以写在哪些地方呢？从CSS 样式代码插入的形式来看基本可以分为以下3种：内联式、嵌入式和外部式三种。这一小节先来讲解内联式。
"color:red;font-size:12px">这里文字是红色。
嵌入式css样式
嵌入式css样式必须写在之间，并且一般情况下嵌入式css样式写在之间。如右边编辑器中的代码。
嵌入式css样式
慕课网，超酷的互联网、IT技术免费学习平台，创新的网络一站式学习、实践体验；服务及时贴心，内容专业、有趣易学。专注服务互联网工程师快速成为技术高手！
外联式css样式
外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在内（不是在
使用color设置字体颜色
1、color属性可以设置字体颜色。
2、color的值有3种设置方式：
- 英文命令颜色
p{color:red;}
- RGB颜色
这个与 photoshop 中的 RGB 颜色是一致的，由 R(red)、G(green)、B(blue) 三种颜色的比例来配色。
p{color:rgb(133,45,200);}
每一项的值可以是 0~255 之间的整数，也可以是 0%~100% 的百分数。如：
p{color:rgb(20%,33%,25%);}
- 十六进制颜色
这种颜色设置方法是现在比较普遍使用的方法，其原理其实也是 RGB 设置，但是其每一项的值由 0-255 变成了十六进制 00-ff。
p{color:#00ffff;}
配色表：
使用三种color方法配置css样式
/*使用三种不同的方法将字体设置为红色*/
font简写方式
网页中的字体css样式代码也有他自己的缩写方式，下面是给网页设置字体的代码：
body{
font-style:italic;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:"宋体",sans-serif;
}
这么多行的代码其实可以缩写为一句：
body{
font:italic bold 12px/1.5em "宋体",sans-serif;
}
注意：
1、使用这一简写方式你至少要指定 font-size 和 font-family 属性，其他的属性(如 font-weight、font-style、font-variant、line-height)如未指定将自动使用默认值。
2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。
一般情况下因为对于中文网站，英文还是比较少的，所以下面缩写代码比较常用：
body{
font:12px/1.5em "宋体",sans-serif;
}
只是有字号、行间距、中文字体、英文字体设置。
使用text-decoration添加文本修饰
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9JAdswVt-1611216755341)( https://user-gold-cdn.xitu.io/2020/7/7/17329d68bb2a82ff?w=1184&h=377&f=png&s=30045 )]
1、text-decoration可以设置添加到文本的修饰。
2、text-decoration默认值为none, 定义标准的文本。
3、text-decoration的值为underline为定义文本下的一条线。
4、text-decoration的值为overline为定义文本上的一条线。
5、text-decoration的值为line-through为定义穿过文本下的一条线，一般用于商品折扣价。
使用text-indent为文本添加首行缩进
p{text-indent:2em;}
/*2em指的是两倍大小*/
使用line-height为文字设置行间间距
p{line-height:1.5em;}
/*line-height:1.5em;就是指的是上一行和下一行字的同样位置的高度和字体高低的比例*/
使用letter/word-spacing设置字母/单词之间的间距
p{
letter-spacing:20px; /*设置单词之间的间距为20px*/
word-spacing:20px; /*设置单词之间的间距为20px*/
}
使用text-align设置文本对齐
/*text-align:center水平居中
text-align:left;居左
text-alignLright;居右
*/
长度值
长度单位总结一下，目前比较常用到px（像素）、em、% 百分比，要注意其实这三种单位都是相对单位。
1、像素
像素为什么是相对单位呢？因为像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）。实际情况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单位。
2、em
就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px。如下代码：
p{font-size:12px;text-indent:2em;}
上面代码就是可以实现段落首行缩进 24px（也就是两个字体大小的距离）。
下面注意一个特殊情况：
但当给 font-size 设置单位为 em 时，此时计算的标准以 p 的父元素的 font-size 为基础。如下代码：
html:
以这个例子为例。
css:
p{font-size:14px}
span{font-size:0.8em;}
结果 span 中的字体“例子”字体大小就为 11.2px（14 * 0.8 = 11.2px）。
3、百分比
p{font-size:12px;line-height:130%}
设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）。
font-size指的是字体大小，px代表的是像素，em代表的是几倍根元素大小
元素分类
在讲解CSS布局之前，我们需要提前知道一些知识，在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。
常用的块状元素有：
、、
...、、、、、、 、