前端---HTML复习

2022/1/30 23:10:55

本文主要是介绍前端---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复习的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程