HTML5 学习笔记

HTML5 学习笔记

前言

该学习笔记的相关学习视频：【狂神说Java】HTML5完整教学通俗易懂
目前笔记只有简单的例子和框架，将来在实践中会进一步学习和补充内容

目录

  • HTML5 学习笔记
    • 前言
    • 网页基本信息
    • 网页基本标签
      • 标题标签
      • 段落标签
      • 换行标签
      • 水平线标签
      • 字体样式标签
      • 注释和特殊符号
    • 图像标签
    • 链接标签
      • 页面间链接
      • 锚链接
      • 功能性链接
    • 行内元素块元素
      • 行内元素（行级标签）
      • 块元素（块级标签）
    • 列表标签
      • 有序标签
      • 无序标签
      • 自定义标签
    • 表格标签
    • 媒体元素
    • 页面结构分析
    • iframe内联框架
    • 表单
      • 文本框
      • 单选框
      • 多选框
      • 按钮
      • 下拉框
      • 文本域
      • 文件域
      • 其他组件
        • 邮箱
        • 网址
        • 数字
        • 滑块
        • 搜索框
      • 表单的应用
        • 只读
        • 隐藏域
        • 禁用
        • 表单元素的标注
      • 表单的初级验证
        • placeholder 提示信息
        • required 必填项
        • pattern 正则表达式

网页基本信息

<!-- DOCTYPE:告诉浏览器使用何种规范（html） -->
<!DOCTYPE html>
<html lang="en"><!-- head标签代表网页的头部-->
<head><!-- meta描述性标签：用来描述网页的一些信息 --><!-- meta一般用来做SEO（搜索引擎优化）--><meta charset="UTF-8"><meta name="keywords" content="HTML5 Study"><meta name="description" content="One day"><!-- title网页标题--><title>My First Webpage</title>
</head><!-- body标签代表网页主体-->
<body>Hello，Web！</body></html>

网页基本标签

标题标签

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

在这里插入图片描述

段落标签

<h1>北京欢迎你</h1>
<p>北京欢迎你，有梦想谁都了不起！</p>
<p>有勇气就会有奇迹。</p>

在这里插入图片描述

换行标签

<h1>北京欢迎你</h1>
<p>北京欢迎你，有梦想谁都了不起！<br/>有勇气就会有奇迹。<br/>北京欢迎你，为你开天辟地。<br/>
</p>

水平线标签

<h1>北京欢迎你</h1>
<!--水平线-->
<hr/>
<p>北京欢迎你，有梦想谁都了不起！<br/>有勇气就会有奇迹。<br/>北京欢迎你，为你开天辟地。<br/>
</p>

在这里插入图片描述

字体样式标签

<!--粗体-->
<strong>徐志摩人物简介</strong>
<p><!--斜体--><em>1910</em>年入杭州学堂<br/><em>1918</em>年赴美国克拉大学学习银行学<br/>
</p>

在这里插入图片描述

注释和特殊符号

特殊符号字符实体
注释<!-- -->
空格&nbsp;
大于号&gt;
小于号&lt;
引号&quot;
版权符号&copy;

图像标签

在这里插入图片描述

<img src="../resources/image/img.png" alt="dog" title="this is a dog" height="640" width="640"/>

图片地址可传入 绝对路径 和 相对路径

绝对路径从盘号开始，例如：C:/…

相对路径由当前 html文件 的目录开始，通过 “…/” 查找上一级内容，连用”…/"可查找更上级的内容

链接标签

页面间链接

<a href="https://www.baidu.com">点击我跳转到百度</a>
<br/>
<a href="https://www.baidu.com"><img src="../resources/image/img.png" alt="dog" title="this is a dog" height="640" width="640"/>
</a>

链接入口可以以文本或图片的形式展示

target指定链接在那个窗口打开

<a href="https://www.baidu.com" target="_blank">点击我跳转到百度</a>
<a href="https://www.baidu.com" target="_self">点击我跳转到百度</a>

