HTML5教程

前端---HTML复习

本文主要是介绍前端---HTML复习，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

HTML复习

  • HTML
    • 初识HTML
    • HTML基本结构
    • 网络基本标签
    • 图像标签
    • 超链接标签及其应用
    • 行内元素和块元素
    • 列表标签
    • 表格标签
    • 媒体元素
    • HTML页面分析
    • iframe内联框架
    • 表单基本控件
    • 表单应用
    • 表单初级验证

HTML

初识HTML

  • 超文本标记语言（Hyper Text Markup Language）
  • 超文本包括文字、图片、音频、视频、动画等
  • W3C标准（万维网联盟）
    • 结构化标准语言（HTML、XML）
    • 表现标准语言（CSS）
    • 行为标准（DOM、ECMAScript）

HTML基本结构

<!--告诉浏览器使用的规范 -->
<!DOCTYPE html>
<html lang="en">
<!--head标签代表网页头部-->
<head>
    <!--meta标签描述性标签，描述网站信息   -->
    <!--meta标签一般用来做搜索引擎优化SEO-->
    <meta charset="UTF-8">
    <meta name="keywords" content="狂神说JAVA，西部开源">
    <meta name="description" content="来这里可以学习Java">
    <!-- title标签代表网页标题-->
    <title>Title</title>
</head>
<!--body标签代表网页主体-->
<body>
    hello
</body>
</html>

网络基本标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签</title>
</head>
<body>
    
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>

<!--段落标签-->
<p>哈哈哈哈</p>
<p>卷起来</p>

<!--换行标签-->
哈哈哈哈<br/>卷起来

<!--水平线标签-->
<hr/>
哈哈哈哈卷起来

<!--字体样式标签-->
粗体：<strong>哈哈哈哈卷起来</strong>
斜体：<em>哈哈哈哈卷起来</em>

<!--特殊符号标签：&...-->
空格：&nbsp;
大于号：&gt;
小于号：&lt;
版权符号：&copy;
    
</body>
</html>

图像标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签</title>
</head>
<body>
<!--img标签
src：图片地址
alt：图片描述
title：悬停文字
width：宽度
height：高度
-->
<img src="../resources/image/图书馆.jpg" alt="图书馆照片">
<!-- ../代表上一级目录，使用相对地址 -->
    
</body>
</html>

超链接标签及其应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>
<a name="top">顶部</a>

<!--页面间链接-->
<!--a标签
href：跳转页面链接地址
target：表示窗口在哪里打开
    _blank：在新窗口打开
    _self：在本窗口打开
-->
<a href="http://www.baidu.com">可文字可图片</a>

<!--锚链接
    1.需要一个锚标记：<a name="top">顶部</a>
    2.跳转到标记：<a href="#top">回到顶部</a>
-->
<a href="#top">回到顶部</a>

<!--功能性标签
    邮件链接：mailto;
    QQ链接
-->
<a href="mailto:949849363@qq.com">点击联系我</a>
</body>
</html>

行内元素和块元素

  • 块元素：无论内容多少，该元素只占一行，如p标签
  • 行内元素：内容撑开宽度，左右都是行内元素的可以排在一行，如a标签

列表标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表标签</title>
</head>
<body>
<!--有序列表-->
<ol>
    <li>java</li>
    <li>python</li>
</ol>

<!--无序列表-->
<ul>
    <li>运维</li>
    <li>前端</li>
</ul>

<!--自定义列表
    dl：标签
    dt：列表名称
    dd：列表内容
-->
<dl>
    <dt>位置</dt>
    <dd>西安</dd>
    <dd>广东</dd>
    <dd>上海</dd>
</dl>
</body>
</html>

表格标签

  • 简单通用，结构稳定
  • 基本单元：单元格、行、列、跨行、跨列
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
</head>
<body>
<!--表格标签table
    行 tr
    列 td
-->
<table border="1px">
    <tr>
        <!--colspan 跨列-->
        <td colspan="2">1</td>
        <td>2</td>
    </tr>
    <tr>
        <!--rowspan 跨行-->
        <td rowspan="3">4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
    </tr>
</table>
</body>
</html>

媒体元素

  • 视频元素：video
  • 音频元素：audio
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素</title>
</head>
<body>
<!--video标签
    src：资源路径
    controls：控制条
    autoplay：自动播放
