实例
<!-- 设置文档类型为html --> <!DOCTYPE html> <!-- 设置页面语言默认为English --> <html lang="en"> <!-- 头部文件、供浏览器读取，除title外其他内容用户并不关心 --> <head> <!-- 设置当前页面编码字符集为UTF8 --> <meta charset="UTF-8"> <!-- 设置页面标题文本内容，显示在浏览器窗口的标签页 --> <title>html文档</title> </head> <body> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
总结：1、html是根标签,代表整个文档，有且仅有一个。
2、编码常用的有uft8、gb2312。
3、标题title唯一。
二、html常用标签
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>html常用标签</title> </head> <body style="height:3000px"> <!-- 标题与段落 --> <div> <h1>不靠谱的承诺</h1> <h2>不靠谱的承诺</h2> <h3>不靠谱的承诺</h3> <p>说好一起到白头，你却偷偷漏了油</p> <p>明月几时有，把酒问青天</p> </div> <!--水平分割线 --> <hr> <!-- 文本修饰 --> <div> <!-- strong 文本加粗 --> <p>说好一起到<strong style="background:red;color:#fff">白头</strong>，你却偷偷漏了油</p> <!-- em斜体 --> <p>明月<em style="color:slateblue">几时有</em>，把酒问青天</p> </div> <hr> <!-- 列表、将一组有共同特性的内容归纳到一起 --> <div> <h3>购物清单</h3> <!-- ul无序列表 --> <ul> <li>1.暖手宝一个，30元，被窝太冷</li> <li>2.笔记本一台，5000，学php编程</li> <li>3.充气娃娃一个，2000，孤枕难眠</li> </ul> <!-- ol有序列表 --> <ol> <li>暖手宝一个，30元，被窝太冷</li> <li>笔记本一台，5000，学php编程</li> <li>充气娃娃一个，2000，孤枕难眠</li> </ol> <!-- dl自定义类表，常用于用来做友情链接 --> <dl> <dt>猪哥</dt> <dd>小猪cms开发者，php中文网创始人</dd> <dt>朱老师</dt> <dd>php中文网讲师，超级厉害！</dd> </dl> </div> <hr> <!-- 表格 --> <table border="1" cellpadding="5" cellspacing="0" width="500" > <caption>购物车</caption> <!-- 表头 --> <thead bgcolor="lightblue"> <tr> <th>序号</th> <th>名称</th> <th>数量</th> <th>用途</th> </tr> </thead> <tbody> <tr align="center"> <td>1</td> <td>暖手宝</td> <td>1</td> <td>被窝太冷</td> </tr> <tr align="center"> <td>2</td> <td>笔记本</td> <td>1</td> <td>学php编程</td> </tr> <tr align="center"> <td>3</td> <td>充气娃娃</td> <td>1</td> <td>孤枕难眠</td> </tr> </tbody> </table> <hr> <!-- 表单、交互工具，向服务器提交数据 --> <!-- 表单常用标签：from、label,input,select,textarea,button --> <h2>用户注册</h2> <form action="" method="GET"> <div> <label for="username">用户名</label> <input type="text" id="username" value="" placeholder="必须英文字符"> </div> <div> <label for="password">密码</label> <input type="password" id="password" placeholder="密码必须包含字母"> <!-- 简写 <label>密码<input type="password" name="password"></label>--> </div> <div><label>确认密码<input type="password" id="password" placeholder="密码必须包含字母"></label> </div> <div> <!-- name必须一致,返回一个值，默认是checked --> <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> <!-- 复选框 --> <input type="checkbox" name="hobby[]" id="game" checked><label for="game">打游戏</label> <input type="checkbox" name="hobby[]" id="smoke"><label for="smoke">抽烟</label> <input type="checkbox" name="hobby[]" id="programme"><label for="programme">编程</label> </div> <div> <!-- 提交的是value值 --> <label for="edu">你的学历</label> <select name="" id="edu" value="3"> <option value="1">幼儿园</option> <option value="2" selected>小学毕业</option> <option value="3">博士后</option> </select> </div> <div> <label for="common">留言内容</label> <textarea name="common" id="commn" cols="30" rows="10" placeholder="100字以内"></textarea> </div> <input type="submit" value="提交"> <input type="reset" value="重置"> <button type="button">提交</button> </form> <!-- 图片和多媒体 --> <img src="http://www.php.cn/static/images/index_yunv.jpg" alt="图片" width="150"> <hr> <video src="static/images/1.mp4" controls="controls"></video> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
总结：
1、dl自定义类表，常用于用来做友情链接。
2、radio单选控件标签中，name值必须一致。
3、select标签中，传的是value的值
4、表格中，表头thead、tbody要先写，分清楚。
5、复选框，name值要用数组表示。
三、常用选择器与优先级
实例
<!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>
<!-- 引用外部样式 -->
<link rel="stylesheet" href="style.css">
<style>
/* 样式规则 */
h3{
background-color: brown;
color: #fff
}
.bg-blue { background-color: darkblue;}
#bg-yellow {background-color: darkorange}
</style>
<!-- h3 选择器-->
<!--background-color 属性名称， brown属性值；合在一起叫样式声明 -->
</head>
<body>
<h3 style="background-color: crimson;color:#000">样式规则= 选择器+声明</h3>
<h3>样式规则= 选择器+声明</h3>
<h3 class="bg-blue" id="bg-yellow" >样式规则= 选择器+声明</h3>
<h3 class="bg-blue" id="" >样式规则= 选择器+声明</h3>
<h3 class="bg-blue" id="bg-yellow" style="background-color: crimson;color:#000">样式规则= 选择器+声明</h3>
<!-- 内链样式style大于id大于class -->
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结：
1、css样式表引用：内联、内部、外部三种方法
2、内链样式style大于id选择大于class类选择器
3、样式规则= 选择器+声明，样式书写样规范，一行一个样式声明
四、盒模型padding
实例
<!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: lightblue;
/* 上右下左 ,内边距会撑开盒子*/
padding-top: 20px;
padding-right: 30px;
padding-bottom: 40px;
padding-left: 50px;
/* padding: 20px 30px 40px 50px;（简写） */
/* padding: 20px 30px 40px 左右相等 上下不相等(中间为左右) */
/* padding: 40px 30px 上下相等 左右相等 */
/* 出现在第二个位置上一定是左右 */
/* 上边框 */
border-top-width: 10px;
border-top-style: solid;
border-top-color: red;
/* 右边框 */
border-right-width: 10px;
border-right-style: dashed;
border-right-color: green;
/* 下边框 */
border-bottom-width: 10px;
border-bottom-style: dotted;
border-bottom-color: blue;
/* 左边框 */
border-left-width: 10px;
border-left-style: double;
border-left-color: black;
/* 简写 */
border-top: 10px solid red;
border-right: 10px dashed green;
border-bottom: 10px dotted blue;
border-left: 10px double black;
}
.box2{
height:inherit ;
background-color: wheat;
}
</style>
</head>
<body>
<!-- 盒子都是块状元素，独占一行 -->
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结：
1、盒子都是块状元素，独占一行
2、内边距会撑开盒子
3、padding:top,right,bottom,left 四个边距，书写格式是上右下左。
4、padding 可以简写，padding: 40px 30px，出现在第二个位置上一定是左右边距。
5、边框，boder:10px solid red; 四个边框一样的书写样式。
6、solid 是实现，dashed是虚线 dotted是点 double是双线。