1、第一次使用HTML

<title>第一次使用HTML</title>
</head>
<body>
hello,HTML

2、文本处理

<title>文本处理</title>
</head>
<body>
<!-- 标题 -->
   <h1>一级标题</h1>
   <h2>二级标题</h2>
   <h3>三级标题</h3>
<!-- 段落 -->
<p> Hello,HTML</p>
<!-- 有序列表 -->
<ol>
       <li>one</li>
       <li>two</li>
       <li>three</li>
</ol>
<!-- 无序列表 -->
<ul>
      <li>one</li>
      <li>two</li>
      <li>three</li>
</ul>
<!-- 列表嵌套    -->
<!-- 有序嵌套无序 -->
<ol>
     <li>WEB概述</li>
<ul>
     <li>WEB三元素:浏览器、服务器、APP</li>
     <li>常用浏览器</li>
     <li>HTML工作原理</li>
</ul>
</ol>

3、分区元素

<title>分区元素</title>
</head>
<body>
     <h1>工具栏</h1>
<div>
     <h1>块元素</h1>
</div>
<div  style="color: red;">
       <p>第一段内容</p>
       <p>第二段内容</p>
       <p>第三段内容</p>
</div>
<div>
         <p>版权标识</p>
</div>

4、行内元素

<title>行内元素</title>
</head>
<body>
    <!-- span -->
    <p>
        经开第五大街28号<span   style="color: red;">通信产业园</span>B座5层
    </p>
    <!-- i/em -->
    <p>
         <i>南三环</i>十五大街26号<em>智游集团</em>A座2、3层
    </p>
    <!-- b/strong -->
    <p>
    <b>南三环</b>十五大街26号<strong>智游集团</strong>A座2、3层
    </p>
    <!-- del/u -->
    <p>
    <del>南三环</del>十五大街26号<u>智游集团</u>A座2、3层
    </p>
    <!-- 空格折叠 -->
    <p>河南省&nbsp;&nbsp;             南三环15大街26号&nbsp;&nbsp;
         智游集团A座2、3层
    </p>
    <!-- 换行br -->
    <p>
    河南省							南三环15大街26<br>  智游集团A座2、3层</br>
    </p>
    <!-- 实体替换   &lt大于号    &gt小于号-->
    <p>
    河南省&nbsp;&nbsp;南三环15大街26号&lt;智游集团&gt;A座2、3层

    </p>

5、图像和超链接

<title>图像和超链接</title>
</head>
<body>
   <!-- 连接到锚点 -->
   <a href="#button">去向底部</a>
   <!-- 图片 -->
  <p>
  <img    alt="图片挂了"  src="E:\本分\3.jpg"    width="500">
  </p>
  <!-- 超链接    target="_blank"另起一页   self自身-->
  <p><a   href="http://www.baidu.com"    target="_blank">百度一下</a></p>
   <p><a   href="http://www.baidu.com"    target="_self">百度一下</a></p>
   <!-- 虚拟一些数据,为了页面出现滚动条 -->
   <p>hello</p>
   <p>hello</p>
   <p>hello</p>
   <p>hello</p>
   <p>hello</p>
   <p>hello</p>
   <p>hello</p>
   <p>hello</p>
   <p>hello</p>
   <p>hello</p>
   <p>hello</p>
   <p>hello</p>
   <p>hello</p>
   <p>hello</p>
   <p>hello</p>
   <p>hello</p>
   <p>hello</p>
   <p>hello</p>
   <p>hello</p>
   <!-- 定义锚点 -->
   <p>
     <a  name="button">底部</a>
   </p>
   <!-- 文档顶部默认为锚点 -->
   <p><a   href="#">回到顶部</a></p>

6、表格

<title>表格</title>
</head>
<body>
   <!-- 表格 -->
   <table border="1"   >
        <tr>
            <td>第一行第一列</td>
            <td>第一行第二列</td>
        </tr>
        <tr>
            <td>第二行第一列</td>
            <td>第二行第二列</td>
        </tr>
   </table>
        <br>
   <!-- 跨行 -->
   <table   border="1"   width="20%">
   <tr>
        <td   rowspan="2">aaa</td>
        <td>bbb</td>
   </tr>
   <tr>
       <td>ddd</td>
   </tr>

   </table>
     <br>
     <br>

   <!--跨列 -->
   <table   border="1" width="20%">
   <tr>
   <td   colspan="2">aaa</td>
   </tr>
   <tr>
   <td>ccc</td>
   <td>ddd</td>
   </tr>
   </table>
   <!-- 行分组 -->
   <table   border="1"   width="30px">
   <thead>
   <tr>
         <th>编号</th><th>名称</th><th>金额</th>
   </tr>
   </thead>
   <tbody   style="color: red;">
   <tr>
       <td>001</td><td>鼠标</td><td>50</td>
   </tr>
   <tr>
       <td>002</td><td>键盘</td><td>100</td>
   </tr>
   </tbody>
   <tfoot>
   <tr>
   <td    colspan="2">合计</td><td>150</td>
   </tr>
   </table>

7、表单

<title>表单</title>
</head>
<body>
   <!-- 文本框、密码框、单选框、复选框、按钮、文件选择框、
        隐藏框、其他元素:标签、文本域、下拉选 -->
        <form >
           <h1>表单</h1>
           <!-- 文本框、密码框 -->
        <p>
              <label    for="user_name">账号:</label>
               <input    type="text"   id="user_name"/>
        </p>
         <p>
              <label    for="password">密码:</label>
               <input    type="password"   id="password"/>
        </p>
        <!-- 单选框 -->
        <p>
       			 <label  for="male">男</label>
       			 	<input    type="radio"   name="sex" id="male"/>
         		<label  for="female">女</label>
       			     <input    type="radio"   name="sex" id="female"/>
        </p>
      <!-- 复选框 -->
         <p>
      	  爱好:
      	    <label for="basketball">篮球</label>
               <input   type="checkbox"  name="favorites"   id="basketball">
            <label for="football">足球</label>
               <input   type="checkbox"  name="favorites"   id="football">
           <label for="pingpang">乒乓球</label>
               <input   type="checkbox"  name="favorites"   id="pingpang">
         </p>
         <!-- 按钮 -->
         <p>
         		<input   type="submit"   value="提交">
         		<input   type="reset"   value="重置">
        		 <input   type="button"   value="取消">
         </p>
         <!-- 隐藏域、文件选择框 -->
         <p>
         <input  type="hidden"    value="9">
         <label  type="file"   >上传:</label>
         <input  type="file"    id="file">
         </p>
         <!-- 文本域 -->
         <p>
         <label   for="address">地址</label>
         <textarea rows="5" cols="30"   id="address">
         cxfygvlhbjnkm;l'
         .'xdfycuvbuonipomp[l[f ;ml;fhg]]
         cxfrygvuhbjnm,.
         ]
         cfvbuonipmo[p,[]]

         </textarea>
         </p>
         <!-- 下拉选 -->
         <label   for="course">课程</label>
         <select>
         <option   value="1">Java</option>
         <option   value="2">PHP</option>
         <option   value="3">Python</option>
         </select>
        </form>

 

10-13 04:25