html+css前端是网站学习的基础，下面分3部分讲解，html+css的基础知识及心得体会！
一、html常用标签
1、标题与段落标签
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>标题与段落</title> </head> <body> <div> <!-- 标题标签h1~h6,加粗显示，字号从大到小 --> <h1>我的第一个标题</h1> <h2>我的第二个标题</h2> <h3>我的第三个标题</h3> <h4>我的第四个标题</h4> <h5>我的第五个标题</h5> <h6>我的第六个标题</h6> <!-- 段落标签 --> <p>段落标签要用P</p> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
2、文本修饰标签
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>文本修饰</title> </head> <body> <div> <!-- strong标签字体加粗，强调语气重要 --> <p>我是一个<strong style="font-size:20px;color: red">中国人</strong></p> <!-- b标签只是字体加粗 --> <p>我是一个<b>中国人</b></p> <!-- em标签字体斜体，强调重要 --> <p>我很爱我的<em>国家</em></p> <!-- i标签只是斜体 --> <p>我很爱我的<i>国家</i></p> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
3、无序列表标签、有序列表标签、定义列表标签
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>列表</title> </head> <body> <div> <!-- 无序列表 --> <ul> <li>今天发生了一件大事</li> <li>明天将会发生大事</li> <li>后天有大事吗？</li> <li>没有大事</li> </ul> <!-- 有序列表 --> <ol> <li>今天发生了一件大事</li> <li>明天将会发生大事</li> <li>后天有大事吗？</li> <li>没有大事</li> </ol> <!-- 定义列表 --> <dl> <dt>百度</dt> <dd>http://www.baidu.com</dd> <dt>php中文网</dt> <dd>http://www.php.cn</dd> </dl> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
4、表格标签
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>表格</title> </head> <body> <!-- 表格常用的标签有：table,caption,thead,tbody,tfoot,tr,th,td等 --> <table width="500px" border="1px" cellpadding="5px" cellspacing="0"> <caption style="font-size: 30px;line-height:60px">课程表</caption> <thead> <tr style="background-color: aquamarine"> <th>时间</th> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> </tr> </thead> <tboedy> <tr align="center"> <td>第一节</td> <td>语文</td> <td>数学</td> <td>英语</td> <td>政治</td> <td>地理</td> </tr> <tr align="center"> <td>第二节</td> <td>语文</td> <td>数学</td> <td>英语</td> <td>政治</td> <td>地理</td> </tr> <tr align="center"> <td>第三节</td> <td>语文</td> <td>数学</td> <td>英语</td> <td>政治</td> <td>地理</td> </tr> </tboedy> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
5、各类表单标签
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>表单</title> </head> <body> <!-- 表单是用户把数据提交到服务器的入口，重要的交互式工具 --> <!-- 表单常用的标签：form,label,input,button,textarea,select --> <h3>用户注册</h3> <form action="#" mthod="get"> <!-- 单行文本框 --> <div> <label for="username">用户名：</label> <input type="text" name="username" id="username" placeholder="请输入你的用户名" required> </div> <!-- 密码框 --> <div> <label for="password">密 码：</label> <input type="password" name="password" required> </div> <div> <label for="password">确认密码：</label> <input type="password" name="password" required> </div> <!-- 单选按钮 --> <div> <input type="radio" name="gender" value="male" id="male"> <label for="male">男</label> <input type="radio" name="gender" value="female" id="female" checked> <label for="female">女</label> </div> <!-- 复选框 --> <div> <input type="checkbox" name="hobby[]" id="book" value="book" checked><label for="book">看书</label> <input type="checkbox" name="hobby[]" id="game" value="game"><label for="game">游戏</label> </div> <!-- 下拉列表 --> <div> <label for="city">城市：</label> <select name="" id="city" value=""> <option value="hhht">呼和浩特</option> <option value="bt">包头</option> <option value="eeds" selected>鄂尔多斯</option> </select> </div> <!-- 多行文本域 --> <label for="message">备注：</label> <textarea name="message" id="message" cols="30" rows="10" placeholder="请输入要备注的内容"></textarea> <!-- 提交按钮、充值按钮 --> <div> <input type="submit" value="提交"> <input type="reset" value="重置"> </div> <!-- button按钮 --> <div> <button type="button">注册</button> </div> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
6、图片标签与视频标签
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>图片标签与视频标签</title> </head> <body> <div> <!-- 图片标签 --> <img src="images/gugong.jpg" alt="漂亮的风景" width="300px"> </div> <div> <!-- 视频标签，controls控制播放按钮控件显示，muted是默认静音 --> <video src="video/demo.mp4" width="300px" controls muted></video> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
二、css基础
1、常用选择器：标签选择器，class类选择器，id选择器，以及选择器优先级
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css常用选择器与优先级</title>
<!-- 常用选择器：标签选择器，class类选择器，id选择器 -->
<style>
p {
font-size:20px;
color:#ffffff;
font-weight: bold;
background-color: brown;
height:40px;
line-height: 40px;
}
.bg-blue {
background-color:lightblue
}
#bg-gree {
background-color:lightgreen
}
</style>
</head>
<body>
<!-- 选择器优先级：标签选择器<类选择器<id选择器<行内样式 -->
<p class="bg-blue" id="bg-gree" style="background-color: lightslategrey">好好学习，天天向上</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2、盒子的世界
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>盒子的世界</title>
<style>
.box1 {
width:200px;
height:200px;
background-color:magenta;
/* 内边距 */
padding-top:30px;
padding-right:30px;
padding-bottom:30px;
padding-left:30px;
/* 内边距简写，第2个是左右 */
padding:10px 30px 20px 10px;
padding:10px 30px;
padding:10px 30px 50px;
padding:30px;
/* 边框 */
border-top-width: 10px;
border-top-color:lightgreen;
border-top-style:solid;
border-right-width:10px;
border-right-color:lightgreen;
border-right-style:dashed;
border-bottom-width:10px;
border-bottom-color:lightgreen;
border-bottom-style:dotted;
border-left-width:10px;
border-left-color:lightgreen;
border-left-style:double;
/* 边框简写 */
border-top:10px solid limegreen;
border-right:10px dashed lightsalmon;
border-bottom:10px dotted lightgray;
border-left:10px double lightgoldenrodyellow;
border:10px solid lightseagreen;
}
.box2 {
height:inherit;
background-color:mediumblue;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
三、心得体会
学习就得按部就班的来操作，同时也得合理安排时间，争取在第四期学会所有的知识并熟练应用。