学习HTML/CSS基本标签及属性的使用方法分享：
一、标题与段落
实例
<!DOCTYPE html> <html> <head> <title>标题及段落</title> </head> <body> <!-- h1-h6标签为标题标签常用在标题中，所属块及元素独占一行 --> <h1>标题一</h1> <h2>标题一</h2> <h3>标题一</h3> <h4>标题一</h4> <h5>标题一</h5> <h5>标题一</h5> <!-- 段落标签可以有多个，属于块及 --> <p>这是一段话，你看的到吗？</p> <p>学习基础知识你感觉***呢？</p> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
二、文本修饰
实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文本修饰</title> </head> <body> <!-- 文本修饰一般是用在突出某个词使用比如strong标签及em标签 --> <!-- strong为加粗标签 --> <p>你站这这里<strong style="color: red">干嘛</strong>？</p> <!-- em标签为斜体标签 --> <p>为什么<em style="background-color:pink;">不进去</em>呢？</p> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
三、列表
实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>列表标签</title> </head> <body> <div> <h2>购物清单</h2> <!-- 无序列表，每个列表无特定顺序，默认前面一个圆点表示，可嵌套 --> <ul> <li>买了一块面包</li> <li>一只笔</li> <li>1斤鸡蛋</li> </ul> <!-- 有序列表，每个列表前自动添加序号从1开始 --> <ol> <li>买了一块面包</li> <li>一只笔</li> <li>1斤鸡蛋</li> </ol> <!-- 定义列表,类似于名称解释,常用用来做友情链接 --> <dl> <!-- dt相当于名称 --> <dt>PHP中文网</dt> <!-- dd标签相当于解释 --> <dd>PHP中文网是一个大型免费的学习平台</dd> </dl> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
四、表单制作
1.table原生属性制作
实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表格标签</title> </head> <body> <!-- 完整表格,涉及标签: table,caption, thead,tbody,tfoot,tr,th,td --> <!-- 表格至少涉及三个标签: table(表格), tr(行), th/td(单元格) --> <!-- 原生属性表格中标签使用border为表边框 --> <table border="1" cellspacing="0" cellpadding="0" width="400" height"300"> <!-- caption标签为首部说明 --> <caption>购物清单</caption> <!-- 表头使用tr，th标签组合 --> <!-- thead标签为表格头部 --> <thead> <tr> <th>序号</th> <th>名称</th> <th>价格</th> <th>用途</th> </tr> </thead> <!-- 表内容使用tr，td标签组合 --> <!-- tbody标签为表格主体内容 --> <tbody> <tr align="center"> <td>1</td> <td>香蕉</td> <td>10元</td> <td>吃</td> </tr> <tr align="center"> <td>2</td> <td>苹果</td> <td>15元</td> <td>吃</td> </tr> <tr align="center"> <td>3</td> <td>梨</td> <td>12元</td> <td>吃</td> </tr> </tbody> </table> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
2.CSS制作表格
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS表格标签</title>
<style type="text/css">
table{
width: 400px;
height:100px;
border:1px solid #000;
border-collapse: collapse;
text-align: center;
}
table h1{
font-size: 15px;
text-align: center;
}
tr th{
border: 1px solid #000;
}
tr td{
border: 1px solid #000;
}
</style>
</head>
<body>
<table>
<caption>购物清单</caption>
<tr>
<th>序号</th>
<th>名称</th>
<th>价格</th>
<th>用途</th>
</tr>
<tr>
<td>1</td>
<td>香蕉</td>
<td>10元</td>
<td>吃</td>
</tr>
<tr>
<td>2</td>
<td>苹果</td>
<td>15元</td>
<td>吃</td>
</tr>
<tr>
<td>3</td>
<td>梨</td>
<td>12元</td>
<td>吃</td>
</tr>
</table>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
五、表单制作
实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>用户注册表单</title> </head> <body> <div> <h2>用户注册</h2> <form method="post" action="try.php"> <div> <!-- 使用lable标签控件的提示文本，点击字体可选中文本框，label的for属性与控件的id绑定 --> <!-- <label for="username"> 用户名：</label> --> <!-- 简写 --> <!-- placeholder用于文本框的提示文本 --> <label>用户名：<input type="text" name="username" id="username" placeholder="不能少于6个字符" value=""></label> <div> <!-- name和value属性应该成对出现,将用户数据以名值对的形式提交到服务器上指定脚本处理 --> <!-- password密码类型，输入文本以*代替，隐藏其文本 --> <label>密码：<input type="password" name="pwd" placeholder="必须包含字母数字大小写" value=""></label> </div> <div> <label>确认密码：<input type="password" name="pwd" placeholder="必须包含字母数字大小写" value=""></label> </div> <div> <!-- 单选按钮,每一组的name属性值必须相同,才会只返回唯一值,并设置checked默认属性 --> <!-- 单选按钮中，value属性值不必相同，value值才是提交到后台的数据 --> 性别： <label> <input type="radio" name="gender" value="male" checked="checked">男 </label> <label> <input type="radio" name="gender" value="women">女 </label> </div> <div> <!-- 一组复选框的name属性必须是相同的, 应该使用数组的语法,因为可以同时选择多个 --> 兴趣爱好： <label> <input type="checkbox" name="hobby[]" value="game" checked="checked">打游戏</label> <label> <input type="checkbox" name="hobby[]" value="cards">打牌</label> <label> <input type="checkbox" name="hobby[]" value="trip">旅游</label> </div> <div> <!-- select下拉列表,name是固定的,但value是动态的,select中的value根据内部的option选中状态变化 --> 学历：<label> <select name="edu" value=""> <option value="1">高中</option> <option value="2" selected="">大学</option> <option value="3">博士</option> </select> </label> </div> <div> 个人简介：<label> <!-- textarea为多行文本框 --> <textarea name="text" value="" cols="20" rows="5" placeholder="不少于50个字符"> </textarea> </label> </div> <div> <!-- submit提交注册按钮 --> <input type="submit" name="" value="注册"> <!-- reset重置按钮 --> <input type="reset" name="" value="重置"> <!-- button提交按钮 --> <button type="button">提交</button> </div> </div> </form> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
六、图片媒体
实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>图片媒体</title> </head> <body> <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> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
注：图片媒体显示结果
七、CSS常用选择器及优先级
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引用外部CSS文件 -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>css常用选择与优先级</title>
<style type="text/css">
/**选择所有元素*/
*{margin:0px;padding: 0px;}
/*p为标签选择器*/
p{
background-color: #blue;
width: 500px;
text-align: center;
}
/*class选择器*/
.box{
background-color: red;
width: 500px;
text-align: center;
}
/*ID选择器*/
#box1{
background-color: pink;
width: 500px;
text-align: center;
}
</style>
</head>
<body>
<!-- 选择器优先级标签 < 类class < id <行内样式 -->
<div class="box" id="box1">
<p style="background-color:#ccc;">css样式规则 = 选择器 + 样式声明 </p>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
八、盒模型布局
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引用外部CSS文件 -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>盒模型布局</title>
<style type="text/css">
/**选择所有元素*/
*{margin:0px;padding: 0px;}
.box1{
width:500px;
height: 500px;
background-color: blue;
border:1px solid #ccc;
padding: 20px 30px 10px;
margin: 20px 30px;
}
.box2{
width: 500px;
height: 500px;
background-color: red;
border: 1px solid #000;
text-align: center;
line-height: 500px;
}
</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">
<p>我是一个盒子</p>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例