1.简介

html：超文本标记语言，俗称为静态页面

1.1标记

  1. <标签名></标签名>
  2. <标签名 属性="属性值">
  3. <标签名/>

2.安装IDE

IDE：集成开发工具
java IDE：idea,eclipse,myeclipse
html IDE：HBuuilder,Dreamware

3.创建第一个html

  1. <!-- 
  2.     添加注释：
  3.     ctrl+shift+/
  4.  -->
  6.  <!-- 定义当前html的版本 版本为：5 -->
  7. <!DOCTYPE html>
  9.  <!-- html标签：页面顶级标签 -->
  10. <html>
  12.     <!-- head表示头标签
  13.         1. 定义元数据 meta    告诉浏览器如何解析此html
  14.         2. 引入html需要的静态资源
  15.             2.1 css,js,image
  16.                 2.1.1 link 引入css
  17.                 2.1.2 script 引入js
  18.         3. 定义当前页面的信息标签 title
  19.             3.1 title定义页面的名字
  20.      -->
  22.     <head>
  23.         <meta charset="utf-8">
  24.         <title>这是我的第一个html</title>
  25.     </head>
  27.     <!-- 页面上看的到东西，都定义在body中 -->
  28.     <body>
  29.         这是我的第一个html
  30.     </body>
  32. </html>

4.html标签

4.1标题标签

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         <!-- 
  9.             h1-6
  10.             1. 越来越小
  11.             2. 自动换行
  12.          -->
  13.         <h1>悯农</h1>
  14.         <h2>悯农</h2>
  15.         <h3>悯农</h3>
  16.         <h4>悯农</h4>
  17.         <h5>悯农</h5>
  18.         <h6>悯农</h6>
  19.         <h7>悯农</h7>
  20.         窗前明月光
  21.     </body>
  22. </html>

4.2段落标签

image.png

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  9.         <!-- 
  10.             p   段落标签
  11.             标签内的内容看做是一个段落，会自动换行
  12.          -->
  13.         <h3>登高</h3>
  14.         <p>风急天高猿啸哀，</p>
  15.         <p>渚清沙白鸟飞回。</p>
  16.         <p>无边落木萧萧下，</p>
  17.         <p>不尽长江滚滚来。</p>
  19.     </body>
  20. </html>

4.3换行标签

image.png

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         <!-- 
  9.             br  换行符
  10.          -->
  11.         <h3>登高</h3>
  12.         风急天高猿啸哀，<br>
  13.         渚清沙白鸟飞回。<br/>
  14.         无边落木萧萧下，<br>
  15.         不尽长江滚滚来。<br>
  16.     </body>
  17. </html>

4.4水平线标签

image.png

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  9.         <!-- 
  10.             <hr/> 横线
  11.                 width : 宽度   px
  12.                 align : 位置  
  13.                     left
  14.                     center(默认)
  15.                     right
  16.          -->
  17.         <h3>登高</h3>
  18.         <hr width="200px" align="left"/>
  19.         风急天高猿啸哀，<br>
  20.         渚清沙白鸟飞回。<br/>
  21.         无边落木萧萧下，<br>
  22.         不尽长江滚滚来。<br>
  23.     </body>
  24. </html>

4.5div标签

image.png

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         <!-- 
  9.             div ： 块级元素
  10.                 1. 自动换行
  11.                 2. 本身没有任何样式
  12.                 3. 会把内部的元素的看做一个整体，可以统一的进行操作
  13.                     3.1 比如添加样式
  14.                  -->
  15.         <h3>静夜思</h3>
  16.         <hr width = "200px" align = "left"/>
  17.         <div style = "color:red;">
  18.             <p>床前明月光，</p>
  19.             <p>疑是地上霜。</p>
  20.             <p>举头望明月，</p>
  21.             <p>低头思故乡。</p>
  22.         </div>
  23.     </body>
  24. </html>

4.6行内元素

image.png
image.png

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.             <!-- 
  9.                     行内元素
  10.                         1. 添加了不会换行    
  11.                     span(重点)
  12.                     b 粗体标签
  13.                     strong 加粗
  14.                     em    强调字体
  15.                  -->
  16.         <p>
  17.         <span style="color: red;">李白</span>乘舟将欲行
  18.         </p>
  20.         <p>
  21.         <b>李白</b>乘舟将欲行
  22.         </p>
  24.         <p>
  25.         <strong>李白</strong>乘舟将欲行
  26.         </p>
  28.         <p>
  29.         <em>李白</em>乘舟将欲行
  30.         </p>
  32.         <p>
  33.         Fe<sub>2</sub>O<sub>4</sub>
  34.         </p>
  35.     </body>
  36. </html>

4.7字体标签

