学习HTML/CSS基本标签及属性的使用方法：
HTML
一、标题与段落
实例
<div> <!-- 标题标签共有6级: h1 ~ h6, 大多只用到h1~h3 --> <h1>我的博客</h1> <h2>我的博客</h2> <h3>我的博客</h3> <p>内容丰富</p> <!-- 段落可以有多个 --> <p>学习使我快乐</p> </div>
运行实例 »
点击 "运行实例" 按钮查看在线实例
二、文本修饰
实例
<div> <!-- 一个段落中我只关注部分内容 --> <!-- strong: 文本加粗 --> <p>努力<strong style="background: black;color:white">锻炼</strong>, 增强<span style="color:blue">体魄</span></p> <!-- em: 文本斜体 --> <p>说好一起当<em style="color:red">锻炼</em>,你却偷偷溜了</p> </div>
运行实例 »
点击 "运行实例" 按钮查看在线实例
三、列表
实例
<div> <!-- 无序列表: 每个列表项之间无特定顺序,默认前面有一个小圆点,可嵌套 --> <h3>购物清单</h3> <ul> <li>1. 买了个西瓜</li> <li>2. 买了个橘子</li> <li>3. 买了个苹果</li> </ul> <!-- 其实这个购物清单更适合有序列表,列表项前自动添加数值序号(从1开始) --> <ol> <li>买了个西瓜</li> <li>买了个橘子</li> <li>买了个苹果</li> </ol> <!-- 定义列表,类似于名称解释,常用用来做友情链接 --> <dl> <dt>水果店</dt> <dd>卖水果的商店</dd> <dt>手机</dt> <dd>通话工具</dd> </dl> </div>
运行实例 »
点击 "运行实例" 按钮查看在线实例
四、表格
实例
<table border="1" cellpadding="0" cellspacing="0" width="500" height="150"> <caption>购物车</caption> <!-- 表头 --> <thead> <tr bgcolor="lightblue"> <th>序号</th> <th>名称</th> <th>价格</th> <th>数量</th> <th>用途</th> </tr> </thead> <tr> <td align="center">1</td> <td align="center">西瓜</td> <td align="center">10</td> <td align="center">1</td> <td align="center" rowspan="3">吃</td> </tr> <!-- align="center"可以用到tr上再加方便 --> <tr align="center"> <td>2</td> <td>橘子</td> <td>8</td> <td>20</td> </tr> <tr align="center"> <td>3</td> <td>苹果</td> <td>6</td> <td>10</td> </tr> </table>
运行实例 »
点击 "运行实例" 按钮查看在线实例
五、 表单
实例
<form action="" method="GET"> <div> <!-- (1)控件的提示文本应该放在独立的label标签中,label的for属性与控件的id绑定 (2)一旦绑定成功, 点击标签文本,焦点会自动落到对应的控件上 --> <!-- 用户名: --> <label for="username">用户名:</label> <!-- name和value属性应该成对出现,将用户数据以名值对的形式提交到服务器上指定脚本处理 --> <!-- placeholder: 用户于设置文本框的提示文本 --> <input type="text" id="username" name="username" value="" placeholder="不少于6位"> </div> <div> <!-- 再介绍一种语法,可以少写二个属性for,id,将控件元素写在label标签内 --> <label> <!-- password类型,输入的内容以*号占位符代替 --> 密码: <input type="password" name="password" value="" placeholder="必须包括字母数字大小写" size="30"> </label> </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="smoke" id="smoke"><label for="smoke">抽烟</label> <!-- 同样也是使用checked设置默认值,可同时设置多个 --> <input type="checkbox" name="hobby[]" value="programme" id="programme" checked><label for="programme">撸代码</label> </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> </select> </div> <!-- 文本域,其实就是多行文本框 --> <div> <label for="common">请留言:</label> <textarea name="" id="common" cols="30" rows="10" placeholder="不超过100字" value=""></textarea> </div> <!-- 按钮 --> <input type="submit" value="提交"> <!-- 重置功能极少用到,推荐不要再使用,而是通过其它方式 --> <input type="reset" value="重置"> <!-- 推荐使用语义化的button标签 --> <!-- button默认类型为提交submit,通常是修改为button类型,最后通过ajax异步提交表单 --> <button type="button">注册</button> </form>
运行实例 »
点击 "运行实例" 按钮查看在线实例
六、图片与媒
实例
<div> <!-- img外部引用图片，alt标签描述图片名称对于SEO优化收录比较好 --> <img src="images/logo.png" width="200" height="300" alt="logo"> </div> <div> <!-- video标签controls控制显示播放 --> <video src="images/demo.mp4" controls></video> </div>
运行实例 »
点击 "运行实例" 按钮查看在线实例
CSS
七、CSS常用选择器及优先级
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用选择器与优先级(selector)</title>
<style>
/* 标签选择器 */
p {
background-color:lightgreen;
color: red;
}
/* class类选择器 */
.box {
background-color: skyblue;
}
/* id选择器 */
#box1 {
background-color: yellow;
}
</style>
</head>
<body>
<!-- 选择器优先级:标签 < 类class < id <行内样式 -->
<div class="box" id="box1">
<p style="background-color:#ccc;">css样式规则 = 选择器 + 样式声明 </p>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
八、盒模型布局
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒模型布局</title>
<!-- 引用外部CSS文件 -->
<link rel="stylesheet" href="static/css/style.css">
<style type="text/css">
/**选择所有元素*/
*{margin:0px;padding: 0px;}
.box1{
width: 200px;
height: 200px;
background-color: lightblue;
border:1px solid #ccc;
padding: 20px 30px 10px;
margin: 20px 30px;
}
.box2{
height: inherit;
background-color: wheat;
}
</style>
</head>
<body>
<!--
1. 盒模型是布局的基础,页面上的一切可见元素皆可看做盒子
2. 盒子默认都是块级元素: 独占一行,支持宽度设置
(根据盒子模型示意图分析)
3. 盒子模型分为三个层级:
1. 内容级: 宽高和背景三个属性
(1): width
(2): height
(3): background-color (默认透明)
2. 元素级(可视范围)
(1): 包括内容级(width + height + background)
(2): 内边距: padding
(3): 边框: border
3. 位置级:margin, 决定当前盒子与其它盒子之间的位置与关系
-->
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例