_blank 表示在新的窗口页面打开
_self 表示在本窗口页面打开

target 默认值为_self

锚链接

<a name="top">顶部</a>
<!-- 
......
......
-->
<a href="#top">回到顶部</a>

锚链接可以跳转到页面的指定位置（需先标记该位置）

跳转到其他页面时也可指定跳转的位置

<a href="My%20First%20Webpage.html#down">跳转某页面到底部</a><!--My Firs tWebpage.html-->
<a name="down">底部</a>

功能性链接

发送电子邮件

<a href="mailto:1328540878@qq.com">点击联系我</a>

行内元素块元素

行内元素（行级标签）

行内元素可以排在同一行，例如：
（a、strong、em…）

块元素（块级标签）

块元素独占一行，例如：
（p、h1-h6…）

列表标签

有序标签

<ol><li>Java</li><li>Python</li><li>C/C++</li><li>HTML5</li><li>CSS3</li>
</ol>

无序标签

<ul><li>Java</li><li>Python</li><li>C/C++</li><li>HTML5</li><li>CSS3</li>
</ul>

自定义标签

<dl><dt>Lesson</dt> <!--列表标题--><dd>Java</dd><dd>Python</dd><dd>Linux</dd><dd>C</dd><dt>City</dt> <!--列表标题--><dd>北京</dd><dd>西安</dd><dd>成都</dd><dd>上海</dd>
</dl>

表格标签

<table border="1px"><tr><td colspan="3">学习成绩</td></tr><tr><td rowspan="2">张三</td><td>Chinese</td><td>100</td></tr><tr><td>Math</td><td>100</td></tr><tr><td rowspan="2">李四</td><td>Chinese</td><td>60</td></tr><tr><td>Math</td><td>60</td></tr>
</table>

在这里插入图片描述

border 指定表格边框的宽度
colspan 表示扩列
rowspan 表示扩行

媒体元素

<video src="../resource/video/Piantou.mp4" controls autoplay></video>
<video src="../resource/audio/QianQianquege.mp3" controls autoplay></video>

controls 代表显示控制条
autoplay 代表自动播放

页面结构分析

元素名描述
header标题头部区域的内容
footer标记脚部区域的内容
sectionWeb页面中的一块独立区域
article独立的文章内容
aside相关内容或应用（常用于侧边栏）
nav导航类辅助内容
<header><h2>网页头部</h2>
</header>
<section><h2>网页内容</h2>
</section>
<footer><h2>网页脚部</h2>
</footer>

iframe内联框架

<iframe src="https://www.baidu.com" name="baidu"frameborder="0" width="1000px" height="800px"></iframe>

src：引用页面地址
name：框架标识名

<!--在被打开的框架上加name属性-->
<iframe name="mainFrame"></iframe>
<!--在超链接上设置target目标窗口属性为希望显示的框架窗口名-->
<a href="https://www.baidu.com/" target="mainFrame">加载</a>

target 表示以何种方式打开链接

表单

<form action="path" method="get"><p>账号：<input type="text" name="username"> </p><p>密码：<input type="password" name="pwd"> </p><p><input type="submit"><input type="reset"></p>
</form>

action：表示表单提交的位置，可以是网址、请求处理地址
method： post / get 两种提交方式
get方式提交：可以在URL中看到提交的信息，不安全，但高效
post方式提交：比较安全，可以传输大文件

文本框

input type = “text”

账号：<input type="text" name="username" value="id" maxlength="12" size="15">

name：文本框名称(必填)
value：文本框初始值
size：文本框长度
maxlength：文本框可输入最多字符

单选框

input type = “radio”

性别：
<input type="radio" value="male" name="sex" checked/>男
<input type="radio" value="female" name="sex"/>女

name：单选框名称(必填)，一组的名称需要相同
checked：初始单选按钮选中状态
value：单选框的值

多选框

input type = “checkbox”

爱好：
<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" checked/>游戏

name：复选框名称(必填)，一组的名称需要相同
checked：初始复选按钮选中状态
value：复选框的值