image.png

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         <!-- 
  9.                     font : 字体标签
  10.                         size : 大小   1-7
  11.                         color : 颜色
  12.                             直接定义颜色名
  13.                             使用16进制表示颜色
  14.                             使用三种基色的搭配表示
  15.                         face : 字体
  16.                             参照doc文档
  17.                  -->
  19.                 <font size="8" color="blue" face="宋体">李白</font>（701-761）
  20.                 <font size="8" color="blue" face="楷体">杜甫</font>（720-771）
  21.     </body>
  22. </html>

4.8列表标签

image.png
image.png
无序列表和有序列表可以相互嵌套使用

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  9.         <!-- 
  10.             ul ： 无序列表
  11.                 li : 定义列表每一项
  13.             type:
  14.                 circle 空心
  15.                 disc   实心
  16.                 square 方块
  17.          -->
  18.         无序列表
  19.         <ul type="square">
  20.             <li>java</li>
  21.             <li>html</li>
  22.             <li>css</li>
  23.             <li>javascript</li>
  24.         </ul>
  25.         <hr >
  27.         <!-- 
  28.             ol : 有序
  29.                 type: 1 a A i I
  30.          -->
  31.         有序列表
  32.         <ol type="I">
  33.             <li>java</li>
  34.             <li>html</li>
  35.             <li>css</li>
  36.             <li>javascript</li>
  37.         </ol>    
  39.         <hr >    
  40.         <ul>
  41.             <li>手机
  42.                 <ul>
  43.                     <li>华为</li>
  44.                     <li>小米</li>
  45.                     <li>OPPO</li>
  46.                     <li>VIVO</li>
  47.                 </ul>
  48.             </li>    
  49.             <li>电视</li>
  50.             <li>
  51.                 汽车
  52.                 <ul>
  53.                     <li>蔚来</li>
  54.                     <li>小鹏</li>
  55.                     <li>理想</li>
  56.                     <li>比亚迪</li>
  57.                 </ul>
  58.             </li>
  59.             <li>飞机</li>
  60.         </ul>
  61.     </body>
  62. </html>

4.9图片标签

image.png

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         <!-- 
  9.             img ： 图片标签
  10.                 src : 图片的路径
  11.                     路径分为绝对路径，相对路径
  12.                     相对路径：
  13.                         http://127.0.0.1:8848/html01/demo10-图片标签.html
  14.                         http://127.0.0.1:8848/html01/   +   img/李白.png
  15.                         http://127.0.0.1:8848/html01/img/李白.png
  16.                     绝对路径
  17.                         路径如果以"/"开头则为绝对路径
  18.                             如果写绝对路径，一定要把项目名加上
  19.                             http://ip：port/绝对路径
  20.                         http://127.0.0.1:8848/html01/img/李白.png
  21.                 width:宽
  22.                 height： 高
  23.                     一般建议只定义其中一个，另外一个属性会自适应
  24.          -->
  26.         <!-- <img src="/html01/img/李白.png" /> -->
  28.         <img src="img/李白.png" width="400px"/>
  29.     </body>
  30. </html>

4.10超链接标签

image.png

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         <a href="https://www.baidu.com/" target="_blank">百度</a>
  10.         <a href="http://127.0.0.1:8848/html01/demo11-02.html">demo11-02绝对路径</a>
  12.         <a href="demo11-02.html">demo11-02相对路径</a>
  14.         <a href="/html01/demo11-02.html">demo11-02绝对路径</a>
  15.     </body>
  16. </html>

4.11表格标签

image.png
image.png

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         <!-- 
  9.             1. 一个表格就是一个table
  10.             2. 一行就是一个tr
  11.             3. 一列就是一个td
  13.             border: 边框
  14.             width：宽度
  15.             align：表格位置 left center right
  16.          -->
  17.         <table border="1px" width="300px" align="center" >
  18.             <tr>
  19.                 <td>姓名</td>
  20.                 <td>年龄</td>
  21.                 <td>性别</td>            
  22.             </tr>
  23.             <tr>
  24.                 <td>曹操</td>
  25.                 <td>25</td>
  26.                 <td>男</td>
  27.             </tr>
  28.             <tr>
  29.                 <td>吕布</td>
  30.                 <td>22</td>
  31.                 <td>男</td>
  32.             </tr>
  33.             <tr>
  34.                 <td>刘备</td>
  35.                 <td>28</td>
  36.                 <td>男</td>
  37.             </tr>
  38.         </table>
  39.     </body>
  40. </html>

4.11.1合并表格

