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>

在这里插入图片描述

注释和特殊符号

特殊符号	字符实体
注释	`<!-- -->`
空格	` `
大于号	`>`
小于号	`<`
引号	`"`
版权符号	`©`

图像标签

在这里插入图片描述

<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	标记脚部区域的内容
section	Web页面中的一块独立区域
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}" />

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