html标记
1.排版标记
<p></p> 段落标签 每一个段落之间都有段间距
<!-- --> 注解标签
<br/> 换行标签
<hr/> 横线
<center></center> 居中显示
  ; 一个就是一个空格，
<pre></pre> 原样输出
<div></div> 可以为被包裹的内容添加同种样式
2.字体标记
<b></b> 加粗
<i></i> 斜体
<sub></sub> 下标
<sup></sup> 上标
字体大写：
<h1>aaaaaaaa</h1><!-- 最大字体的标题 对应的size是6号字体 标题默认字体加粗 -->
<h2>aaaaaaaa</h2>
<h3>aaaaaaaa</h3>
<h4>aaaaaaaa</h4>
<h5>aaaaaaaa</h5>
<h6>aaaaaaaa</h6>
<font size=7>aaaaaaa</font><br/> <!-- 通过font可以指定字体的大小和颜色 -->
<font color='yellow' size=8>aaaaaaa</font><br/><!-- color 属性 可以加 #000000 RGB 也可以加具体的颜色对应的英文 -->
<font color='yellow' size=6>aaaaaaa</font><br/>
<font color='red' size=+3>aaaaaaa</font><br/><!-- size来指定字体大小 大小最大是7号字 可以使用绝对的字体大小 也可以用相对字体大小 -->
<font color='yellow' size=5>aaaaaaa</font><br/><!-- 默认size大小是3号 +3 3+3=6 字号就是6 -->
<font color='yellow' size=4>aaaaaaa</font><br/>
<font color='red' >aaaaaaa</font><br/>
<font color='yellow' size=3>aaaaaaa</font><br/>
<font color='yellow' size=2>aaaaaaa</font><br/>
<font color='yellow' size=1>aaaaaaa</font><br/>
3.有序和无序清单
有序标签
<html>
<head>
<meta charset="UTF-8">
<title>有序清单</title>
</head>
<body>
<ol type="a" start='27'>黑马Android95期
<li value="4">王晓冬
</li>
<li>温广利</li>
</ol>
</body>
</html>
练习：
<html>
<head>
<meta charset="UTF-8">
<title>有序清单练习</title>
</head>
<body>
<h1>HTML在线考试试题</h1>
<ol>
<li>HTML中，换行使用的标签是 </li>
<ol type='A'> <!-- ol ordered list type可以指定 1 A/a i/I 数字序号 英文字母序号 罗马数字序号-->
<li><br/></li> <!--ol中可以添加 start属性 从哪个序号开始计数 -->
<li><p/></li> <!-- 每一个li标签中 可以指定value 当前标签的计数数字 -->
<li><hr/></li>
<li><img/></li>
</ol>
<li><img/>标签的哪种属性用于指定图像的地址</li>
<ol type='A'>
<li>alt</li>
<li>addr</li>
<li>src</li>
<li>href</li>
</ol>
</ol>
</body>
</html>
无序标签
<html>
<head>
<meta charset="UTF-8">
<title>无序标签</title>
</head>
<body>
<ul type="square">传智播客 <!-- type 可以指定 disc 实心圆 circle空心圆 square 方块 -->
<li>java学院
</li>
<li>C/C++学院
</li>
<li>iOS学院
</li>
</ul>
</body>
</html>
练习
<html>
<head>
<meta charset="UTF-8">
<title>无序清单练习</title>
</head>
<body>
<h1>我的电脑文件列表</h1>
<ul>
<li>我的电脑</li>
<ul type="circle">
<li>本地磁盘C</li>
<ul type="square">
<li>我的音乐</li>
<li>我的收藏</li>
</ul>
<li>本地磁盘D</li>
<ul type="square">
<li>学习视频</li>
<li>电影</li>
</ul>
</ul>
</ul>
</body>
</html>
自定义清单
<html>
<head>
<meta charset="UTF-8">
<title>自定义清单</title>
</head>
<body>
<dl><!-- 用dl声明一个自定义清单 dt 表示标题 dd表示内容 dd有缩进的效果 -->
<dt>java学院</dt>
<dd>android学科</dd>
<dd>JavaEE学科</dd>
</dl>
<dd>android学科</dd>
</body>
</html>
4.超链接
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<a href="demo1.html" target="_self">demo1</a><!-- href 指定跳转的目的URL地址 -->
<a href="http://www.baidu.com" target="_self">百度</a><!-- target _blank 用新的窗口打开url _self 用当前窗口打开url -->
<a href="#part3" target="_self">快速跳到part3</a> <!-- 通过href 指定一个网页内的id 实现网页内快速跳转 -->
<span id="part1">第一部分<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></span>
<span id="part2">第二部分<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></span>
<span id="part3">第三部分<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></span>
</body>
</html>
5.图像标签
<html>
<head>
<meta charset="UTF-8">
<title>图像标签</title>
</head>
<body><!-- img 图片的标签 src 图片的具体位置 alt 图片描述性的文字 height 指定图片的高度 width 指定图片的宽度 -->
<img alt="beautiful girl" src="http://192.168.78.99:8080/hello/img/1.jpg" width="300" height="400" usemap="#Map"/>
<!-- 可以在图片上指定一个热点区域 点击这个热点区域 就可以跳转到另外一个页面 热点区域 声明一个map -->
<map name="Map">
<area shape="circle" coords="100,100,100" href="img/20.jpg"><!-- shape circle 圆形区域 square 方形区域 coords 指定坐标 如果是圆形区域 (圆心的x坐标 圆心Y坐标 半径) -->
<!-- shape是 square coords 四个参数 分别对应长方形 左上角 和右下角的x y坐标 href 跳转到的url地址 使用热点 要在img 标签中 声明 usemap属性-->
</map>
</body>
</html>
6.表格标签
<html> <head> <meta charset="UTF-8"> <title>表格标签</title> </head> <body> <table border="1" width="50%" height="300" bordercolor=red cellpadding='2' cellspacing='10'> <tr> <td>你好</td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> </table> </body> </html>
练习
<html> <head> <meta charset="UTF-8"> <title>表格练习</title> </head> <body> <table border ="1" width="400" height="260"><!-- table声明一个表格 tr代表表格的一行 td代表某一行的单元格 width 表格的宽度 可以通过具体的数值 或者是百分比来赋值 border 边框的宽度 bordercolor 边框颜色 --> <tr> <td colspan="3">android 95期 测试成绩</td><!-- colspan 跨列 colspan=3 说明当前单元格跨3列 水平方向 --> </tr> <tr> <td rowspan="2"> 王晓冬</td><!-- rowspan 跨行 --> <!--rowspan=2 说明当前单元格 在竖直方向上占两个单元格的高度 --> <td>android基础</td> <td>90</td> </tr> <tr> <td>android项目</td> <td>80</td> </tr> <tr> <td rowspan="2"> 高宁泽</td> <td>android基础</td> <td>80</td> </tr> <tr> <td>android项目</td> <td>90</td> </tr> </table> </body> </html>
7.表单标签
<html> <head> <meta charset="UTF-8"> <title>表单标签</title> </head> <body> <form action="" method="get"><!-- action 内容要提交到的地址 空就是提交给当前地址 method 指定提交的方法 get post --> <table width='400' border = '1'> <tr> <td>用户名</td> <td><input type="text" name="username"/></td><!-- input type属性 text 普通文本 password密码 radio单选 checkbox 多选 file上传文件 reset重置内容 submit提交 --> <!-- 文本框 textarea <select><option> 下拉选择框 选项 提交的参数都是以key,value的形式 key通过name属性来指定 checkbox radio 需要通过value属性设置具体的值 --> </tr> <tr> <td>密码</td> <td><input type="password" name="password"/></td> </tr> <tr> <td>性别</td> <td><input type='radio' name='gender' value="m" checked="checked"/>男 <input type='radio' name='gender' value="f" />女</td> </tr> <tr> <td>爱好</td> <td> <input type="checkbox" name = 'hobby' value="football" checked="checked"/>足球 <input type="checkbox" name = 'hobby' value="basketball"/>篮球 <input type="checkbox" name = 'hobby' value="golf"/>高尔夫 </td> </tr> <tr> <td>故乡</td> <td> <select name="hometown"> <option value="bj">北京</option> <option value="ln">辽宁</option> <option value="sd">山东</option> </select> </td> </tr> <tr> <td>照片</td> <td><input type="file" name="file"></td> </tr> <tr> <td>自我介绍</td> <td><textarea rows="3" cols="30" name="intro">这个家伙很懒......</textarea></td> </tr> <tr> <td><input type="reset" value="重置"></td> <td><input type="submit" value="提交"></td> </tr> </table> </form> </body> </html>
