HTML、CSS、JS三种语言支撑起了Wbe前端，前端开发必须掌握这些语言，接下来用一些简单示例介绍一下HTML/CSS的应用
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>html常用标签&css样式设置</title> </head> <body> <!-- 标题与段落 --> <div> <!-- 各级标题 --> <h1>今天天气不错哟</h1> <h2>今天天气不错哟</h2> <h3>今天天气不错哟</h3> <h4>今天天气不错哟</h4> <h5>今天天气不错哟</h5> <h6>今天天气不错哟</h6> <!-- 段落 --> <p>生活如酒，或芳香，或浓烈，因为诚实，它变得醇厚；生活如歌，或高昂，或低沉，因为守信，它变得悦耳； 生活如画，或明丽，或素雅，因为诚信，它变得美丽。</p> <p>若能掬起一捧月光，我选择最柔和的；若能采来香山红叶，我选择最艳丽的；若能摘下满天星辰，我选择最明亮的。也许你会说，我的选择不是最好，但我的选择，我相信。</p> </div> <!-- hr 标签是在页面中添加一条水平分隔线 --> <hr> <!-- 文本修饰 --> <div> <!-- strong: 文本加粗 --> <p><strong style="background: pink">生活</strong>如酒，或芳香，或浓烈，因为诚实，它变得醇厚；生活如歌，或高昂，或低沉，因为守信，它变得悦耳； 生活如画，或明丽，或素雅，因为诚信，它变得美丽。</p> <!-- em: 文本斜体 --> <p><em style="font-size: 20px; color: red">生活</em>如酒，或芳香，或浓烈，因为诚实，它变得醇厚；生活如歌，或高昂，或低沉，因为守信，它变得悦耳； 生活如画，或明丽，或素雅，因为诚信，它变得美丽。</p> </div> <hr> <div> <!-- 无序列表: 每个列表项之间无特定顺序,默认前面有一个小圆点,可嵌套 --> <h3>四季</h3> <ul> <li>春</li> <li>夏</li> <li>秋</li> <li>冬</li> </ul> <!-- 有序列表：列表项前自动添加数值序号(从1开始) --> <ol> <li>春</li> <li>夏</li> <li>秋</li> <li>冬</li> </ol> <!-- 定义列表：类似于名称解释,常用用来做友情链接 --> <dl> <dt>生命体征</dt> <dd>生命体征就是用来判断病人的病情轻重和危急程度的指征</dd> <dt>呼吸</dt> <dd>呼吸是呼吸道和肺的活动。人体通过呼吸，吸进氧气，呼出二氧化碳，是重要的生命活动之一</dd> </dl> </div> <hr> <!-- 表格 --> <table border="1" width="500" height="150"> <caption>购物车</caption> <!-- 表头 --> <thead> <tr bgcolor="#ccc"> <th>名称</th> <th>价格(斤/元)</th> <th>数量(斤)</th> </tr> </thead> <tr align="center"> <td>青菜</td> <td>4</td> <td>5</td> </tr> <tr align="center"> <td>猪肉</td> <td>10</td> <td>8</td> </tr> <tr align="center"> <td>虾</td> <td>30</td> <td>11</td> </tr> </table> <hr> <!--表单 --> <h2>用户注册</h2> <form action="" method="post"><!-- post方法比get方法安全 --> <div> <!-- 用户名: --> <label for="username">用户名:</label><!-- for绑定对应的标签id --> <!-- placeholder: 用户于设置文本框的提示文本 --> <input type="text" id="username" name="username" value="" placeholder="不少于6位"> </div> <div> <label> <!-- password类型,输入的内容以*号占位符代替 --> 密码: <input type="password" name="password" value="" placeholder="必须包括字母数字大小写" size="30"> </label><!-- 在label里面写入标签，可代替for绑定 --> </div> <div> <label> 确认密码: <input type="password" name="password" value="" placeholder="必须包括字母数字大小写" size="30"> </label> </div> <div> <!-- 单选按钮,每一组的name属性值必须相同,才会只返回唯一值,并自动设置它的checked属性 --> <!-- 可以事先用checked属性设置默认选中值, 标签文本与value值不必相同,value才是提交到后端的数据 --> <input type="radio" name="gender" id="male" value="male" checked><label for="male">男</label> <input type="radio" name="gender" id="female" value="female"><label for="female">女</label> </div> <div> <!-- 复选框 --> <!-- 将提示文本全部放在label标签中,确保点击标签文本,也可以选中对应的复选框 --> <!-- 一组复选框的name属性必须是相同的, 应该使用数组的语法,因为可以同时选择多个 --> <input type="checkbox" name="hobby[]" value="game" id="game" checked><label for="game">打游戏</label> <input type="checkbox" name="hobby[]" value="book" id="book"><label for="book">看书</label> <!-- 同样也是使用checked设置默认值,可同时设置多个 --> <input type="checkbox" name="hobby[]" value="run" id="run"><label for="run">跑步</label> <input type="checkbox" name="hobby[]" value="sleep" id="sleep" checked><label for="sleep">睡觉</label> </input> </div> <div> <!-- 下拉列表,name固定,但value是动态的,select中的value根据内部的option选中状态变化 --> <label for="edu">您的学历:</label> <select name="" id="edu" value=""> <option value="1">没读过书</option> <!-- selected设置默认项 --> <option value="2" selected>小学</option> <option value="3">初中</option> <option value="4">高中</option> <option value="5">大学</option> <option value="6">研究生</option> <option value="7">其他</option> </select> </div> <div> <!-- 文本域 --> <label for="common">请留言:</label> <textarea name="" id="common" cols="30" rows="10" placeholder="不超过250字" value=""></textarea> </div> <!-- 按钮 --> <!-- 提交按钮，用于提交表单信息 --> <input type="submit" value="提交"> <input type="reset" value="重置"> <button type="button">注册</button> </form> <hr> <!--图片与媒体 --> <div> <!-- 图片标签是单标签,引入的是外部的资源 src="图片地址", 支持本地和网络url地址 alt="提示文本", 当图片不能显示或被用户禁用时显示它,seo优化也会用到它 --> <img src="static/images/zly.jpg" alt="颖***" width="200"> <br> <!-- 播放视频:controls显示播放控件, 支持宽度设置 --> <video src="static/images/demo.mp4" controls="controls" width="400"></video> </div> <hr> <div style="width: 200px;height: 180px;background: pink;padding: 50px 60px;"> <div style="width: 150px;height: 150px;background: #ccc;border: 1px solid #000;border-radius: 10px;margin:15px auto;"> </div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
总结：
1、html各种常用标签需多加运用练习，熟悉它们的属性
2、css的常用选择器：标签、id、class、属性、派生
3、css的引入方法与优先级：
3.1、内联样式：直接在标记标签中写css样式
3.2、内部样式：在页面head内部编写样式
3.3、外部样式：第一，编写外部样式表文件（后缀css）；第二，需要在页面中用link引用
3.4、优先级：内联样式＞内部样式＞外部样式
在本示例中，用的是内联样式
4、设置padding时，会把div撑大，需要再次调节div的宽高
