一、超链接
- 1、超链接的使用
- 2、超链接样式
二、ul列表
- 1、列表的使用
- 2、列表样式
三、添加视频、音频
- 1、video标签
- 2、音频
四、表单
- 1、创建表单
- 2、表单元素
  - 1）、标签
  - 2）、标签</a></li></ul></li><li><a class="toc-level-2" href="#epdwrx" level="2" title="3、表单元素样式">3、表单元素样式</a></li><li><a class="toc-level-2" href="#7ixy7v" level="2" title="4、表单效果例题">4、表单效果例题</a><ul>

一、超链接

1、超链接的使用

基本语法：
< a href=”访问地址”>文字内容
功能：
标签定义超链接，它用于从一个页面连接到另一个页面

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
</head>
<body>
    <a href="https://www.baidu.com" target="_blank">百度</a>
    <a href="https://www.sina.com.cn" target="_blank">新浪</a>
</body>
</html>

2021.09.29（超链接、ul列表、添加视频、表单） - 图1
代码讲解：

值	描述
_blank	在新窗口中打开被链接文档。
_self	默认。在相同的框架中打开被链接文档。
_parent	在父框架集中打开被链接文档。
_top	在整个窗口中打开被链接文档。
framename	在指定的框架中打开被链接文档。

2、超链接样式

基本语法：
a{
样式名：值；
}
功能：
设置超链接点击前，点击后的样式。
例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <style type="text/css">
        a:link {
              color:red;
              text-decoration:underline;
            }

            a:visited {
              color:green;
              text-decoration:none;
            }

            a:hover {
              color:black;
              text-decoration:none;
            }

            a:active {
              color: white;
              text-decoration:none;
            }
    </style>
</head>
<body>
    <a href="https://www.baidu.com" target="_blank">百度</a>
    <a href="https://www.sina.com.cn" target="_blank">新浪</a>
</body>
</html>

代码讲解

二、ul列表

1、列表的使用

基本语法：

功能：

标签一起使用，创建无序列表。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>

    <ul style="line-height:30px;background:lightgreen;" type="none">
        <li>31省份上半年GDP:16地增速超全国,东北经济回升</li>
        <li>嫦娥四号月球车全球征名 探测器公布外观设计构型</li>
        <li>国办通知:年内流量资费、家庭宽带价格降费30%</li>
        <li>媒体:别动不动就喊"妨害公务" 先看看公务合不合法</li>
        <li>北京联合七省市启动大运河文化之旅 挖掘运河故事</li>
    </ul>

</body>
</html>

2021.09.29（超链接、ul列表、添加视频、表单） - 图4
代码讲解：

2、列表样式

ul{
样式名:值;
}
li{
样式名:值;
}
功能：设置列表样式。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
    ul{
        list-style-type:none;
         margin:0px auto;
        padding:0px;
        background-color:#000000;
        color:#ffffff;
        display:flex;
        justify-content:center;    
    }
    li{
         width:200px;
        line-height:50px;
        text-align:center;

        background-size:100% 100%;
      }
    ul li:nth-of-type(6){
        background-image:url("http://www.yyfun001.com/res/htmlclassics/full/images/136.jpg");
    }
    ul li:not(#first){
        background-color:green;
      }
</style>
</head>
<body>

    <ul>
        <li id="first">首页</li>
        <li>国内新闻</li>
        <li>国际新闻</li>
        <li>体育新闻</li>
        <li>财经新闻</li>
        <li>娱乐新闻</li>
    </ul>

</body>
</html>

2021.09.29（超链接、ul列表、添加视频、表单） - 图6
代码讲解：

样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
        <li>列表项4</li>
        <li>列表项5</li>
    </ul>
    <hr>
    <!-- 小黑点 -->
    <ul type='disc'>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
        <li>列表项4</li>
        <li>列表项5</li>
    </ul>
    <hr>
    <!-- 空心圆 -->
    <ul type='circle'>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
        <li>列表项4</li>
        <li>列表项5</li>
    </ul>
    <hr>
    <!-- 小方块 -->
    <ul type='square'>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
        <li>列表项4</li>
        <li>列表项5</li>
    </ul>
    <hr>
    <!-- 无列表样式 -->
    <ul type='none'>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
        <li>列表项4</li>
        <li>列表项5</li>
    </ul>
    <hr>
    <ol>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
        <li>列表项4</li>
        <li>列表项5</li>
    </ol>
