HTML教程-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_46331585/article/details/119155472

任务一

超链接(行标签)

a标签是超链接，用于实现从一个页面跳转到另外一个页面。

<body>
<a href="http://www.baidu.com" title="百度"target="_blank">百度</a><br />
<a href="index.html"title="返回首页">首页</a>
</body>
注意：
target="_self"   在本窗口打开链接
target="_blank"  在新的空白窗口打开链接
target="_parent" 在父窗口打开链接
target="_top"    在顶级父窗口打开链接 
target="name"   在名字为name的窗口打开链接
Href属性表示链接目标的地址
Title属性表示鼠标悬停在链接上后鼠标的提示文本

锚点链接

首先要定义锚点名称
链接锚点

<a name="mytop">我是顶部</a>
。
。
<a href="#mytop">到顶部</a>
注意:可跨界面，也可跨项目，但尽量用相对路径

任务二

插入图像标签(行标签)

img元素可定义一幅图像

插入图像

<body>
<img src="img/1.jpg">
</body>
注意:
src属性是图片的来源,src的值是图片文件的路径
图片格式：png jpg jpeg gif svg webp
.bmp 无压缩位图  不推荐使用
.jpg .jpeg  压缩图片 支持颜色多
.png  压缩图片 支持颜色多  支持背景透明
.gif  压缩图片 支持颜色256色 
.svg .webp 有损压缩 支持颜色多 大多数浏览器都支持

属性名称                  属性值               功能
width                    数字(像素)           图片的宽
height                   数字(像素)           图片的高
border                   数字(像素)           图片的边框
alt                      字符串               图片的替换文本(图片不存在时提示的文字)
title                    字符串               图片上的提示文本(鼠标悬停在图片上的提示文本)

任务三

视频与音频标签(行标签)

Audio标签用于播放音频,支持ogg格式,MP3格式,wav格式的音频.Controls表示设置播放器的控制面板.
Vudio标签表示用于播放视频,支持ogg格式,MP4格式.Controls表示设置播放器的控制面板,autoplay表示自动播放视频.
视频自动播放(需要静音(muted))
视频循环播放(loop)
能够设置视频加载时显示的图像(poster)

能够设置视频控制条(controls)

视频
<video src="video/2.mp4" controls="controls" loop="loop" width="400" height="300" autoplay="autoplay" muted="muted" ></video>
音频
<audio src="mp3/ji.mp3" controls="controls" loop="loop"></audio>

任务四

表格标签(块标签，父容器，布局)

表格在网页制作中主要的作用是用来描述具有二维结构的数据.包括的标签有<table>,<thead>,<tbody>,<tfoot>,<tr>,<td>,<th>
<thead>,<tbody>,<tfoot>,在实际开发中通常省略.
<td>和<th>都表示列,但<th>通常在页眉和页脚当中.<th>中的文字默认是粗体,<td>用在正文当中.
合并行用colspan标签.合并列用rowspan标签.

举例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>登录界面</title>
    </head>
    <body>
        <table border="1" width="800" height="200">
            <tr>
                <td>
                    <img src="img/title_login_2.png" />
                </td>
                <td colspan="3"></td>
                
            </tr>
            <tr>
                <td rowspan="3"></td>
                <td align="right">会员名:</td>
                <td>
                    <img src="img/user_login_name.gif" />
                </td>
                <td align="left">可包含（a-z、0-9以及下划线）</td>
            </tr>
            <tr>
                <td align="right">密码:</td>
                <td>
                    <img src="img/user_login_password.gif"  />
                </td>
                <td align="left">(至少包含6个字符)</td>
            </tr>
            <tr>
                <td colspan="3">
                    <img src="img/login.gif">
                </td>
                
            </tr>
        </table>
    </body>
</html>

任务五

表单标签(块标签)

能够使用表单实现数据的输入和编辑表单可以把客户端数据提交到服务器端.

表单是用<form>来定义的

