笔记

超链接a标签

  1. <!-- 默认效果 -->
  2. <a href="http://www.baidu.com" >百度</a>
  3.    <!-- 指定在当前窗口打开指定页面 -->
  4. <a href="http://www.baidu.com" target="_blank">百度</a>
  5. <!-- 指定在新窗口打开指定页面 -->
  6. <a href="http://www.baidu.com" target="_self">百度</a>
  7.    <!-- 打开本地页面 -->
  8. <a href="../test.html"></a>

超链接a标签的锚点

  1.         <p id="c0">
  2.         <a href="#c1">第一章</a> <br>
  3.         <a href="#c2">第二章</a> <br>
  4.         <a href="#c3">第三章</a> <br>
  5.     </p>
  7.     <hr>
  8.     <div id="c1">第1章内容</div>
  9.     <div id="c2">第2章内容</div>
  10.     <div id="c3">第3章内容</div>
  11.     <a href="#c0">回到顶部</a> <br>

超链接a标签点击前后样式

  1. <style type="text/css">
  2. /* a:link定义正常链接的样式 */
  3.         a:link {
  4.               color:red;
  5.               text-decoration:underline;
  6.             }
  7.         /* a:visited 定义已访问过链接的样式 */
  8.         a:visited {
  9.             color:green;
  10.             text-decoration:none;
  11.         }
  12.         /* a:hover 定义鼠标悬浮在链接上时的样式 */
  13.         a:hover {
  14.             color:black;
  15.             text-decoration:none;
  16.         }
  17.         /* a:active 定义鼠标点击链接时的样式 */
  18.         a:active {
  19.             color: blue;
  20.             text-decoration:none;
  21.         }
  22.   </style>

列表

  1. <!--定义无序列表-->
  2.         <ul>
  3.         <li>列表项1</li>
  4.         <li>列表项2</li>
  5.         <li>列表项3</li>
  6.         <li>列表项4</li>
  7.         <li>列表项5</li>
  8.     </ul>
  9.     <hr>
  10.     <!-- 小黑点 -->
  11.     <ul type='disc'>
  12.         <li>列表项1</li>
  13.         <li>列表项2</li>
  14.         <li>列表项3</li>
  15.         <li>列表项4</li>
  16.         <li>列表项5</li>
  17.     </ul>
  18.     <hr>
  19.     <!-- 空心圆 -->
  20.     <ul type='circle'>
  21.         <li>列表项1</li>
  22.         <li>列表项2</li>
  23.         <li>列表项3</li>
  24.         <li>列表项4</li>
  25.         <li>列表项5</li>
  26.     </ul>
  27.     <hr>
  28.     <!-- 小方块 -->
  29.     <ul type='square'>
  30.         <li>列表项1</li>
  31.         <li>列表项2</li>
  32.         <li>列表项3</li>
  33.         <li>列表项4</li>
  34.         <li>列表项5</li>
  35.     </ul>
  36.     <hr>
  37.     <!-- 无列表样式 -->
  38.     <ul type='none'>
  39.         <li>列表项1</li>
  40.         <li>列表项2</li>
  41.         <li>列表项3</li>
  42.         <li>列表项4</li>
  43.         <li>列表项5</li>
  44.     </ul>
  45.     <hr>
  46. <!--有序列表-->
  47.     <ol>
  48.         <li>列表项1</li>
  49.         <li>列表项2</li>
  50.         <li>列表项3</li>
  51.         <li>列表项4</li>
  52.         <li>列表项5</li>
  53.     </ol>

音频标签

src 要播放的视频的 URL。
controls 向用户显示控件，比如播放按钮。
poster 设置视频预览图。
autoplay 自动播放
muted 静音状态
preload 预缓存

  1. <video     src="http://www.yyfun001.com/res/htmlclassics/full/video/avenger.mp4"
  2.              controls="controls"
  3.              poster="http://www.yyfun001.com/res/htmlclassics/full/images/video_bg.png"
  4.              autoplay="autoplay"
  5.              muted="muted"
  6.              preload="auto"
  7.              width="500px"
  8.              height="400px"
  9.              >
  10. </video>

表单

  1.  <div id="main">
  2.         <form action="http://www.baidu.com" method="GET">
  3.             <h1>注册</h1>
  4.             <label for="name">帐号:</label>
  5.             <input type="text" id="name" name="name" placeholder="请输入帐号">
  6.             <br>
  7.             <label for="passwd">密码:</label>
  8.             <input type="password" id="passwd" placeholder="请输入密码">
  9.             <br>
  10.             <label for="gender">性别:</label>
  11.             <input type="radio" id="gender" name="gender" value="1">男
  12.             <input type="radio" id="gender" name="gender" value="0">女
  13.             <br>
  14.             <label for="hobby">爱好:</label>
  15.             <input type="checkbox"  id="hobby" name="hobby" value="zq">足球
  16.             <input type="checkbox"  id="hobby" name="hobby" value="lq">篮球
  17.             <input type="checkbox"  id="hobby" name="hobby" value="pq">排球
  18.             <input type="checkbox"  id="hobby" name="hobby" value="qq">铅球
  19.             <br>
  20.             <label for="address">工作地点:</label>
  21.             <select id="address" name="address">
  22.                 <option value="bj">北京</option>
  23.                 <option value="sh" selected>上海</option>
  24.                 <option value="gz">广州</option>
  25.                 <option value="sz">深圳</option>
  26.             </select>
  27.             <br>
  28.             <label for="mail">邮箱:</label>
  29.             <input type="email" name="mail" id="mail">
  30.             <br>
  31.             <label for="photo">照片:</label>
  32.             <input type="file" name="photo" id="photo">
  33.             <br>
  34.             <label for="summary" style="margin-top: 0px;">个人简介:</label>
  35.             <br>
  36.             <textarea name="summary" id="summary" cols="30" rows="5"></textarea>
  37.             <br>
  38.             <input type="submit" value="提交">
  39.             <input type="reset" value="重置">
  40.         </form>
  41.     </div>

标签用于为用户输入创建 HTML 表单。表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。表单用于向服务器传输数据。

使用

添加一个表单，表单用于向服务器传输数据。
action 属性
规定当提交表单时向何处发送表单数据。
method 属性
规定用于发送 表番 的 HTTP 方法。

input标签 定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。

type 属性
type 属性规定 input 元素的类型
value 属性
规定 input 元素中的默认值。
name 属性
规定 input 元素的名称，
用于对提交到服务器后的表单数据进行标识。
type属性常用类型
text添加一个文本输入框
password添加一个密码输入框
radio义单选按钮。单选按钮允许用户选取给定数目的选择中的一个选项。
注：单选按钮 radio，必须有name 属性并且 name 必须保持一致。
checked属性规定此 input 元素首次加载时默认选中。
checkbox定义复选框。复选框允许用户在一定数目的选择中选取一个或多个选项。
button定义可点击的按钮，但没有任何行为。button 类型常用于在用户点击。
address定义一个输入地址的文本框
mail 定义一个输入邮箱格式的输入框
file 用于文件上传。
submit定义提交按钮。提交按钮用于向服务器发送表单数据。数据会发送到表单的 action 属性中指定的页面。
reset定义重置按钮。重置按钮会清除表单中的所有数据。.

添加一个文本输入框
使用 标签添加文本输入框。
cols 属性
规定文本区域内可见的宽度。
rows 属性
规定文本区域内可见的行数。

添加一个下拉框