按钮

<!--重置按钮-->
<input type="reset" name="butReset" value="reset按钮">
<!--提交按钮-->
<input type="submit" name="butSubmit" value="submit按钮">
<!--普通按钮-->
<input type="button" name="butButton" value="button按钮"/>
<!--图片按钮-->
<input type="image" src="images/login.gif" />

图片按钮类似于图片链接

下拉框

国家：
<select name="nation"><option value="China" selected>中国</option><option value="Japan" >日本</option><option value="US" >美国</option>
</select>

文本域

反馈：
<textarea name="textarea" cols="40" rows="20">（文本内容）</textarea>

文件域

input type = “file”

<input type="file" name="files" />
<input type="submit" name="upload" value="上传" />

其他组件

邮箱

邮箱：
<input type="email" name="email"/>

提交时会检测输入的邮箱内容：

  • 必须含有 ‘@’ 字符
  • ‘@’ 前后必须有内容

网址

请输入你的网址:<input type="url" name="userUrl"/>

提交时会检测URL地址格式是否正确

数字

请输入数字:
<input type="number" name="num" min="0" max="100" step="10"/>

min/max : 可以限定阈值
step ：可以指定步长（固定每次的增量）

在这里插入图片描述

滑块

音量：
<input type="range" name="voice" min="0" max="10" step="2"/>

与数字框同理

搜索框

请输入搜索的关键词:
<input type="search" name="sousuo"/>

表单的应用

只读

readonly

账号：
<input type="text" name="username" value="admin" readonly>

在这里插入图片描述

隐藏域

hidden

密码：
<input type="password" name="pwd" hidden>

在这里插入图片描述

禁用

disabled

<input type="submit" disabled>
<input type="reset">

在这里插入图片描述

表单元素的标注

增强鼠标的可用性，自动将焦点转移到与该标注相关的表单元素上

<label for="user">你点我试试</label>
<p>账号：<input type="text" name="username" id="user"> </p>

对应的 id 要一致

表单的初级验证

如果用户填写的表单内容不进行验证就发给服务器，那么服务器发现填写的不合法，或是没有填写，就 会返回响应给用户，用户重新填写再提交，如此多次持续直到用户输入正确。它们之间的通信是通过网 络进行的，如果网络很差，那么注册一个账号就得花很长时间，对用户来说是非常烦的，对服务器来说 也增加了其工作压力。 要是有恶意的用户向服务器发送病毒或是有害于服务器安全的程序就更危险了。

表单验证的好处：

  • 减轻服务器的压力
  • 保证数据的可行性和安全性。

placeholder 提示信息

账号：
<input type="text" name="username" placeholder="请输入用户名">

在这里插入图片描述

required 必填项

<input type="text" name="username" required/>

规定文本框填写内容不能为空，否则不允许用户提交表单

pattern 正则表达式

<input type="text" name="tel" required pattern="^1[358]\d{9}" />

用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/380204.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

面向对象(方法的形式参数)

面向对象(方法的形式参数)

1&#xff0c;局部变量与成员变量的区别 1&#xff0c;在类中的位置不同 成员变量&#xff1a;在类中方法外 局部变量&#xff1a;在方法定义中或者方法声明上2&#xff0c;在内存中的位置不同 成员变量&#xff1a;在堆内存&#xff08;成员变量属于对象&#xff0c;对象进…
阅读更多...
保护机制

保护机制

0x01 概述 操作系统提供了许多安全机制来尝试降低或阻止缓冲区溢出攻击带来的安全风险&#xff0c;包括DEP、ASLR等。在编写漏洞利用代码的时候&#xff0c;需要特别注意目标进程是否开启了DEP&#xff08;Linux下对应NX&#xff09;、ASLR&#xff08;Linux下对应PIE&#xf…
阅读更多...
机器学习降维算法一：PCA(主成分分析算法)

机器学习降维算法一：PCA(主成分分析算法)