-->
<video src="../resources/video/什么是Java.mp4" controls autoplay></video>
<!--audio标签
    src：路径
    controls：控制条
    autoplay：自动播放
-->
<audio src="../resources/audio/Always%20on%20online.wav" controls autoplay></audio>
</body>
</html>

HTML页面分析

  • header：标题头部区域内容
  • footer：标记脚部区域的内容
  • section：web页面中的一块独立区域
  • article：独立的文章内容
  • aside：相关内容或应用
  • nav：导航类辅助内容
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构</title>
</head>
<body>
<header>
    <h1>网页头部</h1>
</header>

<section>
    <h1>网页主体</h1>
</section>

<footer>
    <h1>网页脚部</h1>
</footer>
</body>
</html>

iframe内联框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架</title>
</head>
<body>
<!--内联框架iframe
    src：地址
    w-h：宽度高度
    name：框架标识名
-->
<iframe src="" name="B-university" frameborder="0" width="1000" height="600"></iframe>
<!--替换src-->
<a href="https://www.bilibili.com" target="B-university">点击跳转</a>
</body>
</html>

表单基本控件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单控件</title>
</head>
<body>
<h1>注册</h1>
    
<!--表单form
action:表单提交的位置，网站或者请求处理地址
method:post,get提交方式
    - get：可以在URL中看到提交的信息，不安全，高效
    - post：比较安全，可以传输大文件
value:默认初始值
maxlength:字符最大长度
size:文本框长度
-->
<form action="Demo.html" method="get">
<!--文本输入框：input type="text"-->
    <p>名字：<input type="text" name="username"></p>
<!--密码输入框：input type="password"-->
    <p>密码：<input type="password" name="pwd"></p>

<!--单选框标签
    input type="radio"
    value:单选框的值
    name:组
    checked:已选中的
-->
    <p>性别：
        <input type="radio" value="boy" name="sex" checked>男
        <input type="radio" value="girl" name="sex">女
    </p>

<!--多选框标签-->
    <p>爱好：
        <input type="checkbox"value="sleep" name="hobby">睡觉
        <input type="checkbox"value="code" name="hobby">代码
        <input type="checkbox"value="chat" name="hobby">聊天
        <input type="checkbox"value="game" name="hobby">游戏
    </p>

<!--按钮
    input type="button"普通按钮
    input type="image" 图像按钮
    input type="submit" 提交按钮
    input type="reset" 重置按钮
-->
    <p>按钮：
        <input type="button" name="bt1" value="点击提交">
		<input type="image" src="../resources/image/图书馆.jpg">
    </p>

<!--下拉列表框-->
    <p>下拉框：
        <select name="列表名称" id="">
            <option value="ch">中国</option>
            <option value="us">美国</option>
            <option value="rs" selected>瑞士</option>
            <option value="yd">印度</option>
        </select>
    </p>

<!--文本域
    列：cols
    行：rows
-->
    <p>反馈：
        <textarea name="textarea" id="1" cols="30" rows="10">文本</textarea>
    </p>

<!--文件域-->
    <p>
        <input type="file" name="files">
        <input type="button" name="upload" value="上传">
    </p>

<!--邮件验证-->
    <p>邮箱：
        <input type="email" name="email">
    </p>

<!--URL验证-->
    <p>URL：
        <input type="url" name="url">
    </p>

<!--数字验证-->
    <p>数字：
        <input type="number" name="num" max="100" min="0" step="1">
    </p>

<!--滑块-->
    <p>滑块：
        <input type="range" name="voice" min="0"max="100" step="10">
    </p>

<!--搜索框-->
    <p>搜索：
        <input type="search" name="ss" >
    </p>
<!--提交重置按钮-->
    <p><input type="submit">
        <input type="reset">
    </p>
    
</form>
</body>
</html>

表单应用

  • 隐藏域：hidden
  • 只读：readonly
  • 禁用：disabled
  • …

表单初级验证

  • 表单验证减轻服务器压力、提高安全性

  • 常用方式：

    • 输入框提示信息，placeholder=“请输入用户名”

    • 非空判断，required

    • 正则表达式，pattern

这篇关于前端---HTML复习的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航