1 标签的分类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html标签的分类</title>
</head>
<body>
<!-- 1. 有主体标签: 又开始有结束的标签 -->
<h1>有主体标签</h1>
<!-- 2. 没有主体标签 -->
<!--分割线-->
<hr/>
<!-- 3 块级标签 : 每个都会占一行 -->
<div>这是div1</div>
<div>这是div2</div>
<div>这是div3</div>
<!-- 4 内联标签 : 同一行展示 -->
<span>这是span1</span>
<span>这是span2</span>
<span>这是span3</span>
</body>
</html>
注意: 标签必须有结束标志
2 文本标签介绍
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本标签介绍</title>
</head>
<body>
<!--
h1 ~ h6, 作用: 标题标签, 特征: 由大到小
位置: align属性 {center 剧中, left 左边, right 右边}
字体颜色: style="color:red" 指定字体颜色为红色
-->
<h1 align="center" style="color:red">这是标题1</h1>
<!--<h2 align="right">这是标题2</h2>-->
<!--<h3 align="left">这是标题3</h3>-->
<!--<h4>这是标题4</h4>-->
<!--<h5>这是标题5</h5>-->
<!--<h6>这是标题6</h6>-->
<!--<h16>这是标题16</h16>-->
<!--
<hr/> 分割线标签, 水平线标签等
color 颜色属性
size 将线变粗
width 指定宽度
指定具体宽度 width="200" 宽度为200个像素
指定占这个父标签的百分比, width="50%"
-->
<hr color="red" size="6" width="80%"/>
<!--事实: 文件中的多个换行或空格, 会被浏览器解析成一个空格-->
<!--
<br/> 换行
-->
这是段落1<br/><br/>
这是段落2<br/><br/>
这是段落3<br/><br/>
这是段落4<br/><br/>
<hr/>
<!--
p 段落标签
空格 (转义字符)
<font color="颜色值" size="18">文本</font>
-->
<p> 这是段落1这是段落1这是段落1这是段落1这是段落1这是段落1这是段落1这是段落1这是段落1</p>
<p><b>这是段落2</b></p>
<p><strong>这是段落3</strong></p>
<p><i>这是段落4</i></p>
<hr/>
a <b> <br/>
♥<br/>
<font color="red" size="1">♥</font>
<font color="red" size="6">♥</font>
<font color="red" size="18">♥</font>
</body>
</html>
3 公司简介案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>案例1</title>
</head>
<body>
<h1 align="center">公司简介</h1>
<hr color="gold"/>
<p> <font color="red">"中关村黑马程序员训练营"</font>是由<i><b>传智播客</b></i>联合中关村软件园、优快云， 并委托传智播客进行教学实施的软件开发高端培训机构，致力于服务各大软件企业，解决当前软件开发技术飞速发展， 而企业招不到优秀人才的困扰。
<br/>目前，“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地， 并被评为中关村软件园重点扶持人才企业。</p>
<p> 黑马程序员的学员多为大学毕业后，有理想、有梦想，想从事IT行业，而没有环境和机遇改变自己命运的年轻人。 黑马程序员的学员筛选制度，远比现在90%以上的企业招聘流程更为严格。任何一名学员想成功入学“黑马程序员”， 必须经历长达2个月的面试流程，这些流程中不仅包括严格的技术测试、自学能力测试，还包括性格测试、压力测试、 品德测试等等测试。毫不夸张地说，黑马程序员训练营所有学员都是精挑细选出来的。百里挑一的残酷筛选制度确 保学员质量，并降低企业的用人风险。</p>
<p> 中关村黑马程序员训练营不仅着重培养学员的基础理论知识，更注重培养项目实施管理能力，并密切关注技术革新， 不断引入先进的技术，研发更新技术课程，确保学员进入企业后不仅能独立从事开发工作，更能给企业带来新的技术体系和理念。</p>
<p> 一直以来，黑马程序员以技术视角关注IT产业发展，以深度分享推进产业技术成长，致力于弘扬技术创新，倡导分享、 开放和协作，努力打造高质量的IT人才服务平台。</p>
<hr color="gold"/>
<center>
<font size="2" color="#d3d3d3">
江苏传智播客教育科技股份有限公司<br/>
版权所有Copyright © 2006-2018, All Rights Reserved 苏ICP备16007882
</font>
</center>
</body>
</html>
4 列表标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表标签</title>
</head>
<body>
<!--有序标签-->
<ol>
<li>大学</li>
<li>高中</li>
<li>初中</li>
<li>小学</li>
</ol>
<ol type="A">
<li>大学</li>
<li>高中</li>
<li>初中</li>
<li>小学</li>
</ol>
<ol type="a">
<li>大学</li>
<li>高中</li>
<li>初中</li>
<li>小学</li>
</ol>
<ol type="i">
<li>大学</li>
<li>高中</li>
<li>初中</li>
<li>小学</li>
</ol>
<ol type="I">
<li>大学</li>
<li>高中</li>
<li>初中</li>
<li>小学</li>
</ol>
<!--无序标签-->
<ul>
<li>大学</li>
<li>高中</li>
<li>初中</li>
<li>小学</li>
</ul>
<ul type="circle">
<li>大学</li>
<li>高中</li>
<li>初中</li>
<li>小学</li>
</ul>
<ul type="square">
<li>大学</li>
<li>高中</li>
<li>初中</li>
<li>小学</li>
</ul>
</body>
</html>
5 图片标签(重点)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片标签</title>
</head>
<body>
<!--
图片标签 img :
src属性: 指定图片的位置
width属性: 指定宽度
注意: 如果你只设置了高或宽的一个, 两外一个成比例缩放
height 属性: 指定高度
注意: 如果你 宽度和高度都设置了, 造成比例不协调(失真)
-->
<img src="img/gir222l1.jpg" width="200" height="50" alt="美女一号"/>
<img src="img/girl2.jpg" width="200" alt="美女二号"/>
</body>
</html>
6 超链接(重点)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接</title>
</head>
<body>
<!--
a 超链接, 作用: 跳转到新页面
href属性: 指定新页面的位置
target属性: 指定以哪种方式打开, 默认情况下, 在当前页面打开
target="_blank" 在新页面打开超链接
-->
<a href="http://www.baidu.com" target="_blank" title="哈哈哈">百度</a>
<hr/>
<a href="http://www.jd.com">京东</a>
<hr/>
<a href="mailto:guoxiaochuan@itcast.cn">联系我们</a>
</body>
</html>
7 表格(重点)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<h1>基本表格</h1>
<!--
table
border属性: 指定边框的宽度: 如 border=1
width属性: 指定宽度
cellpadding="10" 指定单元格和内部文本的距离
cellspacing="0" 指定单元格和单元格的距离
tr
align="center" 单元格内容剧中显示
th, td
colspan="2" 合并两列
rowspan="3" 合并三行
-->
<table border="1" width="300" cellpadding="10" cellspacing="0">
<tr align="center">
<td><b>编号</b></td>
<td><b>姓名</b></td>
<td><b>薪资</b></td>
</tr>
<tr>
<th>编号</th>
<th>姓名</th>
<th>薪资</th>
</tr>
<tr align="center">
<td>101</td>
<td>张三</td>
<td>18000</td>
</tr>
<tr align="center">
<td>102</td>
<td>李四</td>
<td>28000</td>
</tr>
</table>
<h1>列合并</h1>
<table border="1" width="350" cellpadding="10" cellspacing="0">
<tr>
<th>姓名</th>
<th colspan="2">手机号</th>
</tr>
<tr>
<td>张三</td>
<td>186 1248 0001</td>
<td>186 1248 0002</td>
</tr>
<tr>
<td>李四</td>
<td>186 1248 0003</td>
<td>186 1248 0004</td>
</tr>
</table>
<h1>行合并</h1>
<table border="1" width="350" cellpadding="10" cellspacing="0">
<tr>
<th>姓名</th>
<th>手机号</th>
</tr>
<tr>
<td rowspan="2">张三</td>
<td>186 1248 0001</td>
</tr>
<tr>
<td>186 1248 0002</td>
</tr>
<tr>
<td rowspan="3">李四</td>
<td>186 1248 0003</td>
</tr>
<tr>
<td>186 1248 0004</td>
</tr>
<tr>
<td>186 1248 0005</td>
</tr>
</table>
</body>
</html>
8 表格案例(重点)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格案例</title>
</head>
<body>
<!--<caption>学生成绩表</caption> 指定表格的标题 -->
<table border="1" width="500" cellspacing="0" cellpadding="10">
<caption>学生成绩表</caption>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>成绩</th>
</tr>
<tr align="center">
<td>100</td>
<td>张三</td>
<td>男</td>
<td>80</td>
</tr>
<tr align="center">
<td>200</td>
<td>李四</td>
<td>男</td>
<td rowspan="2">90</td>
</tr>
<tr align="center">
<td>300</td>
<td>王五</td>
<td>男</td>
</tr>
<tr align="center">
<td>总成绩</td>
<td colspan="3">900</td>
</tr>
</table>
</body>
</html>
9 表单(重点)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单 用户注册案例</title>
</head>
<body>
<h3 align="center">用户注册</h3>
<hr size="5" color="gray"/>
<form method="post" action="/serverUrl">
<input type="hidden" name="id" value="32"/>
<table align="center" cellpadding="10">
<tr>
<th align="right">用户名</th>
<td><input type="text" name="username" value="zhangsan"/></td>
</tr>
<tr>
<th align="right">密码</th>
<td><input type="password" name="pwd" value="123"/></td>
</tr>
<tr>
<th align="right">性别</th>
<td>
<!-- <input type="radio" name="sex" value="男" checked="checked"/> 男-->
<input type="radio" name="sex" value="男" checked/> 男
<input type="radio" name="sex" value="女" /> 女
</td>
</tr>
<tr>
<th align="right">爱好</th>
<td>
<input type="checkbox" name="hobby" value="抽烟" checked/> 抽烟
<input type="checkbox" name="hobby" value="喝酒" /> 喝酒
<input type="checkbox" name="hobby" value="烫头" checked/> 烫头
</td>
</tr>
<tr>
<th align="right">学历</th>
<td>
<select name="edu">
<option>---请选择学历---</option>
<option value="bk">本科</option>
<option value="zk">专科</option>
<option selected value="gz">高中</option>
<option value="cz">初中</option>
</select>
</td>
</tr>
<tr>
<th>照片</th>
<td>
<input type="file" name="fileUpload"/>
</td>
</tr>
<tr>
<th>个人简介(不得少于500字)</th>
<td>
<textarea name="info" cols="50" rows="5">我是退伍军人</textarea>
</td>
</tr>
<tr align="center">
<th></th>
<td>
<input type="submit" value="注册"/>
<input type="reset" value="重置"/>
<input type="button" value="按钮1"/>
</td>
</tr>
</table>
</form>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
