前端---HTML复习

已于 2022-01-30 21:52:13 修改
阅读量386 收藏
点赞数
文章标签： html 前端 html5
于 2022-01-30 21:50:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44465396/article/details/122756320
版权

HTML复习

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

启航1999
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端-css【复习】
m0_64024214的博客
11-07 151
css
前端复习笔记--自用
weixin_45746754的博客
03-26 117
【前端基础篇】第一篇HTML 【前端基础篇】第二篇CSS
前端面试集中复习 -HTML+CSS
weixin_54714100的博客
03-18 831
HTML的文档类型声明，说明这个页面的用什么来编写的h5 有一个比较宽松的语法，基本上完全向后兼容。
前端-flex布局
weixin_51661211的博客
04-10 972
flex布局的属性总结
前端基础复习--HTML篇
m0_67247641的博客
03-28 958
radio：单选框 name="gender"：只能单选一个 checked：默认选择。表格标签有一些属性，可以用于设置大小边框等，但是一般使用 CSS方式 来设置。搭配input使用，点击label也能选中对应的单选/复选框，能够提升用户体验。button：普通按钮，搭配 JS 使用。p标签：段落标签，回车换行会解析成空格。换行标签换行后间隙比段落标签间隙小。绝对路径：图片路径 网络上的图片。div：是独占一行的，是一个大盒子。span：不独占一行，是一个小盒子。
前端 - 博客系统(页面设计) - JavaEE初阶 - 细节狂魔
DarkAndGrey的博客
05-13 2972
文章目录前言博客系统 前言 前面的博客，只是快速带着大家过了一下前端。 学习了一些最简单，最常用的前端知识。 1、HTML的常用标签 2、CSS选择器 + 常用样式 3、JS的基础语法 4、DOM API 常用方法 真的要讲明白的话，光一个 CSS，要写的博客至少 10篇起步。 【以我的博客质量为基准】 但是！博主是后端的，不会学得太深入， 走前端方向的朋友，自己报个班，深入学习， 我是比较推荐 报比特的。 因为 我就是 比特的一份子。   博客系统 我们是仿照 CSDN 实现一个 最简化的版
前端基础 --HTML CSS JavaScript基础
sunfengyu_的博客
01-19 335
学习前端 复习前端
尚硅谷前端笔记-01html
weixin_58264104的博客
05-29 165
尚硅谷前端笔记-01html
Web前端全复习-HTML
WMY10001的博客
10-14 683
【2-2】h标题标签 &lt;html&gt; &lt;meta http-equiv="Content-Type" content="text/html;charset=utf-8"&gt; &lt;title&gt;标题示例&lt;/title&gt; &lt;body&gt; &lt;h1&gt;一级标题&lt;/h1&gt; &lt;h2
Web前端--HTML+CSS+JavaScript酷炫游戏动漫网页设计
2401_84434237的博客
04-27 930
四轮技术面+一轮hr面结束，学习到了不少，面试也是一个学习检测自己的过程，面试前大概复习了 一周的时间，把以前的代码看了一下，字节跳动比较注重算法，面试前刷了下leetcode和剑指offer， 也刷了些在牛客网上的面经。大概就说这些了，写代码去了~祝大家都能收获大厂offer~开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】篇幅有限，仅展示部分内容。
frontEnd-review:前端复习回顾
05-05
在前端复习回顾中，CSS（Cascading Style Sheets）同样不可或缺。CSS3引入了许多新特性，如选择器层级、伪类和伪元素、边框和背景、过渡与动画、多列布局、Flexbox（弹性盒模型）和Grid布局。这些特性极大地增强了...
vue的简单-复习文件
02-12
Vue.js 是一款轻量级的前端JavaScript框架，它以其易用性、灵活性和高效性而备受开发者喜爱。在这个“vue的简单-复习文件”中，我们将会深入探讨Vue的一些核心概念，包括表单处理、键值（key）的原理、列表渲染、...
FE-Review:前端知识点复习
03-14
JavaScript部分实现CORS TCP三次握手，四次挥手 网络存储深浅拷贝 调用，应用和绑定实现 新...unicode字符集和utf-8编码规则前端路由popstate，hashchange事件浏览器的进程与线程创建对象的方式实现继承的方式类型转换
前端开源库-gvcp
08-30
7. **录制与回放**：为了记录会议内容，gvcp 提供了视频录制功能，记录的会议可以随时回放，方便未参加或需要复习的用户。 8. **性能优化**：为了在各种网络环境下保持流畅的用户体验，gvcp 实现了网络自适应策略，...
前端复习资料.pdf
08-29
自己亲身买的学习资料，以及自己找工作做得总结汇总，希望能帮到大家今后找工作，学习用，一起努力学习、一起进步。
基于 HTML+ECharts 实现的大数据可视化平台模板（含源码）
柯晓楠
07-24 3314
大数据的可视化对于企业决策、市场分析和业务洞察至关重要。通过直观的数据展示，团队可以快速理解复杂的数据模式，发现潜在的业务机会。本文将详细介绍如何利用 HTML 和 ECharts 实现一个功能丰富的大数据可视化平台模板。
html实现酷炫美观的可视化大屏(十种风格示例，附源码)
最新发布
xcLeigh
07-25 2117
html实现酷炫美观的可视化大屏(十种风格示例，附源码)，大屏源码，可视化大屏模板源码，html可视化大屏源码下载，内含十种不同风格的大屏可视化代码，详细的讲解，酷炫的线条，美观的设计，让图文图表结合的更融洽。兼容各种大屏，调整页面到合适的分辨率，F12全屏观看。各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
【HTML — 构建网络】HTML 入门
07-24 1245
如果您查看许多其他站点的代码，您可能会遇到许多奇怪的标记样式，包括不带引号的属性值。在这一点上，你应该了解 HTML 是什么样子的，以及它在基本层面上是如何工作的。在 HTML 中，不需要在 void 元素标记的末尾添加 a，例如： .但是，它也是一种有效的语法，当您希望 HTML 是有效的 XML 时，您可以这样做。现在，您可以在 Web 浏览器中打开此文件，以查看呈现的代码的外观。在本练习中，您可以如前所述在计算机上本地编辑代码，也可以在下面的示例窗口中编辑代码（在本例中，可编辑示例窗口仅表示。
HTML 基础知识
07-24 1052
你写的替代文本应该为读者提供足够的信息，以便对图像传达的内容有一个很好的了解。对于我们的Firefox徽标，一个更好的替代品是“Firefox徽标：围绕地球的火焰狐狸”。如果它们如上所示重叠，那么您的 Web 浏览器将尝试对您想说的内容做出最佳猜测，这可能会导致意外结果。正如我们之前所说，它将图像嵌入到我们的页面中，该图像位于它出现的位置。空格（或任何字符）的简单属性值可以保持不加引号的状态，但建议您将所有属性值加引号，因为这可以使代码更加一致和易于理解。创建链接后，单击它以确保它将您发送到您想要的地方。
前端求职必备：全面复习资料与实战技巧
前端复习资料涵盖了广泛的前端开发基础知识，旨在帮助学习者和求职者提升技能。以下是部分内容的详细解释： 1. **浏览器兼容性和内核**: 学习者需了解在哪些主流浏览器（如Chrome、Firefox、Safari、IE等）进行测试...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值