引言&#xff1a; 机器学习领域中所谓的降维就是指采用某种映射方法&#xff0c;将原高维空间中的数据点映射到低维度的空间中。降维的本质是学习一个映射函数 f : x->y&#xff0c;其中x是原始数据点的表达&#xff0c;目前最多使用向量表达形式。 y是数据点映射后的低维向…
阅读更多...
VS 2005模板丢失找回的办法

VS 2005模板丢失找回的办法

安装其他插件的时候&#xff0c;常常模板丢失&#xff0c;比较郁闷&#xff0c;以前就用土办法&#xff0c;重装VS来解决这个问题&#xff0c;这次终于弄清楚怎么回事了&#xff0c;可以采取下面两个步骤解决1。复制ProjectTemplates和ItemTemplates&#xff0c;保证VS能找到相…
阅读更多...
dbms数据库管理系统_基本数据库管理系统（DBMS）能力问题和解答

dbms数据库管理系统_基本数据库管理系统（DBMS）能力问题和解答

dbms数据库管理系统This section contains the aptitude questions and answers on basic concepts of DBMS. You will find aptitude questions on DDL, DCL, DML, DQL, TCL statements and other related topics. 本节包含有关DBMS基本概念的能力问题和解答。 您将找到有关DD…
阅读更多...
面向对象（封装对象private关键字）

面向对象（封装对象private关键字）

1.面向对象(封装的概述) A:封装概述 是指隐藏对象的属性和实现细节&#xff0c;仅对外提供公共访问方式。B:封装好处 隐藏实现细节&#xff0c;提供公共的访问方式提高了代码的复用性提高安全性。C:封装原则 将不需要对外提供的内容都隐藏起来。把属性隐藏&#xff0c;提供公…
阅读更多...
Codeforces Global Round 13 C

Codeforces Global Round 13 C

C. Pekora and Trampoline 题意&#xff1a;对于数组a&#xff0c;每次出发开始可以选择任意元素作为起始点&#xff0c;然后在数组上移动&#xff0c;落点为i a[i]&#xff0c;直至超出数组范围&#xff0c;每次经过的点的值减一&#xff08;先移动再减/直至减到1为止&#…
阅读更多...
一个简单的pwn例子---read函数

一个简单的pwn例子---read函数

内容&#xff1a; #include<stdio.h> void exploit() {system("/bin/sh"); } void func() {char str[0x20];read(0, str, 0x50); } int main() {func();return 0; }我们要做的是利用溢出执行exploit函数 分析&#xff1a; 先执行func函数&#xff0c;func函数…
阅读更多...
重载运算符 减号_在C / C ++中使用减号（-）运算符将两个数字相加

重载运算符 减号_在C / C ++中使用减号（-）运算符将两个数字相加

重载运算符 减号Given two numbers, and the task is to find their addition using the minus (-) operator. 给定两个数字&#xff0c;任务是使用减(-)运算符查找它们的加法 。 As we have discusses in C/C arithmetic operators that plus () operator adds the numbers a…
阅读更多...
【操作系统】互斥：软件解决方法

【操作系统】互斥：软件解决方法

互斥&#xff1a;软件解决方法 算法一 算法思路 预留一个全局内存区域&#xff0c;并标记为turn。进程&#xff08;P0或P1&#xff09;想进入它的临界区执行时&#xff0c;要先检查turn的内容。若turn的值等于进程号&#xff0c;则该进程可以进入它的临界区&#xff1b;否则…
阅读更多...
Oracle为即将发布的11g开发平台进行预演

Oracle为即将发布的11g开发平台进行预演

Oracle为即将发布的11g开发平台进行预演 Oracle JDeveloper是一个免费的整合开发环境&#xff0c;它为模块化、开发、调试、优化、部署Java应用程序和Web服务提供了端到端&#xff08;end-to-end&#xff09;的支持。1&#xff09;完全支持J2EE5.0&#xff0c;带有EJB3.0&#…
阅读更多...
面向对象 多态

面向对象 多态