</body>
</html>

效果：

三、添加视频、音频

1、video标签

基本语法：

功能

标签定义视频。

<!DOCTYPE html>
<html>
<head>
<title>复仇者联盟</title>
<meta charset="utf-8" />
<style type="text/css">
      video{
          width:1000px;
          height:420px;
          margin:100px auto 0;
          display:block;
      }
    </style>
</head>
<body>

<video src="http://www.yyfun001.com/res/htmlclassics/full/video/avenger.mp4"
             controls="controls"
             poster="http://www.yyfun001.com/res/htmlclassics/full/images/video_bg.png">
</video>

</body>
</html>

2021.09.29（超链接、ul列表、添加视频、表单） - 图11
代码讲解：

2、音频

<audio controls src="路径" height="100" width="100">

四、表单

1、创建表单

基本元素：

功能：

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
</head>
<body>
    <form action="http://www.baidu.com" method="get">
        姓名：<input type="text" value="小李" /><br />
        密码：<input type="password" value="123123" /><br />

    </form>
</body>
</html>

2021.09.29（超链接、ul列表、添加视频、表单） - 图13
代码讲解：

2、表单元素

1）、标签

（1）、标签

基本语法：

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
</head>
<body>
    姓名：<input type="text" value="小李" />
</body>
</html>

2021.09.29（超链接、ul列表、添加视频、表单） - 图15
代码讲解：

（2）、输入类型：password

基本语法：

功能：
定义密码字段。该字段中的字符被掩码。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
</head>
<body>
    密码：<input type="password" value="123456" />
</body>
</html>

2021.09.29（超链接、ul列表、添加视频、表单） - 图17
代码讲解：

（3）、单选按钮radio

基本语法：
男
女
功能：
定义单选按钮。单选按钮允许用户选取给定数目的选择中的一个选项。
注：单选按钮 radio，必须有name 属性并且 name 必须保持一致。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
</head>
<body>
    性 别：
    <input type="radio" name="sex" checked="checked" />男
    <input type="radio" name="sex" />女
</body>
</html>

2021.09.29（超链接、ul列表、添加视频、表单） - 图19
代码讲解：

（4）、复选框checkbox

基本语法：

功能：
定义复选框。复选框允许用户在一定数目的选择中选取一个或多个选项。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
</head>
<body>
    爱好：
    <input type="checkbox" name="hobbey" checked="checked" />足球
    <input type="checkbox" name="hobbey" />篮球
    <input type="checkbox" name="hobbey" />羽毛球
    <input type="checkbox" name="hobbey" checked="checked" />乒乓球
</body>
</html>

2021.09.29（超链接、ul列表、添加视频、表单） - 图21
代码讲解：

（5）、点击按钮button

基本语法：

功能：
定义可点击的按钮，但没有任何行为。button 类型常用于在用户点击。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
</head>
<body>
    点击按钮：
    <input type="button" value="按钮" />
</body>
</html>

2021.09.29（超链接、ul列表、添加视频、表单） - 图23
代码讲解：

（6）、重置按钮reset

基本语法：

功能：
定义重置按钮。重置按钮会清除表单中的所有数据。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
</head>
<body>
    <form action="" method="get">
        姓名：<input type="text" value="小李" /><br />
        点击按钮：<input type="reset" />
    </form>

</body>
</html>

2021.09.29（超链接、ul列表、添加视频、表单） - 图25
代码讲解：

（7）、提交按钮subimit

基本语法：

功能：
定义提交按钮。提交按钮用于向服务器发送表单数据。数据会发送到表单的 action 属性中指定的页面。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
</head>
<body>
    <form action="" method="get">
        姓名：<input type="text" value="小李" /><br />
        点击按钮：<input type="submit" />
    </form>

</body>
</html>

2021.09.29（超链接、ul列表、添加视频、表单） - 图27
代码讲解：

（8）、文件上传file

基本语法：

功能：
用于文件上传

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
</head>
<body>
    头像：<input type="file" name="shangchuan" />

</body>
</html>

2021.09.29（超链接、ul列表、添加视频、表单） - 图29
代码讲解：

2）、

功能：
元素用来创建下拉列表。
元素中的

2021.09.29（超链接、ul列表、添加视频、表单）