1. 简介

HyperText Markup Language 超文本标记语言 可以用来描述文本的样式

  1. <html>
  2. <body>
  4. <h1>我的第一个标题</h1>
  6. <p>我的第一个段落。</p>
  8. </body>
  9. </html>

HTML各个版本

  • XHTML 是更严谨更纯净的 HTML 版本
  1. <!--严格模式-->
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  5. <!--松散模式-->
  6. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  7. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  • HTML4
  1. <!--严格模式-->
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  3. <html lang="en">
  5. <!--松散模式-->
  6. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  7. <html lang="en">
  • HTML5
  1. <!DOCTYPE html>
  2. <html lang="en">

2.常用HTML标记

排版标签

段落
换行

横线
居中 
  1. 原样输出  空格
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <title>排版标记</title>
  6.   </head>
  7.   <body>
  8.     <center><!-- 居中显示 -->
  9.     <p>aaaaaa</p><!-- p段落标签 每一个段落之间都有段间距 -->
  10.     <p>bbbbbbb </p>
  11.     <p>ccccccc</p>
  12.     aaaaaa <br/>bbbbbbb
  13.     </center>
  14.     <hr/><!-- 横线 -->
  15.     a&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;a<!-- &nbsp;空格 如果不加转义默认只显示一个空格 -->
  16.     <pre>
  17.     aaaaaaa
  18.     bbbbbbb</pre>
  19.     <div>aaaaaaaa
  20.     bbbbbbbbb</div>
  21.   </body>
  22. </html>

字体标记

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>字体标记</title>
  6. </head>
  7. <body>
  8.   aaaaaa<br/>
  9.   <b><i>aaaaaa</i></b><br/><!-- b 加粗 i 斜体 sup 上角标 sub下角标  -->
  10.   H<sub>2</sub>O <br/>
  11.   x<sup>2</sup>+y<sup>2</sup>=z<sup>2</sup><br/>
  12.   <h1>aaaaaaaa</h1><!-- 最大字体的标题 对应的size是6号字体 标题默认字体加粗 -->
  13.   <h2>aaaaaaaa</h2>
  14.   <h3>aaaaaaaa</h3>
  15.   <h4>aaaaaaaa</h4>
  16.   <h5>aaaaaaaa</h5>
  17.   <h6>aaaaaaaa</h6>
  19.   <font size=7>aaaaaaa</font><br/> <!-- 通过font可以指定字体的大小和颜色 -->
  20.   <font color='yellow' size=8>aaaaaaa</font><br/><!-- color 属性 可以加 #000000 RGB 也可以加具体的颜色对应的英文 -->
  21.   <font color='yellow' size=6>aaaaaaa</font><br/>
  22.   <font color='red'  size=+3>aaaaaaa</font><br/><!-- size来指定字体大小 大小最大是7号字 可以使用绝对的字体大小 也可以用相对字体大小 -->
  23.   <font color='yellow' size=5>aaaaaaa</font><br/><!-- 默认size大小是3号 +3 3+3=6 字号就是6 -->
  24.   <font color='yellow' size=4>aaaaaaa</font><br/>
  25.   <font color='red' >aaaaaaa</font><br/>
  26.   <font color='yellow' size=3>aaaaaaa</font><br/>
  27.   <font color='yellow' size=2>aaaaaaa</font><br/>
  28.   <font color='yellow' size=1>aaaaaaa</font><br/>
  30. </body>
  31. </html>

清单标记

  1. 无序清单
  2. <ul>
  3. <li></li>
  4. </ul>
  6. 有序清单
  7. <ol>
  8. <li></li>
  9. </ol>
  11. 描述列表
  12. <dl>
  13. <dt></dt>
  14. <dd></dd>
  15. </dl>

超链接标记

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <title>Insert title here</title>
  6.   </head>
  7.   <body>
  8.     <a href="demo1.html" target="_self">demo1</a><!-- href 指定跳转的目的URL地址 -->
  9.     <a href="http://www.baidu.com" target="_self">百度</a><!-- target _blank 用新的窗口打开url  _self 用当前窗口打开url -->
  10.     <a href="#part3" target="_self">快速跳到part3</a> <!-- 通过href 指定一个网页内的id  实现网页内快速跳转 -->
  11.     <span id="part1">第一部分
  12.       <br/>
  13.       <br/><br/><br/>
  14.       <br/><br/><br/><br/>
  15.       <br/><br/><br/><br/><br/><br/>
  16.       <br/><br/><br/><br/><br/><br/><br/><br/>
  17.       <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  18.     </span>
  19.     <span id="part2">第二部分<br/><br/><br/><br/><br/>
  20.       <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  21.       <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  22.       <br/><br/><br/><br/><br/><br/><br/>
  23.     </span>
  24.     <span id="part3">第三部分<br/><br/><br/><br/><br/><br/>
  25.       <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  26.       <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  27.       <br/>
  28.     </span>
  29.   </body>
  30. </html>

