- html : html文档的根标签
- head:头标签。用于指定html文档的一些属性。引入外部的资源
- title:标题标签。
- body :体标签
文本标签
-
注释: <!--注释内容--> -
<h1> ~ <h6>:标题标签* h1~h6:字体大小逐渐递减 -
<p>:段落标签 -
<br>:换行标签 -
<hr>:展示一条水平线 属性∶ color :颜色 width :宽度 size :高度 align ∶对齐方式 center:居中 left:左对齐 right:右对齐 -
<b>:字体加粗 -
<i>:字体斜体 -
<font>:字体标签 属性： color:颜色 size:大小 face:字体 -
<center>:文本居中 -
属性定义： color: 1.英文单词：red,green,blue 2.rgb(值1，值2，值3）：值的范围：0~255 如 rgb(0,0,255) 3.#值1值2值3：值的范围：00~FF 如：#FF00FF width: 1.数值：width='20'，数值的单位，默认是px（像素） 2.数值%：占比相对于父元素的比例 -
表示空格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本标签</title>
</head>
<body>
<!--注释-->
白日依山尽，<!--<br/>--><br>
黄河入海流。<br>
<!--标题标签 h1~h6 -->
快到圣诞了，圣诞快乐<br>
<h1>快到圣诞了，圣诞快乐</h1>
<h2>快到圣诞了，圣诞快乐</h2>
<h3>快到圣诞了，圣诞快乐</h3>
<h4>快到圣诞了，圣诞快乐</h4>
<h5>快到圣诞了，圣诞快乐</h5>
<h6>快到圣诞了，圣诞快乐</h6>
<!-- 段落标签 p-->
<p>
1 今天下了一场雪，雪很大 今天下了一场雪，雪很大 今天下了一场雪，雪很大 今天下了一场雪，雪很大
</p>
<p>
2 今天下了一场雪，雪很大 今天下了一场雪，雪很大 今天下了一场雪，雪很大 今天下了一场雪，雪很大 今天下了一场雪，雪很大
</p>
<p>
3 今天下了一场雪，雪很大 今天下了一场雪，雪很大 今天下了一场雪，雪很大 今天下了一场雪，雪很大 今天下了一场雪，雪很大
</p>
<!-- hr 显示一条水平线-->
<hr color="blue" width="200" size="2" align="left"/>
<hr>
<!-- 加粗 b-->
白日依山尽<br>
<b>白日依山尽</b>
<!-- 斜体 i-->
白日依山尽<br>
<i>白日依山尽</i>
<hr>
<!-- 字体标签 font-->
<font color="red" size="5" face="楷体">白日依山尽</font>
<br>
<font color="#3626F1" size="5" face="楷体">白日依山尽</font><br>
<hr color="blue" width="50%" size="2" align="left"/> <!--50% 是想对于父标签的占比-->
<center>
<font color="red" size="5" face="楷体">白日依山尽</font>
</center>
<br>
</body>
</html>
案例：嫦娥5号
效果图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>嫦娥5号</title>
</head>
<body>
<h1>
嫦娥五号
</h1>
<hr color="#ffd700">
<p>
<font color="#FF0000">嫦娥五号（Chang'e 5）</font>由中国空间技术研究院研制，是<b><i>中国探月工程</i></b>三期发射的月球探测器，也将是中国首个实施无人月面取样返回的月球探测器，为中国探月工程的收官之战。
</p>
<p>
2020年11月24日，中国在中国文昌航天发射场，用长征五号遥五运载火箭成功发射探月工程嫦娥五号探测器，顺利将探测器送入预定轨道。11月24日22时06分，嫦娥五号顺利完成第一次轨道修正。
11月25日，嫦娥五号完成第二次轨道修正。11月28日，嫦娥五号顺利进入环月轨道飞行。11月29日，嫦娥五号从椭圆环月轨道变为近圆形环月轨道。11月30日，嫦娥五号合体顺利分离。
12月1日，嫦娥五号成功在月球正面预选着陆区着陆。12月2日4时，嫦娥五号着陆器和上升器组合体完成了月球钻取采样及封装。12月2日22时，嫦娥五号完成月面自动采样封装。12月3日，
嫦娥五号上升器将携带样品的上升器送入到预定环月轨道。12月6日5时，嫦娥五号上升器成功与轨道器和返回器组合体交会对接，并于6时将样12分品容器安全转移至返回器中。12月6日12时35分，
嫦娥五号轨道器和返回器组合体与上升器成功分离，进入环月等待阶段，准备择机返回地球。12月8日，嫦娥五号上升器受控离轨，7时30分左右降落在预定落点。12月12日，嫦娥五号轨道器和返回器
组合体实施第一次月地转移入射。
</p>
<p>
嫦娥五号任务是“探月工程”的第六次任务，也是中国航天迄今为止最复杂、难度最大的任务之一，将实现中国首次月球无人采样返回，助力深化月球成因和演化历史等科学研究。
</p>
<hr color="#ffd700">
<font color="gray" size="2">
<center>
嫦娥五号 发射地点：中国文昌航天发射场
<br>
登陆地点： 吕姆克山脉
</center>
</font>
</body>
</html>
图片标签
-
<img>:展示图片 属性： src:指定图片的位置 路径： 相对路径 以*开头的路径 ./：代表当前目录 ../：代表上一级目录
列表标签
-
有序列表 ol li -
无序列表 ul li
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表标签</title>
</head>
<body>
<!-- 有序列表 ol-->
早上起床干的事情
<ol type="I" start="3">
<li>
闹铃响起
</li>
<li>
睁眼
</li>
<li>
看时间
</li>
<li>
继续睡觉
</li>
</ol>
<!-- 无序列表 ul-->
<ul type="circle">
<li>
闹铃响起
</li>
<li>
睁眼
</li>
<li>
看时间
</li>
<li>
继续睡觉
</li>
</ul>
</body>
</html>
链接标签
-
a：定义一个超链接 属性： href：指定访问资源的URL（统一资源定位符） target：指定打开资源的方式 _self：默认值，在当前页面打开 _blank：在空白页面打开
块标签
-
div：每一个div栈满一整行。块级标签 -
span：文本信息在一行展示，行内标签 内联标签
语义化标签：
html5中为了提高程序的可读性，提供的标签()并没有任何的样式
-
<header> -
<footer>
表格标签
-
table：定义表格 width：宽度 border：边框 cellpadding：定义内容和单元格之间的距离 cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条 bgcolor：背景色 align：对齐方式 -
tr：定义行 bgcolor：背景色 align：对齐方式 -
td：定义单元格 colspan：合并列 rowspan：合并行 -
th：定义表头单元格 -
<caption>：表格标题 -
<thead>：表示表格的头部分 -
<tbody>：表示表格的体部分 -
<tfoot>：表示表格的脚部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标签</title>
</head>
<body>
<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#f0ffff" align="center">
<tr>
<!-- <td>编号</td>-->
<!-- <td>姓名</td>-->
<!-- <td>成绩</td>-->
<th>编号</th>
<th>姓名</th>
<th>成绩</th>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>92</td>
</tr>
<tr>
<td>2</td>
<td>王五</td>
<td>88</td>
</tr>
</table>
<hr>
<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#f0ffff" align="center">
<thead>
<caption>学生信息表</caption>
<tr>
<!-- <td>编号</td>-->
<!-- <td>姓名</td>-->
<!-- <td>成绩</td>-->
<th>编号</th>
<th>姓名</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr bgcolor="#7fffd4" align="center">
<td>1</td>
<td>张三</td>
<td>92</td>
</tr>
<tr>
<td>2</td>
<td>王五</td>
<td>88</td>
</tr>
</tbody>
<tr>
<td>3</td>
<td>赵易</td>
<td>90</td>
</tr>
<tfoot>
</tfoot>
</table>
<hr>
<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#f0ffff" align="center">
<tr>
<th rowspan="2">编号</th>
<th>姓名</th>
<th>成绩</th>
</tr>
<tr>
<td>张三</td>
<td>92</td>
</tr>
<tr>
<td>2</td>
<td colspan="2">王五</td>
</tr>
</table>
</body>
</html>
表单标签
概念：用于采集用户输入的数据的，用于和服务器进行交互。
使用的标签：form
-
form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围 属性： action:指定提交数据库的URL method:指定提交的方式 get: 1.请求参数会在地址栏中显示，会封装在请求行中。 2.请求参数的长度是有限制的。 3.不太安全 post: 1.请求参数不会在地址栏中显示，会封装在请求体中。 2.请求参数的长度没有限制。 3.较为安全 ==注==表单项中的数据要想被提交：必须指定其name属性 -
表单项标签： input：可以通过type属性值，改变元素展示的样式 placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息 type属性： text：文本输入框，默认值 password:密码输入框 radio：单选框 注意： 1.要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。 2.一般会给每一个单选框提供value属性，指定其被选中后提交的值。 3.checked属性，可以指定默认值 checkbox：复选框 注意： 1.一般会给每一个复选框提供value属性，指定其被选中后提交的值。 2.checked属性，可以指定默认值 file：文件选择框 hidden：隐藏域，用于提交一些信息 按钮： submit：提交按钮，可以提交表单 botton：普通按钮 image：图片提交按钮 src属性指定图片的路径 label：指定输入项的文字描述信息 注意： 1.label的for属性一般会和input的id属性值对应。如果对应了，则点击label区域，会让inout输入框获取焦点。 select：下拉列表 子元素：option，指定列表项 textarea：文本域 cols：指定列数，每一行有多少个字符 rows：默认多少行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单项标签</title>
</head>
<body>
<form action="#" method="get">
<label for="username1">用户名</label>：<input name="username" placeholder="请输入用户名" id="username1"><br>
密码：<input type="password" name="password" placeholder="请输入密码"><br>
性别：<input type="radio" name="gender" value="male" checked="checked">男
<input type="radio" name="gender" value="female">女<br>
爱好：<input type="checkbox" name="hobby" value="game">游戏
<input type="checkbox" name="hobby" value="java" checked="checked">java<br>
图片：<input type="file" name="file"><br>
隐藏域：<input type="hidden" name="id" value="aaa"><br>
取色器：<input type="color" name="color"><br>
生日：<input type="date" name="birthday"><br>
生日：<input type="datetime-local" name="birthday"><br>
邮箱：<input type="email" name="email"> <br>
年龄：<input type="number" name="age"><br>
省份：<select name="province" >
<option value="">---请选择---</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3" selected>陕西</option>
</select><br>
自我描述：
<textarea cols="20" rows="5" name="dsc"></textarea><br>
<input type="submit" value="提交">
<input type="button" value="普通按钮"><br>
<input type="image" src="picture/2.jpg">
</form>
</body>
</html>
案例：注册页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
</head>
<body>
<!--定义表单-->
<form action="#" method="get">
<table border="1" align="center" width="500">
<tr>
<td><label for="username">用户名</label></td>
<td><input type="text" name="username" id="username" placeholder="请输入账号"></td>
</tr>
<tr>
<td><label for="password">密码</label></td>
<td><input type="password" name="password" id="password" placeholder="请输入密码"></td>
</tr>
<tr>
<td><label for="email">Email</label></td>
<td><input type="text" name="email" id="email" placeholder="请输入Email"></td>
</tr>
<tr>
<td><label for="name">姓名</label></td>
<td><input type="text" name="name" id="name" placeholder="请输入真实姓名"></td>
</tr>
<tr>
<td><label for="tel">手机号</label></td>
<td><input type="text" name="tel" id="tel" placeholder="请输入您的手机号"></td>
</tr>
<tr>
<td>性别</td>
<td><input type="radio" name="gender" id="gender">男
<input type="radio" name="name" value="female">女
</td>
</tr>
<tr>
<td><label for="birthday">出生日期</label></td>
<td><input type="date" name="birthday" id="birthday"></td>
</tr>
<tr>
<td><label for="checkcode">验证码</label></td>
<td><input type="text" name="checkcode" id="checkcode">
<img src="picture/5.jpg">
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="注册"></td>
</tr>
</table>
</form>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
