1. 标题标签
<html>
<head>
<meta charset="utf-8">
<title>标题标签title>
head>
<body>
<h1 align="leff">一级标题h1>
<h2 align="center">二级标题h2>
<h3 align="right">
<font color="red">三级标题font>
h3>
body>
html>
2. 文本的标签
<html>
<head>
<meta charset="utf-8">
<title>文本标签title>
head>
<body>
<b>加粗文字b>
<br>
<i>斜体文字i>
<br>
<s>带有删除线的文字s>
<br>
<u>带有下划线的文字u>
<br>
<h1>一行标题h1>
<hr color="aqua" width="80%" align="left" size="1">
body>
html>
3. 文本标签
<html>
<head>
<meta charset="utf-8">
<title>文本标签title>
head>
<body>
<font size="" color="">默认的文字显示font>
<kbd>用粗体等宽字体显示文字kbd>
<var>用较小的固定宽度显示字体var>
<dfn>用于名词解释，斜体显示dfn>
<em>强调文字em>
<address>模拟信封上的字体address>
<strong>加强文字strong>
<font size="" color="">默认的文字大小font>
<big>比默认字号大一号big>
<small>比默认字号小一号small>
<code>以等宽字体显示计算机程序代码
int a=100;
int b=200;
code>
<br>
<font size="7" color="blue">
CO<sub>2sub>
<br>
2<sup>3sup>
font>
<hr >
<b>长恨歌b>
<br>
作者：白居易
<br>
汉皇重色思倾国，御宇多年求不得。<br>
杨家有女初长成，养在深闺人未识。<br>
天生丽质难自弃，一朝选在君王侧。<br>
回眸一笑百媚生，六宫粉黛无颜色。<br>
<hr >
<pre>
长恨歌_百度汉语
作者：白居易
汉皇重色思倾国，御宇多年求不得。
杨家有女初长成，养在深闺人未识。
天生丽质难自弃，一朝选在君王侧。
回眸一笑百媚生，六宫粉黛无颜色。
春寒赐浴华清池，温泉水滑洗凝脂。
侍儿扶起娇无力，始是新承恩泽时。
云鬓花颜金步摇，芙蓉帐暖度春宵。
春宵苦短日高起，从此君王不早朝。
承欢侍宴无闲暇，春从春游夜专夜。
pre>
body>
html>
4. 背景标签
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body bgcolor="aquamarine" background="img/coder10.jpeg">
body>
html>
5. 图片标签
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<h1>插入图片h1>
<img src="img/2.jpg" width="200px" height="200px" border="2" alt="图片加载失败" title="美女">
<br>
<img src="img/10.jpg" >
<img src="http://www.westos.org/img/1.png" width="100px" height="200px" >
body>
html>
6. 列表标签
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<h1>Html学习大纲h1>
<ul type="square">
<li>Html 概念的介绍li>
<li>Html 概念的介绍li>
<li>Html 概念的介绍li>
<li>Html 概念的介绍li>
<li>Html 概念的介绍li>
<li>Html 概念的介绍li>
ul>
<h1>Html学习大纲2h1>
<ol type="1" start="1">
<li>Html 概念的介绍li>
<li>Html 概念的介绍li>
<li>Html 概念的介绍li>
<li>Html 概念的介绍li>
<li>Html 概念的介绍li>
<li>Html 概念的介绍li>
ol>
<dl>
<dt>什么是喜欢dt>
<dd>喜欢就是比爱少一点点dd>
<dt>什么是爱dt>
<dd>爱是比喜欢多一点点dd>
dl>
<h1>Html学习大纲h1>
<ul type="square">
<li>Html 概念的介绍
<ol type="1" start="1">
<li>Html 概念的介绍li>
<li>Html 概念的介绍li>
<li>Html 概念的介绍li>
<li>Html 概念的介绍li>
<li>Html 概念的介绍li>
<li>Html 概念的介绍li>
ol>
li>
<li>Html 概念的介绍
<ul>
<li>Html 概念的介绍li>
<li>Html 概念的介绍li>
<li>Html 概念的介绍li>
<li>Html 概念的介绍li>
<li>Html 概念的介绍li>
<li>Html 概念的介绍li>
ul>
li>
<li>Html 概念的介绍li>
<li>Html 概念的介绍li>
<li>Html 概念的介绍li>
<li>Html 概念的介绍li>
ul>
body>
html>
7. 段落标签
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<h1>xxxxxxxxxxxh1>
<hr >
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxp>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxp>
<img src="https://...." >
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxp>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxp>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxp>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxp>
body>
html>
8. 转义字符
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<h1>这是 <>一个标题文字h1>
<h1>¥h1>
<img src="img/zhuanyi.png" >
body>
html>
9. 超链接标签
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<a href="https://www.baidu.com">进入百度a>
<a href="https://www.163.com">进入网易a>
<a href="index.html" target="_blank">进入我们自己的首页a>
<a href="2.文本的标签.html" target="_self">进入我们自己网站的页面a>
<a href="#">空链接a>
body>
html>
10. 锚点标签
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<a name="top">a>
<h1>xxxxxxxxxh1>
<hr >
<p>
<a href="#dibu">跳到底部a>
p>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxp>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxp>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxp>
<img src="https://..." >
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxp>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxp>
<p align="left">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxp>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxp>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxp>
<hr >
<img src="https://..." >
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxp>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxp><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxp><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxp><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxp>
<img src="https://..." >
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxp>
<p align="left">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxp>
<a name="dibu">a>
<p>
<a href="#top">跳到顶部a>
p>
body>
html>
11. 表格标签
<html>
<head>
<meta charset="utf-8">
<title>表格标签title>
head>
<body>
<h1 align="center">学生信息表h1>
<table background="img/coder8.jpg8" bgcolor="antiquewhite" align="center" border="1" bordercolor="red" cellspacing="0" cellpadding="0" width="800px" height="400px">
<tr height="30px">
<th>序号th>
<th>姓名th>
<th>性别th>
<th width="400px">手机th>
tr>
<tr align="center" bgcolor="yellowgreen">
<td>1td>
<td>张三td>
<td>男td>
<td>13999996666td>
tr>
<tr align="center">
<td>1td>
<td>张三td>
<td>男td>
<td>13999996666td>
tr>
<tr align="center">
<td>1td>
<td>张三td>
<td>男td>
<td>13999996666td>
tr>
<tr align="center">
<td>1td>
<td>张三td>
<td bgcolor="blueviolet">男td>
<td>13999996666td>
tr>
<tr align="center">
<td>1td>
<td>张三td>
<td>男td>
<td>13999996666td>
tr>
<tr align="center">
<td>1td>
<td>张三td>
<td>男td>
<td align="left">13999996666td>
tr>
table>
body>
html>
12. 合并单元格
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<table align="center" border="1" bordercolor="red" cellspacing="0" width="50%" height="500px">
<tr>
<td colspan="2">Datatd>
<td>Datatd>
<td>Datatd>
<td>Datatd>
<td>Datatd>
tr>
<tr>
<td colspan="3">Datatd>
<td>Datatd>
<td>Datatd>
<td>Datatd>
tr>
<tr>
<td>Datatd>
<td>Datatd>
<td>Datatd>
<td>Datatd>
<td>Datatd>
<td>Datatd>
tr>
<tr>
<td rowspan="2">Datatd>
<td>Datatd>
<td>Datatd>
<td>Datatd>
<td>Datatd>
<td rowspan="2">Datatd>
tr>
<tr>
<td>Datatd>
<td>Datatd>
<td>Datatd>
<td>Datatd>
tr>
table>
body>
html>
13. 合并的单元格
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<table align="center" border="1" bordercolor="blue" cellspacing="0" width="500px" height="300px">
<tr>
<td>Datatd>
<td colspan="3">Datatd>
tr>
<tr>
<td>Datatd>
<td>Datatd>
<td>Datatd>
<td rowspan="2">Datatd>
tr>
<tr>
<td>Datatd>
<td colspan="2">Datatd>
tr>
table>
<hr>
<br>
<br>
<br>
<table align="center" border="1" bordercolor="red" cellspacing="0" cellpadding="0" width="500px" height="600px">
<tr>
<td rowspan="5" width="200px" height="500px">
<img height="500px" width="200px" src="img/u1096790207581763790fm11gp0.jpg" >
td>
<td width="300px">商品名称:手机td>
tr>
<tr>
<td>
<font color="blue">商品价格font>
td>
tr>
<tr>
<td>Datatd>
tr>
<tr>
<td>Datatd>
tr>
<tr>
<td>Datatd>
tr>
<tr height="100px">
<td colspan="2" align="right">
<button type="button">加入购物车button>
td>
tr>
table>
body>
html>
14.可以采用表格来布局但是现在不推荐
<html>
<head>
<meta charset="utf-8">
<title>title>
<style type="text/css">
body {
margin: 0;
}
style>
head>
<body>
<table border="0" cellspacing="0" width="100%" height="120px">
<tr>
<td width="200px">td>
<td width="80px">
<img src="img/logo.png">
td>
<td>
td>
<td width="600px">
<font size="5">西部开源欢迎你!font>
td>
<td width="50px"><img src="img/phone1.png" width="50px" height="50px">td>
<td>
<font size="5" color="">029-86699937 88262419font>
td>
<td width="200px">td>
tr>
table>
<table bgcolor="#3E89FC" border="0" cellspacing="0" width="100%" height="100px">
<tr>
<td>
<font size="4" color="white">
首页
课程中心
教育体系
新闻资讯
学习资料
Linux企业化font>
td>
tr>
table>
<table border="0" width="100%" height="650px">
<tr>
<td><img height="650px" src="img/banner4.jpg" width="100%">td>
tr>
table>
body>
html>
15. 表格嵌套
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<table align="center" border="1" cellspacing="0" bordercolor="red" width="500px" height="600px">
<tr height="100px">
<td>Datatd>
<td>Datatd>
<td>Datatd>
<td>Datatd>
<td>Datatd>
tr>
<tr height="400px">
<td width="100px">
<table height="100%" width="100%" border="0" cellspacing="" cellpadding="0">
<tr>
<td>1.Datatd>
tr>
<tr>
<td>2.Datatd>
tr>
<tr>
<td>3.Datatd>
tr>
<tr>
<td>4.Datatd>
tr>
<tr>
<td>5.Datatd>
tr>
<tr>
<td>6.Datatd>
tr>
<tr>
<td>7.Datatd>
tr>
table>
td>
<td>Datatd>
<td>Datatd>
<td>Datatd>
<td>Datatd>
tr>
<tr>
<td>Datatd>
<td>Datatd>
<td>Datatd>
<td>Datatd>
<td>Datatd>
tr>
<tr>
<td>Datatd>
<td>Datatd>
<td>Datatd>
<td>Datatd>
<td>Datatd>
tr>
<tr>
<td>Datatd>
<td>Datatd>
<td>Datatd>
<td>Datatd>
<td>Datatd>
tr>
<tr>
<td>Datatd>
<td>Datatd>
<td>Datatd>
<td>Datatd>
<td>Datatd>
tr>
<tr>
<td>Datatd>
<td>Datatd>
<td>Datatd>
<td>Datatd>
<td>Datatd>
tr>
table>
body>
html>
16. 表单标签
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<h1 align="center">注册用户h1>
<center>
<form action="#" method="get">
用户名：<input type="text" name="username" value="" placeholder="请输入用户名" required="required" maxlength="10" />
<br>
密码：<input type="password" name="password" value="" placeholder="请输入密码" required="required" maxlength="10" />
<br>
性别:<input type="radio" name="sex" value="1" checked="checked" />男 <input type="radio" name="sex" value="0" />女
<input id="yao" type="radio" name="sex" value="2" />
<label for="yao">妖label>
<br>
生日：<input type="date" value="" />
<br>
爱好:<input type="checkbox" name="hobby" value="lanqiu" checked="checked" /> 篮球
<input type="checkbox" name="hobby" value="zuqiu" checked="checked" /> 足球
<input type="checkbox" name="hobby" value="ppq" id="pp" />
<label for="pp">乒乓球label>
<br>
学历：<select name="xueli">
<option value="">--请选择你学历--option>
<option value="youeryuan">幼儿园option>
<option value="xiaoxue">小学option>
<option value="zhongxue">中学option>
<option value="daxue" selected="selected">大学option>
select>
<br>
个人描述：
<textarea rows="5" cols="30" name="desc">
请输入备注内容
textarea>
<br>
数量:<input type="number" name="count" id="" value="1" min="1" max="10" />
<br>
上传文件：<input type="file" name="photo" />
<br>
<input type="submit" value="注册" />
<input type="reset" value="重置" />
form>
center>
body>
html>
17. 框架标签
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<frameset rows="25%,*" border="1" bordercolor="red">
<frame src="top.html" noresize="noresize"/>
<frameset cols="25%,*">
<frame src="left.html" noresize="noresize"/>
<frame name="content" src="http://www.westos.org" noresize="noresize" scrolling="auto"/>
frameset>
frameset>
html>
18. 画中画标签
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<iframe
width="500px"
height="500px"
src="//player.bilibili.com/player.html?aid=886410537&bvid=BV1KK4y1p7M4&cid=288792143&page=1"
scrolling="no"
border="0"
frameborder="no"
framespacing="0"
allowfullscreen="true">
iframe>
<iframe src="//player.bilibili.com/player.html?aid=13248989&bvid=BV1ox411n7eY&cid=21802553&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> iframe>
body>
html>
19. 音视频标签
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<embed src="mp3/怨苍天变了心%20方季惟.mp3" autostart="true" loop="true" height="120px" width="600px">
<embed src="mp4/video.mp4" autostart="true" loop="true" height="600px" width="600px">
<hr >
<audio src="mp3/怨苍天变了心%20方季惟.mp3" loop="loop" autoplay="autoplay" controls="controls">
当前浏览器不支持audio
audio>
<hr >
<video src="mp4/video.mp4" width="800" height="800" autoplay="autoplay" controls="controls">
video>
<video src="mp4/mi.mp4" width="800" height="800" autoplay="autoplay" controls="controls">
video>
body>
html>
20. 行标签和块标签以及行内块标签
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<b>文本加粗的标签，他是一个行标签b> <b>文本加粗的标签，他是一个行标签b> <b>文本加粗的标签，他是一个行标签b>
<h1>abch1>
<font size="7" color="red">font 标签也是行标签font> <font size="7" color="red">font 标签也是行标签font>
<ul>
<li>asdfasdf li>
<li>asdfasdf li>
ul>
<button type="button">一个按钮button>
<button type="button">一个按钮button>
<button type="button">一个按钮button>
body>
html>
21. 行标签块标签行内跨标签的特点
<html>
<head>
<meta charset="utf-8">
<title>title>
<style type="text/css">
font{
height: 500px;
width: 500px;
margin-top: 300px;
margin-left: 500px;
}
h1{
margin-top: 1000px;
width: 500px;
height: 500px;
border: 1px solid black;
}
style>
head>
<body>
<font>行标签font><font>行标签font>
<h1>块标签h1>
body>
html>
22. 行内块的标签
<html>
<head>
<meta charset="utf-8">
<title>title>
<style type="text/css">
img{
height: 600px;
width: 500px;
margin-top: 50px;
margin-left: 50px;
}
style>
head>
<body>
<img src="img/1.jpg" > <img src="img/1.jpg" >
body>
body>
html>
23. 行内块标签
<html>
<head>
<meta charset="utf-8">
<title>title>
<style type="text/css">
button{
height: 200px;
width: 300px;
margin-top: 50px;
margin-left: 50px;
}
img{
height: 600px;
width: 200px;
margin-top: 150px;
margin-left: 250px;
}
style>
head>
<body>
<button type="button">一个按钮button><button type="button">一个按钮button>
<img src="img/1.jpg" > <img src="img/1.jpg" >
body>
body>
html>
24. 纯净的块标签和行标签
<html>
<head>
<meta charset="utf-8">
<title>title>
<style type="text/css">
span{
font-weight: 900;
}
style>
head>
<body>
<h1>不是一个纯净的块标签h1>
<ul>
<li>asdfasdfasdfli>
<li>asdfasdfasdfli>
ul>
<div id="">
abc
div>
<div id="">
abc
div>
<b>不纯净的行标签b>
<hr >
<b>asdfasdfsdb>
<s>阿斯顿发送到发斯蒂芬s><s>阿斯顿发送到发斯蒂芬s>
<span>纯净的行标签span><span>纯净的行标签span>
body>
html>