image.png

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         <!-- 
  9.              colspan: 合并列
  10.                 说白了，就是该单元格占几个列的位置（横跨）
  11.              rowspan：合并和行
  12.                 说白了，就是该单元格占几个行的位置（横跨）
  13.              -->
  14.         <table border="1px" style="text-align: center;" width="300px" height="300px" align="center">
  15.             <tr>
  16.                 <td colspan="3">课程表</td>
  17.                 <!-- <td></td>
  18.                 <td></td> -->
  19.             </tr>
  20.             <tr>
  21.                 <td rowspan="3">周一</td>
  22.                 <td>上午</td>
  23.                 <td>语文</td>
  24.             </tr>
  25.             <tr>
  26.                 <!-- <td></td> -->
  27.                 <td>下午</td>
  28.                 <td>数学</td>
  29.             </tr>
  30.             <tr>
  31.                 <!-- <td></td> -->
  32.                 <td>晚上</td>
  33.                 <td>英语</td>
  34.             </tr>
  35.             <tr>
  36.                 <td rowspan="3">周二</td>
  37.                 <td>上午</td>
  38.                 <td>语文</td>
  39.             </tr>
  40.             <tr>
  41.                 <!-- <td></td> -->
  42.                 <td>下午</td>
  43.                 <td>数学</td>
  44.             </tr>
  45.             <tr>
  46.                 <!-- <td></td> -->
  47.                 <td>晚上</td>
  48.                 <td>英语</td>
  49.             </tr>
  50.         </table>
  51.     </body>
  52. </html>

4.12表单

image.png
image.png
image.png
image.png

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         <!-- 
  9.             一个表单就是一个form
  10.                 1. 用来提交数据
  11.                     姓名，用户名,验证码
  12.                     密码
  13.                     性别
  14.                     爱好
  15.                     家乡/收件地址
  16.                     自我介绍
  17.                     提交按钮
  18.                 2. action 表单提交的路径   （就是发起一个请求）
  19.                    method  请求方式
  21.          -->
  23.          <form action="" method="">
  24.              姓名：<input type="text"/>   <br />
  25.              用户名：<input type="text"/>   <br />
  27.              密码：<input type="password"/>   <br />
  29.              性别：<input type="radio" name="gender"/>男   
  30.                   <input type="radio" name="gender"/>女   <br />
  32.              等级：<input type="radio" name="lever"/>vip
  33.                   <input type="radio" name="lever"/>vvip   <br />
  35.              爱好：<input type="checkbox" /> 击剑
  36.                   <input type="checkbox" /> 铅球
  37.                   <input type="checkbox" /> 游泳   <br />
  39.              家乡：
  40.                 <select>
  41.                     <option>请选择</option>
  42.                     <option>安徽省</option>
  43.                     <option>台湾省</option>
  44.                 </select>
  45.                                                      <br />
  46.             个人简介：
  47.                 <textarea rows="4" cols="19"></textarea>
  48.                                                         <br />
  49.             出生日期：
  50.             <input type="datetime-local" />    <br />
  52.             <input type="submit" />
  53.          </form>
  54.     </body>
  55. </html>
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         <!-- 
  9.             1. 输入框显示的值，是通过value属性定义
  10.             2. 如果把输入框type定义为hidden,该输入框则隐藏
  11.                 2.1 是隐藏，不是没有了，还有，只是金屋藏娇起来了
  12.             3. 要为单选，多选，下拉框每个选项定义value属性值
  13.                 3.1 选择了那个，得到的就是他的value属性值
  14.                 3.2 下拉选择的第一个请选择，value值一定定义为空字符串
  15.          -->
  17.          <form action="xxx" method="">
  19.              id： <input type="hidden" value="9527"/>   <br />
  21.              姓名：<input type="text" value="jackma"/>   <br />
  23.              用户名：<input type="text"/>   <br />
  25.              密码：<input type="password" value="123"/>   <br />
  27.              性别：<input type="radio" name="gender" value="1"/>男   
  28.                   <input type="radio" name="gender" value="0"/>女   <br />
  30.              等级：<input type="radio" name="lever" />vip
  31.                   <input type="radio" name="lever"/>vvip   <br />
  33.              爱好：<input type="checkbox" value="jj"/> 击剑
  34.                   <input type="checkbox" value="qq"/> 铅球
  35.                   <input type="checkbox" value="yy"/> 游泳   <br />
  37.              家乡：
  38.                 <select>
  39.                     <option value="">请选择</option>
  40.                     <option value="ah">安徽省</option>
  41.                     <option value="tw">台湾省</option>
  42.                 </select>
  43.                                                      <br />
  44.             个人简介：
  45.                 <textarea rows="4" cols="19"></textarea>
  46.                                                         <br />
  47.             出生日期：
  48.             <input type="datetime-local" />    <br />
  50.             <input type="submit" />
  51.          </form>
  52.     </body>
  53. </html>

4.13特殊字符

image.png

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         <!-- 
  9.             &nbsp;    空格
  10.             &gt;      大于号
  11.             &lt;      小于号
  12.          -->
  13.         床&nbsp;&nbsp;&nbsp;&nbsp;前明月光 <br>
  14.         &gt; <br>
  15.         &lt;
  16.     </body>
  17. </html>