实例
下面这段代码展示了HTML的所有常用标签
<!--此元素可告知浏览器其自身是一个 HTML 文档。--> <!DOCTYPE html> <!--<html> 与 </html> 标签限定了文档的开始点和结束点.--> <html lang="en"> <!--文档的头部由 <head> 标签定义--> <head> <!--定义编码方式--> <meta charset="UTF-8"> <title>HTML标签</title> </head> <!--主体由 <body> 标签定义。--> <body> <div> <!--<h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。--> <h1>这是标题 1</h1> <h2>这是标题 2</h2> <h3>这是标题 3</h3> <h4>这是标题 4</h4> <h5>这是标题 5</h5> <h6>这是标题 6</h6> <!--<p> 标签定义段落。--> <p>这是一个段落</p> </div> <hr> <!--水平分隔线--> <div> <!--<b> <strong> 标签规定粗体文本。--> <p>这是普通文本 - <b>这是粗体文本</b></p> <!--<i> <em> 标签显示斜体文本效果。--> <p>这是普通文本 - <i>这是斜体文本</i></p> <!--<big> 标签呈现大号字体效果。--> <p>这是普通文本 - <big>这是大号字体文本</big></p> <!--<small> 标签呈现小号字体效果。--> <p>这是普通文本 - <small>这是小号字体文本</small></p> </div> <hr> <div> <!--<ul> 标签定义无序列表。--> <ul> <!--<li> 标签定义列表项目。--> <!--<li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中。--> <li>可口可乐</li> <li>百事可乐</li> <li>雪碧</li> </ul> <!--<ol> 标签定义有序列表。--> <ol> <li>可口可乐</li> <li>百事可乐</li> <li>雪碧</li> </ol> </div> <hr> <!--<table> 标签定义 HTML 表格。--> <!--简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。--> <!--tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。--> <!--更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。--> <!--cellpadding 规定单元边沿与其内容之间的空白。--> <!--cellspacing 规定单元格之间的空白。--> <!--border 规定表格边框的宽度。--> <table border="1"> <caption> 两行三列：</caption> <!--表格标题--> <!--定义表格内的表头单元格。--> <!--HTML 表单中有两种类型的单元格：--> <!--表头单元格 - 包含表头信息（由 th 元素创建）--> <!--标准单元格 - 包含数据（由 td 元素创建）--> <!--th 元素内部的文本通常会呈现为居中的粗体文本，而 td 元素内的文本通常是左对齐的普通文本。--> <tr> <th>100</th> <th>200</th> <th>300</th> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> <hr> <div> <!--<form> 标签用于为用户输入创建 HTML 表单。--> <!--表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。--> <!--表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。--> <!--表单用于向服务器传输数据。--> <form action="login.php" method="post"> <!--action 是将数据提交的地址 method是提交的方式--> <!--<input> type类型：button checkbox file hidden image password radio reset submit text--> <span>用户名：</span> <input name="" type="text" placeholder="请输入用户名"> <span>密码：</span> <input name="" type="password" placeholder="请输入密码"> <input type="submit" value="进入"> <!--多选框--> <input type="checkbox" name="favorite[]" value="1" />前端 <input type="checkbox" name="favorite[]" value="2" />后端 <input type="checkbox" name="favorite[]" value="3" />美工 <!--上传文件--> <input type="file"> <!--单选框--> <input type="radio" name="sex[]" value="1"> 男 <input type="radio" name="sex[]" value="2"> 女 <!--重置--> <input type="reset"> <!--select 元素可创建单选或多选菜单。--> <!--<select&> 元素中的 <option> 标签用于定义列表中的可用选项。--> <select> <option value="1">一月</option> <option value="2">二月</option> <option value="3">三月</option> <option value="4">四月</option> </select> <!--<textarea> 标签定义多行的文本输入控件。--> <!--文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。--> <!--可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。--> <textarea rows="1" cols="70"> 山有木兮木有枝，心悦君兮君不知。 ---佚名《越人歌》 </textarea> <!--<button> 标签定义一个按钮。--> <!--在 button 元素内部，可以放置比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。--> <!--<button> 控件 与 <input type="button"> 相比，提供了更为强大的功能和更丰富的内容。--> <!--<button> 与 </button> 标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。--> <!--例如，我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。--> <button type="button">来点我</button> </form> </div> <hr> <div> <!--img 元素向网页中插入一幅图像。--> <img src="static/images/1.jpg" alt="血小板" width="300px"> <!--<video> 标签定义视频，比如电影片段或其他视频。--> <video src="static/images/月光光心慌慌.mp4" controls="controls"></video> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
下面这段代码展示了css常用选择器及 每个选择器优先级之间的比较
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css常用选择器与优先级</title>
<!--外联样式-->
<link rel="stylesheet" href="static/css/style02.css">
<!--内联样式-->
<style>
/*标签选择器*/
p{
/*设置背景色*/
background-color: lightcyan;
/*设置字体颜色*/
color: coral;
/*设置字体大小*/
font-size: 18px;
}
/*class选择器*/
.bg-green{
background-color: lightgreen;
color: #ffffff;
font-size: 18px;
}
/*id选择器*/
#bg-yellow{
background-color: lightyellow;
color: red;
font-size: 18px;
}
/*行内样式 > 内联样式 > 外联样式*/
</style>
</head>
<body>
<p>山有木兮木有枝，心悦君兮君不知。——佚名《越人歌》</p>
<p class="bg-green">人生若只如初见，何事秋风悲画扇。——纳兰性德《木兰词·拟古决绝词柬友》</p>
<p class="bg-green" id="bg-yellow">十年生死两茫茫，不思量，自难忘。——苏轼《江城子·乙卯正月二十日夜记梦》</p>
<!--选择器优先级 ： 标签 < class < id-->
<!--优先级高于上面三个的是行内样式-->
<p class="bg-green" id="bg-yellow" style="background-color: lightcoral;color: white">曾经沧海难为水，除却巫山不是云。——元稹《离思五首·其四》</p>
<!--优先级最高的是JS-->
<p id="bg-coral">玲珑骰子安红豆，入骨相思知不知。——温庭筠《南歌子词二首 / 新添声杨柳枝词》</p>
<script>
document.getElementById('bg-coral').style.backgroundColor = 'coral';
document.getElementById('bg-coral').style.color = 'white';
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
下面这段代码展示了HTML的盒模型，盒模型是布局的基础，可设置css来改变样式
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<link rel="stylesheet" href="static/css/style03.css">
<style>
.box1{
width: 600px;
height: 500px;
background-color: antiquewhite;
/*设置padding 简写方法*/
/*四个数字分别代表 上 右 下 左*/
padding: 10px 20px 30px 40px;
/* 边框与内边距相比, 不是透明的是可见的,除了宽度,还可设置线条样式和颜色 */
/* 上边框 */
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;
}
.box2{
/*继承父元素的高度*/
height: inherit;
background-color: coral;
/*三个数字分别代表 上下 左右 */
padding: 10px 20px 40px;
/* 以上样式与可以简写 */
border-top: 10px solid red;
border-right: 10px dashed green;
border-bottom: 10px dotted blue;
border-left: 10px double black;
}
.box3{
height: inherit;
background-color: beige;
/*两个数字分别代表 上 左右 下*/
padding: 30px 20px;
/* 如何每个方向的边框宽度,样式与颜色是一样的,还可以进一步简写 */
border: 10px solid red;
}
</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 class="box3"></div>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