<form name="表单名称"method="表单提交方式"atcion="处理表单的文件"></form>
注意
get:通过请求头发送数据
优点:数据量小,提交速度块(最多有2k(即2048个字节)的数据)
缺点:不安全,数据类型是能是字符串,发送数据大小有限制.
post:通过请求体发送数据
优点:相对安全,数据类型不受限制.(图片image,文件fil,音频视频等)发送数据大小理论上没限制建议别太大.
缺点:对于get速度相对较慢(在数据量大的时候)

表单元素

属性名称          作用                                   所属版本
<input>          根据type属性值的不同,表示多种输入形式        HTML4
<textarea>        元素表示多行文本框(文本域rows控制行 cols控制列) HTML4
<select>          表示下拉框,下拉框的条目用<option>表示      HTML4                 
<button>          表示按钮                                HTML5
<datalist>         表示搜索自动补齐列表                     HTML5

<input>表示表单元素,type是非常重要的属性,type不同的值表现为不同的输入形式,如下:
- text 单行文本框
- password 密码框
- radio 单选
- checkbox 多选
- submit 提交按钮
- rest 复位按钮
- button 按钮
- image 图像按钮
- hidden隐藏域
- file文件域
- email限制用户输入emial类型
- url限制用户输入url类型
- date限制用户输入日期类型
- time限制用户输入时间类型
- month限制用户输入月类型
- week限制用户输入周类型
- range限制用户输入滑动条类型
- search产生一个搜索意义表单
- color产生一个颜色选择表单

type不同值的练习:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>程序员信息注册</title>
    </head>
    <body>
    <form>
        <table border="1" width="500" height="700" align="center">
            <tr>
                <th colspan="2" height="100" align="center" style="background-color: lightblue; font: '微软雅黑'; font-size: large;">程序员信息注册</th>
            </tr>
            <tr>
                <td width="200" height="50" align="center">姓名</td>
                <td>
                    <input type="text" placeholder="请输入您的姓名" style="width: 250px; height: 30px;" />
                </td>
            </tr>
            <tr>
                <td width="200" height="50" align="center">账号</td>
                <td>
                    <input type="text" placeholder="请输入您的账号" style="width: 250px; height: 30px;" />
                </td>
            </tr>
            <tr>
                <td width="200" height="50" align="center">密码</td>
                <td>
                    <input type="password" placeholder="请输入你的账号密码" style="width: 250px; height: 30px; /">
                </td>
            </tr>
            <tr>
                <td width="200" height="50" align="center" align="center">性别</td>
                <td>
                    男<input type="radio" value="男" name="sex" /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    女<input type="radio" value="女" name="sex" />
                </td>
            </tr>
            <tr>
                <td width="200" height="50" align="center" align="center">掌握的编程语言</td>
                <td>
                    C++<input type="checkbox" value="C++" name="language"> &nbsp;&nbsp;
                    java<input type="checkbox" value="java" name="language">&nbsp;&nbsp;
                    python<input type="checkbox" value="python" name="language">&nbsp;&nbsp;
                </td>
            </tr>
            <tr>
                <td width="200" height="50" align="center" align="center">出生年月</td>
                <td>
                    <input type="date" value="2000-01-01" name="birthday" style="width:250px;height: 30px;"/>
                </td>
            </tr>

            <tr>
                <td width="200" height="50" align="center" align="center">喜好颜色</td>
                <td>
                    <input type="color" value="color" name="lovecolor" style="width:255px;height: 33px;" />
                </td>
            </tr>
            <tr>
                <td width="200" height="50" align="center" align="center">政治面貌</td>
                <td>
                    <select name="identity">
                        <option value="dangyuan"> 党员 </option>
                        <option value="yubeidangyuan"> 预备党员 </option>
                        <option value="gongqingtuanyuan"> 共青团员 </option>
                        <option value="qunzhong"> 群众 </option>
                    </select>
                </td>
            </tr>
            <tr>
                <td align="center">备注</td>
                <td>
                    <textarea rows="6" cols="30"></textarea>
                </td>
            </tr>
            <tr>
                <td colspan="2" width="200" height="50" align="center">
                <input type="submit" value="注册" />
                <input type="reset" value="重置" />
                </td>
            </tr>
        </table>
    </form>
    </body>
</html>