面向对象 多态的概述及其代码的体现 A&#xff1a;多态(polymorphic)概述 事物存在的多种形态B&#xff1a;多态前提 要有继承关系要有方法重写要有弗雷引用指向子类对象。C&#xff1a;案例演示 代码体现多态 public class Dome1 { public static void main(String[] args…
阅读更多...
Web开发入门

Web开发入门

想要学习Web开发&#xff0c;我的建议是参照Web应用的发展历史学习。最早的时候&#xff0c;Web应用就是静态的Html页面&#xff0c;不能和用户交互&#xff0c;这是因为它最早是各高校用来分享论文的载体。后来&#xff0c;随着Internet的流行&#xff0c;Web应用的用户不再单…
阅读更多...
算法和程序的区别

算法和程序的区别

算法 计算机算法是以一步接一步的方式来详细描述计算机如何将输入转化为所要求的输出的过程&#xff0c;或者说&#xff0c;算法是对计算机上执行的计算过程的具体描述。 算法首先必须是正确的&#xff0c;即对于任意的一组输入&#xff0c;包括合理的输入与不合理的输入&…
阅读更多...
【图论】（二分图）J. Burnished Security Updates - CodeForces

【图论】（二分图）J. Burnished Security Updates - CodeForces

J. Burnished Security Updates 题意&#xff1a;对于所给的图&#xff08;不一定连通&#xff09;&#xff0c;选择一些点作为一个集合&#xff0c;满足每条边有且仅有一个端点为该集合的点&#xff0c;要求计算该集合大小的最小可能&#xff0c;若无法找到一个集合满足条件则…
阅读更多...
万网与阿里巴巴业务关系图解

万网与阿里巴巴业务关系图解

阿里巴巴在港上市公司今天发布公告称&#xff0c;计划分拆旗下中国万网赴美上市。那么万网与阿里巴巴其它业务是怎样个关系&#xff1f;且看我们分析。 随着传统企业大面积地转向互联网经营&#xff0c;用电子商务来服务客户&#xff0c;它们面临的第一个问题就是建站。针对这一…
阅读更多...
c中将数组传递给子函数_在C ++中将对象传递给Non-Member函数

c中将数组传递给子函数_在C ++中将对象传递给Non-Member函数

c中将数组传递给子函数Here, we have to define a Non-Member Function, in which we have to pass an Object to the class in C programming language. 在这里&#xff0c;我们必须定义一个非成员函数&#xff0c;其中必须将一个Object传递给C 编程语言的类。 What we are d…
阅读更多...
大数问题（C++、Java）

大数问题（C++、Java）

有时候&#xff0c;当我们做题的时候会遇到很简答的代码题&#xff0c;例如AB&#xff0c;但是题是有前提的&#xff0c;就是两个数特别的大。妈耶~~~ 大家都知道&#xff0c;定义一个变量&#xff0c;系统会自动为该变量分配空间&#xff0c;例如&#xff1a;int类型在c中&am…
阅读更多...
cobalt strick 4.0 系列教程（4）---监听器和基础设施管理

cobalt strick 4.0 系列教程（4）---监听器和基础设施管理

0x01 概述 任何行动的第一步都是建立基础设施。就 Cobalt Strike 而言&#xff0c;基础设施由一个或多个团队服务器、重定向器以及指向你的团队服务器和重定向器的 DNS 记录组成。一旦团队服务器启动并运行&#xff0c;你将需要连接到它并将其配置为接收来自受害系统的连接。监…
阅读更多...
【竞赛题解】Codeforces Round #710 (Div. 3)

【竞赛题解】Codeforces Round #710 (Div. 3)

B. Partial Replacement 题意&#xff1a;有字符串由.和*组成&#xff0c;可标记其中*&#xff0c;首尾的*必须被标记&#xff0c;使被标记的*之间距离不超过k&#xff0c;求最少的标记量 思路&#xff1a;首先从首尾出发确定首尾*的位置&#xff0c;再由首beg出发向后的k个元…
阅读更多...
最新文章

Copyright @ 2022~2023