html基本结构及常见文本标签
<!--
html(Hyper Text Markup Language)是用来创建网页的标记语言;
Markdown :
-->
<!--声明为html5-->
<!DOCTYPE html>
<!--html是一整个人-->
<html lang="en">
<!--相当于人的头-->
<head>
<!--指定html'的编码格式-->
<meta charset="UTF-8">
<!--描述文档的标题-->
<title>这是第一个html文档</title>
</head>
<!--相当于人的头， 可见的页面内容-->
<body>
<!--1. 标题标签h1-h6-->
<!--段落标签p-->
<!--加粗 b/strong-->
<!--斜体 i-->
<!--下划线 u-->
<!--删除线 s-->
<!--预文本标签pre-->
©2019Baidu
<marquee direction="right">welcome westos to learn python </marquee>
<marquee direction="left">welcome westos to learn python </marquee>
<marquee direction="up">welcome westos to learn python </marquee>
<marquee direction="down">welcome westos to learn python </marquee>
<bdo dir="ltr">wes tos</bdo><br/>
<bdo dir="rtl">westos</bdo><br/>
<mark>westos</mark><br/>
x<sub>1</sub> = 2<br/>
x<sub>2</sub> = 3<br/>
(x<sub>1</sub> + x<sub>2</sub> )<sup>2</sup> = ?<br/>
x<sub>1</sub> < x<sub>2</sub> <br/>
x<sub>1</sub> > x<sub>2</sub> <br/>
<abbr title="全部内容">缩写轻轻的我走了，正如我轻轻的来；</abbr>
<pre>
轻轻的我走了，正如我轻轻的来；
我轻轻的招手，作别西天的云彩。
那河畔的金柳，是夕阳中的新娘；
波光里的艳影，在我的心头荡漾。
软泥上的青荇，油油的在水底招摇；
在康河的柔波里，我甘心做一条水草！
那榆荫下的一潭，不是清泉，是天上虹；
揉碎在浮藻间，沉淀着彩虹似的梦。
寻梦？撑一支长篙，向青草更青处漫溯；
满载一船星辉，在星辉斑斓里放歌。
但我不能放歌，悄悄是别离的笙箫；夏虫也为我沉默，沉默是今晚的康桥！
悄悄的我走了，正如我悄悄的来；我挥一挥衣袖，不带走一片云彩。
</pre>
<h1>一级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
<h1>新年活动大促销</h1>
<p style="color: red; font-size: larger">原价： <s>1000元</s></p>
<p>现价： 800元</p>
<p>一只猫<i>80万美元</i>
<u>是芭蕾舞猫“阿比西尼亚猫”</u>
家猫鼻祖的“埃及神猫”
难道是自幼<b>飘过太平洋的西开粉条</b>
</p>
<p>
被贫穷限制思想的我网搜到底是神马品种
原来它们既非胎生，也非蛋生，更不是试管出来的
是由一条条代码混搭而成的。
那一个个<strong>IT大神</strong>的程序员就是他们的爹妈啊。
他们的生活环境贼好，
空间幅员辽阔，没有环境污染，
他们生活在美丽的云端。
他们的大本营叫“链养猫”网站。
他们还有个科技感的名字“云养猫”。
</p>
<p>
他们来自一个虚拟养成猫咪的游戏网站，它的特别之处就在于可以通过一种目前很流行的区块链平台，进行交易。
</p>
</body>
</html>
超链接标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--1. 跳转到指定的url地址-->
<a href="http://www.baidu.com">百度一下</a>
<a href="02_html基本结构及常见文本标签.html">跳转到第一个页面</a>
<!--2. 新建一个浏览器窗口并跳转-->
<a href="http://www.baidu.com" target="_blank">百度一下</a>
<!--3. 跳转到当前页面的指定位置(锚点)-->
<a href="#C1">人工智能</a>
<a href="#C2"> 人工智障</a>
<a href="#C3"> 深度学习</a>
<h1><a name="C1">人工智能</a></h1>
<pre>
轻轻的我走了，正如我轻轻的来；
我轻轻的招手，作别西天的云彩。
那河畔的金柳，是夕阳中的新娘；
波光里的艳影，在我的心头荡漾。
软泥上的青荇，油油的在水底招摇；
在康河的柔波里，我甘心做一条水草！
那榆荫下的一潭，不是清泉，是天上虹；
揉碎在浮藻间，沉淀着彩虹似的梦。
寻梦？撑一支长篙，向青草更青处漫溯；
满载一船星辉，在星辉斑斓里放歌。
但我不能放歌，悄悄是别离的笙箫；夏虫也为我沉默，沉默是今晚的康桥！
悄悄的我走了，正如我悄悄的来；我挥一挥衣袖，不带走一片云彩。
</pre>
<h1><a name="C2">人工智障</a></h1>
<pre>
轻轻的我走了，正如我轻轻的来；
我轻轻的招手，作别西天的云彩。
那河畔的金柳，是夕阳中的新娘；
波光里的艳影，在我的心头荡漾。
软泥上的青荇，油油的在水底招摇；
在康河的柔波里，我甘心做一条水草！
那榆荫下的一潭，不是清泉，是天上虹；
揉碎在浮藻间，沉淀着彩虹似的梦。
寻梦？撑一支长篙，向青草更青处漫溯；
满载一船星辉，在星辉斑斓里放歌。
但我不能放歌，悄悄是别离的笙箫；夏虫也为我沉默，沉默是今晚的康桥！
悄悄的我走了，正如我悄悄的来；我挥一挥衣袖，不带走一片云彩。
</pre>
<h1><a name="C3">深度学习</a></h1>
<pre>
轻轻的我走了，正如我轻轻的来；
我轻轻的招手，作别西天的云彩。
那河畔的金柳，是夕阳中的新娘；
波光里的艳影，在我的心头荡漾。
软泥上的青荇，油油的在水底招摇；
在康河的柔波里，我甘心做一条水草！
那榆荫下的一潭，不是清泉，是天上虹；
揉碎在浮藻间，沉淀着彩虹似的梦。
寻梦？撑一支长篙，向青草更青处漫溯；
满载一船星辉，在星辉斑斓里放歌。
但我不能放歌，悄悄是别离的笙箫；夏虫也为我沉默，沉默是今晚的康桥！
悄悄的我走了，正如我悄悄的来；我挥一挥衣袖，不带走一片云彩。
</pre>
</body>
</html>
图片标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--图片链接--设置大小和图片不存在的文字信息-->
<!--<img src="doc/meitu01.jpg" title="meitu">-->
<!--<img src="doc/meitu01.jpg" width="1000px" height="1000px">-->
<!--<img src="doc/meitu01.jpg" width="1000px" height="1000px" alt="这是一个风景图">-->
this is a image: <img src="doc/meitu01.jpg" title="meitu" align="center">
<!--图片链接 img a-->
<!--<a href="http://www.baidu.com" target="_blank"><img src="doc/meitu01.jpg"></a>-->
</body>
</html>
无序标签和有序标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--ul ol dl
https://www.csdn.net/--- 常见的导航栏使用无序标签
-->
<ol type="i">
<li>苹果1</li>
<li>苹果2</li>
<li>苹果3</li>
</ol>
<ul>
<li>苹果1</li>
<li>苹果2</li>
<li>苹果3</li>
</ul>
<dl>
<dt>周杰伦</dt>
<dd>1</dd>
<dd>2</dd>
<dd>3</dd>
<dt>周杰伦</dt>
<dd>1</dd>
<dd>2</dd>
<dd>3</dd>
</dl>
</body>
</html>
案例1_实现水平导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
行内元素: 占多少用多少
块级元素: 一个标签占一整行
-->
<ul style="list-style-type: none; text-align: center">
<li style="display: inline-block; width: 20%; height: 50px;background: antiquewhite">博客</li>
<li style="display: inline-block; width: 20%; height: 50px;background: antiquewhite">学院</li>
<li style="display: inline-block; width: 20%;height: 50px;background: antiquewhite">技术</li>
<li style="display: inline-block; width: 20%;height: 50px;background: antiquewhite">编程</li>
</ul>
</body>
</html>
表格标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<br/>
<br/>
<br/>
<table border="1px" width="50%" align="center">
<caption>Tile: student info</caption>
<tr>
<td rowspan="4">student</td>
<td>name</td>
<td>age</td>
<td>score</td>
</tr>
<tr>
<td>fentiao</td>
<td>8</td>
<td>100</td>
</tr>
<tr>
<td>fensi</td>
<td>10</td>
<td>100</td>
</tr>
<tr>
<td>fendai</td>
<td>19</td>
<td>100</td>
</tr>
</table>
</body>
</html>
08_表格标签的行合并与列合并
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1px" width="50%" align="center">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td rowspan="2">6</td>
</tr>
<tr>
<td colspan="2">7</td>
</tr>
</table>
</body>
</html>
表格标签案例之学生表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--确定创建5行7列的表格
1. border: 边框宽度
2. width="50%"： 表格宽度
3, align="center"
4. cellpadding="10" ---表格内边距(比阿哥里面的文字和边框的距离)
5. cellspacing="0 -----表格的外边距(边框为实心)
6. style="text-align: center" --- 表格里面文字居中
-->
<table border="1px" width="50%" align="center" cellpadding="10" cellspacing="0" style="text-align: center">
<tr>
<!--合并5行-->
<td rowspan="5">学生</td>
<!--合并6列-->
<td colspan="6">学生信息表</td>
</tr>
<tr>
<!--表头: th标签可以自动加粗并居中-->
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>电话</th>
<th>住址</th>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>男</td>
<td>23</td>
<td>110</td>
<td>雁塔</td>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>男</td>
<td>23</td>
<td>110</td>
<td>雁塔</td>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>男</td>
<td>23</td>
<td>110</td>
<td>雁塔</td>
</tr>
</table>
</body>
</html>
表单标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>用户登陆</h1>
<!--form表单-->
<form>
<!--文本域-->
用户名: <input type="text"><br/>
<!--密码域-->
密码: <input type="password"><br/>
个人简介: <textarea rows="10" cols="100"></textarea><br/>
<!--提交文件-->
个人简历提交: <input type="file"><br/>
出生日期: <input type="date"> <br/>
<!--单选按钮-->
<!--name是为了确保用户单选的范围-->
性别: 男<input type="radio" name="gender"> 女<input type="radio" name="gender"><br/>
专业: 计算机<input type="radio" name="major"> 软件工程<input type="radio" name="major"><br/>
<!--多选按钮-->
爱好: <input type="checkbox" name="hobbie"> 编程
<input type="checkbox" name="hobbie"> 篮球
<input type="checkbox" name="hobbie"> 羽毛球<br/>
<!--下拉列表-->
城市: <select>
<option>----选择城市----</option>
<option>西安</option>
<option>成都</option>
<option>北京</option>
</select><br/>
<!--围绕数据的标签-->
<fieldset>
<legend>个人简介</legend>
<h1>登陆</h1>
<hr/>
<!--文本域-->
用户名: <input type="text"><br/>
<!--密码域-->
密码: <input type="password"><br/>
</fieldset>
<input type="submit" value="登陆">
<input type="reset" value="重置">
</form>
</body>
</html>
个人简历之表格与表单练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
1. 标签选择器: h1{ xxxx }
2. id选择器: 设置: <a id="唯一的id名"> 设置样式: #id名{ xxxx }
3. class选择器: 设置: <a class="class名"> 设置样式: .类名{ xxxx }
4. 属性选择器: input[type="text"]{ xxxx }
*/
/*<!--不让所有的input标签宽度为100-%-->*/
/*input{*/
/*width: 100%;*/
/*}*/
input[type="text"] {
width: 100%;
border: none;
height: 30px
}
input[type='email']{
width: 100%;
border: none;
height: 30px;
}
/*需求: 关闭的按钮为红色，添加的按钮为绿色 */
input[type='button']{
color: white; /*字体颜色*/
border: 0; /*去掉边框 */
font-size: 16px;
text-align: center; /*字体居中*/
}
#add{
background-color: #4CAF50;
}
#close{
background-color: #f44336;
}
/*类选择器*/
.addColor{
background: snow;
}
#footer{
text-align: right;
}
</style>
</head>
<body>
<br/>
<br/>
<h1 style="text-align: center">个人简介</h1>
<hr/>
<br/>
<br/>
<table id="firstTable" border="1px" width="50%" align="center" cellpadding="10px" cellspacing="0">
<!--创建9行4列的表格-->
<tr>
<td class="addColor">姓名</td>
<td><input type="text" placeholder="Name"></td>
<td class="addColor">性别</td>
<td>
<select>
<option>男</option>
<option>女</option>
</select>
</td>
</tr>
<tr>
<td class="addColor">手机号码</td>
<td><input type="text"></td>
<td class="addColor">电子邮箱</td>
<td><input type="email"></td>
</tr>
<tr>
<td class="addColor">教育程度</td>
<td><input type="text"></td>
<td class="addColor">工作职位</td>
<td><input type="text"></td>
</tr>
<tr>
<td class="addColor">工作城市</td>
<td><input type="text"></td>
<td class="addColor">期望薪资</td>
<td><input type="text"></td>
</tr>
<tr>
<td class="addColor">自我介绍</td>
<!--合并三列-->
<td colspan="3"><input type="text"></td>
</tr>
<tr>
<td class="addColor">特长</td>
<!--合并三列-->
<td colspan="3"><input type="text"></td>
</tr>
<tr>
<td class="addColor">地址</td>
<!--合并三列-->
<td colspan="3"><input type="text"></td>
</tr>
<tr>
<td colspan="4"></td>
</tr>
<tr id="footer">
<td colspan="4">
<input id="add" type="button" value="添加">
<input id="close" type="button" value="关闭">
</td>
</tr>
</table>
</body>
</html>
span标签与div标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
/*边框的宽度， 颜色， 线条类型*/
border: 1px solid green;
width: 500px;
height: 200px;
border-radius:25px;
text-align: center;
padding-top: 200px;
}
</style>
</head>
<body>
<!--
# 1. 什么是span？ 什么是div?
- span标签是超文本标记语言（HTML）的行内标签，被用来组合文档中的行内元素。
span没有固定的格式表现。当对它应用样式时，它会产生视觉上的变化。
- DIV标签，称为区隔标记。作用是设定字、画、表格等的摆放位置。当你把文字、
图象，或其他的放在 DIV 中，它可称作为“DIV block”，或“DIV element”
或“css-layer”，或干脆叫“layer”。而中文我们把它称作“层次”。
# 2.div和span的区别
span==h1
1). 相同点:
DIV 和 SPAN 元素最大的特点是默认都没有对元素内的对象进行任何格式化渲染。
主要用于应用样式表。
2). 不同点:
两者最明显的区别在于DIV是块元素，而SPAN是行内元素(也译作内嵌元素)。
3). 具体应用：
# 1.所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行，
测试一下下面的代码你会有更形象的理解：
*********
# 块级元素， 里面可以包含行内元素和块级元素;
# 行内元素, 里面只能包含行内元素;
*********
# 测试<span>紧跟前面的"测试"显示</span><div>这里会另起一行显示</div>
# *****2.块元素和行内元素也不是一成不变的，通过定义CSS的display属性值可以互相转化，如：
# 测试<div style="display:inline">紧跟前面的"测试"显示
</div><span style="display:block">这里会另起一行显示</span>
# 提示：如果不对DIV元素定义任何CSS属性，其显示效果相当于P元素。
-->
<div>hello</div>
<span>hello</span>
</body>
</html>