HTML语言叫做超文本标记语言， html是与浏览器交流的语言，html文档必须遵守一定的结构,才可以用于编写与交流，这种文档结构,就是html文档的编写的规范。
下面介绍HTML中的常用标签
<html>--html是根标签,有且仅有一个,代表整个文档。
<head>--head是头标签,它的内容供浏览器读取,除title外, 其它内容用户并不关心。
<title>-- title设置页面标题文本内容,显示在游览器窗口的标签页。
双标签：
可以能标签设置属性进行描述,类似于自我介绍,必须以名值对的形式写到起始标签中,值必须用双引号包装。
例如：<h1><h3>
单标签：
它的内容通常是引用的外部资源,例如图片,文件等。
例如：<img><link>
html文档中常用的标签
1. 标题与段落（div ，h1~6, p）
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标题与段落</title> </head> <body> <!-- <div>是一个块级标签,所谓块级是指它默认独占一行,并且支持宽高,后面还会细说 --> <div style="background-color:blueviolet;"> php </div> <div style="background-color:brown;"> 第二行div </div> <div> <h1>大标题</h1> <h2>大标题</h2> <h3>大标题</h3> <!-- 标题标签共有6级: h1 ~ h6, 大多只用到h1~h3 字号和数字大小成反比，数字越大字体越小--> <p>跟老师一起学习HTML</p> <!-- p表示段落，可以有多个段落 --> <p>跟老师一起学习php</p> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
2. 文本修饰（strong,em等）
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本修饰</title> </head> <body> <div> <p>说好一起到<strong style="background-color:crimson;color: white;">白头</strong>, 你却偷偷焗了油</p> <!--strong 标签代表加粗文本 --> <!-- em 标签斜体文字 --> <p>说好一起当<em style="background-color:yellow;color:red;">学渣</em>,你却偷偷当学霸</p> </div> <body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
3. 列表（ul ol dl）
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表</title> </head> <body> <!-- 3. 列表 将一组有共同特征的内容归纳在一起--> <div> <h3>购物清单</h3> <ul> <!-- ul是无序列表 每个列表项之间无特定顺序,默认前面有一个小圆点,可嵌套--> <li>1.笔记本电脑一台，5000，学习php</li> <li>2.哑铃一对，100，锻炼身体</li> <li>3.ps4一台，2000，休闲娱乐</li> </ul> <ol> <!-- ol有序列表,列表项前自动添加数值序号(从1开始) --> <li>笔记本电脑一台，5000，学习php</li> <li>哑铃一对，100，锻炼身体</li> <li>ps4一台，2000，休闲娱乐</li> </ol> <dl> <!-- dl定义列表 类似于名称解释,常用用来做友情链接 --> <dt>可乐</dt> <!-- dt代表一个标题 --> <dd>肥宅快乐水</dd> <!-- dd名词解释 --> <dt>朱老师</dt> <dd>php中网讲师</dd> </dl> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
4. 表格（table,caption, thead,tbody,tfoot,tr,th,td）
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格</title> </head> <body> <!-- 4. 表格 --> <!-- 表格是最重要的格式化数据的工具 其实上面的列表内容,非常适合用表格来展示 经过分析, 上面列表加上表头需要一个四行四列的表格进行展示 完整表格,涉及标签: table,caption, thead,tbody,tfoot,tr,th,td 表格至少涉及三个标签: table(表格), tr(行), th/td(单元格) --> <table border="1" cellpadding='4' cellspacing='0' width='500'> <!-- border 表格双横线 cellpadding 与边线距离 cellspacing双横线间距 --> <caption>购物车</caption> <!-- caption 定义表格标题 --> <!-- 表头 --> <thead> <tr bgcolor='lightblue'> <!-- bgcolor 背景色 --> <th>序号</th> <th>名称</th> <th>价格</th> <th>用途</th> </tr> </thead> <tbody> <tr align="center"> <!-- aling="center" 居中 --> <td>1</td> <td>笔记本</td> <td>5000</td> <td>学习php</td> </tr> <tr align="center"> <td>2</td> <td>哑铃</td> <td>100</td> <td>锻炼身体</td> </tr> <tr align="center"> <td>3</td> <td>ps4</td> <td>2000</td> <td>休闲娱乐</td> </tr> </tbody> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
5. 表单（form,label,input,select,textarea,button）
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!-- 5. 表单 --> <!-- (1) 表单是最重要的交互工具,用户可以通过表单,将数据提交到后端服务器上进行处理 (2) 表单涉及:form,label,input,select,textarea,button标签 (3) 表单form标签中的元素,又称为表单控件,每个控件除了部分公共属性外,还有一些特殊属性 --> <!-- 下面以用户注册表单为例进行演示 --> <h2>用户注册</h2> <form action="" method="POST"> <!-- action 提交数据给谁处理 method 用什么方式提交--> <div> <!-- (1)控件的提示文本应该放在独立的label标签中,label的for属性与控件的id绑定 (2)一旦绑定成功, 点击标签文本,焦点会自动落到对应的控件上 --> <label for="username">用户名：</label> <input type="text" id="username" name="username" value="" placeholder="请输入用户名"> <!-- value默认值 placeholder提示 --> <!-- name和value属性应该成对出现,将用户数据以名值对的形式提交到服务器上指定脚本处理 --> <!-- placeholder: 用户于设置文本框的提示文本 --> </div> <div> <label for="password">密码：</label> <!-- password类型,输入的内容以*号占位符代替 --> <input type="password" id="password" name="password" placeholder="请输入密码" size="25"> </div> <div> <label> <!-- 再介绍一种语法,可以少写二个属性for,id,将控件元素写在label标签内 --> 确认密码：<input type="password" name="password1" id="password1" placeholder="请重复输入密码"> </label> </div> <div> <input type="radio" name="gender" value="male" id="male" checked><label for="male">男</label> <input type="radio" name="gender" value="female" id="female"><label for="female">女</label> <!-- 单选按钮name必须一致 --> <!-- radip单选按钮,每一组的name属性值必须相同,才会只返回唯一值,并自动设置它的checked属性 --> <!-- 可以事先用checked属性设置默认选中值, 标签文本与value值不必相同,value才是提交到后端的数据 --> <!-- checked默认值，防止用户提交无效数据 --> </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> <input type="checkbox" name="hobby[]" value="swim" id="swim"><label for="swim">游泳</label> <input type="checkbox" name="hobby[]" value="php" id="php" checked><label for="game">学习php</label> </div> <div> <!-- 下拉列表,name固定,但value是动态的,select中的value根据内部的option选中状态变化 --> <label for="edu">您的学历</label> <select name="edu" id="edu" value="3"> <option value="1">小学</option> <option value="2">初中</option> <option value="3">高中</option> <option value="4" selected>大学</option> <option value="5">博士后</option> </select> </div> <div> <!-- 文本域,其实就是多行文本框 --> <label for="common">留言：</label> <textarea name="common" id="common" cols="30" rows="10" placeholder="文本不超过100字"></textarea> </div> <!-- 按钮 --> <input type="submit" value="注册"> <!-- 重置功能极少用到,推荐不要再使用,而是通过其它方式 --> <input type="reset" value="重置"> <!-- 推荐使用语义化的button标签 --> <!-- button默认类型为提交submit,通常是修改为button类型,最后通过ajax异步提交表单 --> <button type="button">提交</button> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
6. 图片与媒体（img video）
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片与媒体</title> </head> <body> <div> <!-- 图片标签是单标签,引入的是外部的资源 src="图片地址", 支持本地和网络url地址 alt="提示文本", 当图片不能显示或被用户禁用时显示它,seo优化也会用到它 --> <img src="static/images/zly.jpg" alt="颖***" width="200"> <hr> <!-- 播放视频:controls显示播放控件, 支持宽度设置 --> <video src="static/images/demo.mp4" controls="controls" width="300"></video> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
CSS：CSS是用来修饰html中的元素的
基本语法: 选择器 {样式声明}
1. 选择器: 最基本的有标签,类class, id
2. 样式声明: 包括属性和值二部分
3. 样式规则 = 选择器 + 样式声明
CSS属性优先级
标签选择器 < class类选择器 < ID选择器 <行内样式
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用选择器的优先级（selector）</title>
<!-- 如果将css写到当前html文档style标签中则只适应当前文档 -->
<style>
/* 标签选择器 */
h3 {
/* 设置背景色 */
background-color: aqua;
/* 字体颜色 */
color: brown;
}
/* 类class选择器 */
.bg-blue {
background-color: lightblue;
}
/* id选择器 */
#bg-yellow {
background-color: yellow;
}
</style>
</head>
<body>
<h3>样式规则=选择器+申明</h3>
<h3 class="bg-blue">样式规则=选择器+申明</h3>
<h3 class="bg-blue" id="bg-yellow">样式规则=选择器+申明</h3>
<h3 class="bg-blue" id="bg-yellow" style="background-color:lime;">样式规则=选择器+申明</h3>
<!-- 选择器层级上：标签<class<id -->
<script>
// 用js代码将id为bg-yellow的元素的背景色设置为浅灰色
document.getElementById('bg-yellow').style.backgroundColor = 'lightgrey';
</script>
<!--
总结:
1.常用的选择器: 标签, class, id,还有一个*,选择所有元素,大家课后可以试验一下
2.这三个常用选择器的优先级是: 标签 < 类class < id
3. style属性和js脚本不是选择器, 不参数排名
-->
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
盒子模型
1. 盒模型是布局的基础,页面上的一切可见元素皆可看做盒子
2. 盒子默认都是块级元素: 独占一行,支持宽度设置
(根据盒子模型示意图分析)
3. 盒子模型分为三个层级:
1. 内容级: 宽高和背景三个属性
(1): width
(2): height
(3): background-color (默认透明)
2. 元素级(可视范围)
(1): 包括内容级(width + height + background)
(2): 内边距: padding
(3): 边框: border
3. 位置级:margin, 决定当前盒子与其它盒子之间的位置与关系
实例
.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;
/* 如果左右相等30,而上下不相等20,40,可以这样简写 */
padding: 20px 30px 40px;
/* 如果上下也相等40 */
padding: 40px 30px;
/* 第二个总表示左右内边距 */
/* 如果四个方向全部相等,例如20 */
padding: 20px;
/* 边框与内边距相比, 不是透明的是可见的,除了宽度,还可设置线条样式和颜色 */
/* 上边框 */
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;
/* 如何每个方向的边框宽度,样式与颜色是一样的,还可以进一步简写 */
border: 10px solid red;
}
.box2 {
height: inherit;
background-color: wheat;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
今天学习了HTML的基本标签以及CSS选择器的优先级和盒子模型。