图像标记

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <title>图像标签</title>
  6.   </head>
  7.   <body>
  8.     <!-- img 图片的标签 src 图片的具体位置 alt 图片描述性的文字 height 指定图片的高度 width 指定图片的宽度 -->
  9.     <img alt="beautiful girl" src="img/1.jpg"  width="300" height="400" usemap="#Map"/>
  10.     <!-- 可以在图片上指定一个热点区域 点击这个热点区域 就可以跳转到另外一个页面  热点区域 声明一个map -->
  11.     <map name="Map">
  12.     <area shape="circle"   coords="100,100,100" href="img/20.jpg">
  13.     <!-- shape circle 圆形区域 square 方形区域  coords 指定坐标 如果是圆形区域 (圆心的x坐标 圆心Y坐标 半径) -->
  14.     <!-- shape是 square coords 四个参数  分别对应长方形 左上角 和右下角的x y坐标 href 跳转到的url地址 使用热点 要在img 标签中 声明 usemap属性-->
  15.     </map>
  16.     </body>
  17. </html>

表格标记

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>表格练习</title>
  6. </head>
  7. <body>
  8. <table  border ="1" width="400" height="260"><!-- table声明一个表格  tr代表表格的一行  td代表某一行的单元格  width 表格的宽度 可以通过具体的数值 或者是百分比来赋值 border 边框的宽度 bordercolor 边框颜色 -->
  9. <tr>
  10. <td colspan="3">android 95期 测试成绩</td><!-- colspan 跨列 colspan=3 说明当前单元格跨3列 水平方向 -->
  11. </tr>
  12. <tr>
  13. <td rowspan="2"> 王晓冬</td><!-- rowspan 跨行 --> <!--rowspan=2 说明当前单元格 在竖直方向上占两个单元格的高度  -->
  14. <td>android基础</td>
  15. <td>90</td>
  16. </tr>
  17. <tr>
  18. <td>android项目</td>
  19. <td>80</td>
  21. </tr>
  22. <tr>
  23. <td rowspan="2"> 高宁泽</td>
  24. <td>android基础</td>
  25. <td>80</td>
  26. </tr>
  27. <tr>
  28. <td>android项目</td>
  29. <td>90</td>
  31. </tr>
  32. </table>
  33. </body>
  34. </html>

表单标记

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>表单标签</title>
  6. </head>
  7. <body>
  8. <form action="" method="get"><!-- action 内容要提交到的地址 空就是提交给当前地址  method 指定提交的方法 get post -->
  9. <table width='400' border = '1'>
  10. <tr>
  11. <td>用户名</td>
  12. <td><input type="text"  name="username"/></td><!-- input  type属性  text 普通文本 password密码 radio单选  checkbox 多选  file上传文件  reset重置内容 submit提交 -->
  13. <!-- 文本框 textarea  <select><option> 下拉选择框 选项  提交的参数都是以key,value的形式  key通过name属性来指定 checkbox  radio 需要通过value属性设置具体的值 -->
  14. </tr>
  15. <tr>
  16. <td>密码</td>
  17. <td><input type="password"  name="password"/></td>
  18. </tr>
  19. <tr>
  20. <td>性别</td>
  21. <td><input type='radio'  name='gender'  value="m" checked="checked"/>男
  22. <input type='radio'  name='gender' value="f" />女</td>
  23. </tr>
  24. <tr>
  25. <td>爱好</td>
  26. <td>
  27. <input type="checkbox"  name = 'hobby'  value="football"  checked="checked"/>足球
  28. <input type="checkbox"  name = 'hobby'  value="basketball"/>篮球
  29. <input type="checkbox"  name = 'hobby'  value="golf"/>高尔夫
  30. </td>
  31. </tr>
  32. <tr>
  33. <td>故乡</td>
  34. <td>
  35. <select name="hometown">
  36.     <option value="bj">北京</option>
  37.     <option value="ln">辽宁</option>
  38.     <option value="sd">山东</option>
  39. </select>
  40. </td>
  41. </tr>
  42. <tr>
  43. <td>照片</td>
  44. <td><input type="file"  name="file"></td>
  45. </tr>
  46. <tr>
  47. <td>自我介绍</td>
  48. <td><textarea rows="3" cols="30" name="intro">这个家伙很懒......</textarea></td>
  49. </tr>
  50. <tr>
  51. <td><input type="reset" value="重置"></td>
  52. <td><input type="submit" value="提交"></td>
  53. </tr>
  54. </table>
  55. </form>
  56. </body>
  57. </html>