HTML5 学习笔记_html5学习笔记-CSDN博客

本文链接：https://blog.csdn.net/weixin_51989356/article/details/123027394

HTML 5 学习目录

一、初始HTML
- （一）HTML概念简介
- （二）HTML的发展历程
- （三）HTML特点
- （四）HTML5的标准
- （五）HTML 开发工具
二、HTML的基本结构
三、IDEA中开发HTML
- （一）HTML开发规范
- （二）运行HTML程序
四、常见标签学习
- （一）基本标签
- （二）字体标签
- （三）特殊标签
五、标签使用演示
- （一）标题标签
- （二）段落标签
- （三）换行标签
- （四）水平线标签
- （五）字体样式标签
- （六）特殊符号
六、图像标签
- （一）概念补充
七、超链接标签的应用
- （一）链接标签
- （二）超链接标签
- - 1.页面间链接
  - 2.锚链接
- （三）实现QQ推广
八、行内元素和块元素
九、列表标签
- （一）无序列表
- （二）有序列表
- （三）自定义列表
十、表格标签
- （一）打印基本表格
- （二）测试样例
十一、媒体标签
十二、页面结构学习
- （一）页面结构分析
- - 1.常用元素列表
  - 2.页面演示示例
- （二）iframe内联框架
- - 1.多个iFrame嵌套使用实现页面的切换
  - 2.演示示例
十三、表单学习(实现简易的登陆界面)
- （一）初始表单post和get提交(form)
- （二）表格元素属性格式
- （三）单选框(radio)
- （四）多选框(checkbox)
- （五）按钮(button)
- （六）列表框文本域和文件域
- - 1.列表框文本域 (textarea)
  - 2.文件域 (input-file)
- （七）搜索框滑块和简单验证
- （八）表单的应用
- （九）表单初级验证
- - 1.正则表达式
- （十）完整登陆表单演示代码
十四、HTML5总结

一、初始HTML

（一）HTML概念简介

HTML的全称为 “Hyper Text Markup Language” (超文本标记语言)，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。
HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

（二）HTML的发展历程

在这里插入图片描述

（三）HTML特点

在这里插入图片描述

Java 依靠 JVM 虚拟机可以实现跨平台运行Java程序。
HTML 基于浏览器的应用直接具有跨平台的特性。

（四）HTML5的标准

在这里插入图片描述

（五）HTML 开发工具

HTML开发常用IDE
记事本
Dreamweaver
IDEA
WebStorm

其中IDEA内集成有WebStorm的开发功能

二、HTML的基本结构

在这里插入图片描述

三、IDEA中开发HTML

（一）HTML开发规范

在这里插入图片描述

（二）运行HTML程序

1.html基本结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

2.运行浏览器的Path设置

在这里插入图片描述

3.运行途径

在这里插入图片描述

四、常见标签学习

（一）基本标签

基本标签	快捷输入
注释	ctrl + /
标题	h + Tap
段落	p + Tap
分割线	hr + Tap
换行	br + Tap

（二）字体标签

字体标签	快捷输入
字体加粗	strong + Tap / b +Tap
字体斜体	em + Tap / i + Tap

（三）特殊标签

特殊字符	快捷输入
空格	&nbsp
大于号	&

五、标签使用演示

（一）标题标签

<!-- 告诉浏览器 我们使用的是什么规范 -->
<!DOCTYPE html>
<html lang="en">
 
<head>
 
    <meta charset="UTF-8">
    <title>基本标签学习</title>
</head>
<!--网页的主体-->
<body>
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
</body>
</html>

在这里插入图片描述

（二）段落标签

<!--段落标签-->
<p>跑得快跑得快</p>
<p>一只没有耳朵</p>
<p>一只没有尾巴</p>
<p>真奇怪真奇怪</p>
<p>两只老虎两只老虎</p>

在这里插入图片描述

（三）换行标签

<!--换行标签-->
跑得快跑得快<br>
一只没有耳朵<br>
一只没有尾巴<br>
真奇怪真奇怪<br>
两只老虎两只老虎<br>

在这里插入图片描述

（四）水平线标签

hr + Tap


<!--
2.水平分割线标签，通过属性来设置分割线的宽，粗细，颜色
width:宽
size:粗细
前端的长度表示法
1.像素表示法：单位是px
分辨率：1366*768 水平方向有1366个像素点，数值方向有768个像素点
2.百分比表示法，占父标签的百分比

color:颜色
颜色表示法
1.英文表示法
2.16进制表示法（开发中使用）#000000
3.RGB表示法（0-255,0-255,0-255）
-->
<hr width="80%" size="10px" color="#000000">

（五）字体样式标签

粗体<strong>i love you</strong>
斜体<em>i love you</em>


<!--
文字标签：fond这个标签已经过时了，我们今后使用css来设置文字的颜色，大小，字体
通过color属性，设置标签里面文字的颜色
通过size属性，设置文字的大小
通过face设置字体属性
-->
<fon color="red" size="8" face="楷体">你好世界</font>

在这里插入图片描述

（六）特殊符号

<!--t特殊符号-->
空格
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格<br>
 
&gt;<br>
&lt;<br>
&copy;版权所有符号

在这里插入图片描述

六、图像标签

图像标签

常见的图像格式
- JPG
- GIF
- PNG
- BMP（位图）
- …

<img src="path" alt="text" title="text" width="x" height="y" />
src：图像地址
alt：图像的替代文字
title：鼠标悬停提示文字
width：图像宽度
height：图像高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>
<img src="../resources/images/1.jpg"alt="演示图片"title="悬停文字">
 
</body>
</html>

（一）概念补充

使用相对路径把图像加入HTML 文件

<img src="../resources/images/1.jpg"alt="演示图片"title="悬停文字">

七、超链接标签的应用

（一）链接标签

链接标签

文本超链接
图像超链接
链接的基本格式

<a href="链接路径" target="目标窗口位置">链接文本或图像</a>

使用 a 标签作超链接但 href 才是超链接的灵魂

（二）超链接标签

页面间链接：从一个页面跳转到另一个页面
锚链接
功能性链接


<!--a标签
href:必填，表示要跳转到那个页面
target:表示窗口再哪里打开
    _blank:再新标签中打开
    _self:在自己的网页中打开

1.页面间链接

从一个页面跳转到另一个页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>
<a href="https://www.baidu.com" target="_self">更多内容访问百度</a>
<a href="1.我的第一个网页.html" target="_self">更多内容访问百度</a>

</body>
</html>

在这里插入图片描述

当输入超链接的网址有下划线标识时，说明网页输入完整可以放访问

在超链接中嵌套img标签可以实现图片超链接跳转

<a href="1.我的第一个网页.html" target="_self">访问我的第一个网页
    <img src="../resources/images/1.jpg" alt="打开图片失败" width="300">
</a>

2.锚链接

<!--锚标签 类似与 goto 语句-->
<a name="top">顶部</a>
<hr>
<a href="1.我的第一个网页.html">
    <img src="../resources/images/1.jpg" alt="图片失效" width="300" title="打开有惊喜">
</a>
<br>
<img src="../resources/images/1.jpg" alt="测试" width="300"><br>
<img src="../resources/images/1.jpg" alt="测试" width="300"><br>
<img src="../resources/images/1.jpg" alt="测试" width="300"><br>
<img src="../resources/images/1.jpg" alt="测试" width="300"><br>
<hr>
<a href="#top">回到顶部</a>

（三）实现QQ推广

在这里插入图片描述

八、行内元素和块元素

行内元素和块元素

块元素
- 无论内容多少，该元素独占一行
- （p、h1-h6…）
行内元素
- 内容撑开宽度，左右都是行内元素的可以排在一行
- （a、strong、em…）
块元素间的呈现有明显的间距，行元素间的呈现会较为紧凑

九、列表标签

列表标签

什么是列表
- 列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷的获得相应信息
列表的分类
- 无序列表
- 有序列表
- 自定义列表

（一）无序列表

<!---无序列表
unorder list 简写成 ul
应用范围：导航，侧边栏
-->
<ul>
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端</li>
    <li>C/c++</li>
</ul>

在这里插入图片描述

（二）有序列表

Java
Python
运维
前端
C/c++

<!---有序列表
order list 简写成  order list
应用范围：试卷，问答
-->
<ol>
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端</li>
    <li>C/c++</li>
</ol>

（三）自定义列表

学科列表

Java

Python

运维

前端

C/c++

<dt> 位置</dt>
<dd> 西安</dd>
<dd> 重庆</dd>
<dd> 新疆</dd>
<img src="" alt="">

<!--自定义列表
dl:标签 ( defintion list 简写成 dl)
dt：列表名称 (defintion title)
dd  列表内容 (defintion description -- 准确的说是定义术描述的意思)
-->
<!---->
<hr>
<dl>
    <dt> 学科列表</dt>
    <dd> Java</dd>
    <dd> Python</dd>
    <dd> 运维</dd>
    <dd> 前端</dd>
    <dd> C/c++</dd>

    <dt> 位置</dt>
    <dd> 西安</dd>
    <dd> 重庆</dd>
    <dd> 新疆</dd>
    <img src="" alt="">
</dl>

十、表格标签

表格标签

（一）打印基本表格

为什么使用表格
- 简单通用
- 结构稳定
基本结构
- 单元格
- 行
- 列
- 跨行
- 跨列

如图是一个三行三列的表格
实现跨行跨列操作

 <td rowspan="3">2-1</td>	跨行

   <td colspan="3">1-1</td>  跨列

（二）测试样例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签学习</title>
</head>
<body>
<table border="1px">
    <tr>
        <!--colspan 跨列-->
        <td colspan="6">1-1</td>
 
    </tr>
    <tr>
        <!--rowspan跨行-->
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
 
    </tr>
</table>
 
 
 
</body>
</html>

十一、媒体标签

视频和音频

视频元素：video
音频元素：audio
关键词学习
- autoplay 自动播放
- controls 控制器要有控制器才有播放按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素学习</title>
</head>
<body>
    <!--音频和视频
    src：资源路径
    controls：控制条
    autoplay ：自动播放
    -->
    <video src="../resources/video/xxx.mp4" controls autoplay></video>
 
    <audio src="../resources/audio/xxx.mp3" controls autoplay></audio>
 
 
</body>
</html>

在这里插入图片描述

十二、页面结构学习

（一）页面结构分析

页面结构分析

1.常用元素列表

元素名	描述
header	标题头部区域的内容（用于页面或页面中的一块区域）
footer	标记脚部区域的内容（用于整个页面或页面的一块区域）
section	Web网页中的一块独立区域
article	独立的文章内容
aside	相关内容或应用
nav	导航类辅助内容

2.页面演示示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构分析</title>
</head>
<body>
<header>
    <h2>网页头部</h2>
</header>
<section>
    <h2>网页主体</h2>
</section>
<footer>
    <h2>网页脚部</h2>
</footer>
 
</body>
</html>

（二）iframe内联框架

iframe内联框架（实现简单的页面嵌套）

<iframe src="path" name="mainFrame"></iframe>
path:引用网页地址
mainFrame:框架标识名

1.多个iFrame嵌套使用实现页面的切换

</iframe>

<iframe src="" name="hello" frameborder="0"></iframe>
<a href="1.我的第一个网页.html" target="hello">点击跳转</a>


<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257627&page=10"
        scrolling="no" border="0"
        frameborder="no" framespacing="0" allowfullscreen="true">
</iframe>

2.演示示例

在这里插入图片描述

十三、表单学习(实现简易的登陆界面)

（一）初始表单post和get提交(form)

在这里插入图片描述

表单常用关键词	含义及表述
action：	表单提交的位置，可以是网站，也可以是一个请求处理地址
method：	post，get 提交方式
get方式提交：	外面可以在url中看到外面提交的信息，不安全，高效
post方式提交:	比较安全，可以传输大文件

<form action="1.我的第一个网页.html" method="get">
  <p>用户：
    <input type="text" name="username" value="">
  </p>
    <p>密码：
        <input type="password" name="passwd" value="">
    </p>
    <p>
        <input type="submit" name="submit" value="提交">
        <input type="reset" name="reset" value="重置">
    </p>
</form>

（二）表格元素属性格式

属性	说明
type (搭配在 input 中使用)	指定元素的类型。text、password、checkbox(多选)、radio(单选)、submit、reset、file、hidden、image、button，默认text
name	指定表单元素的名称
value	元素的初始值。type为radio时必须指定一个值
size	指定表单元素的初始宽度。但type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素(px)为单位。
maxlength	type为 text 或 password，输入的最大字符数
checked	type为radio或checkbox时，指定按钮是否被选中

（三）单选框(radio)

单选框不允许选项同时选上

组的概念
单选框的 name起到了分组的作用，使在同一组的选项只能选中其中一个

  <p>性别：
        <input type="radio" name="sex">男
        <input type="radio" name="sex">女
  </p>

在这里插入图片描述

（四）多选框(checkbox)

   <p>爱好：
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby">编程
        <input type="checkbox" value="read" name="hobby">阅读
    </p>

（五）按钮(button)

按钮可以使经典按钮形式
也可以以图片做按钮链接

<p>按钮:
        <input type="button" name="btn1"value="点击变长">
        <input type="image" src="../resources/images/1.jpg">
 </p>

在这里插入图片描述

（六）列表框文本域和文件域

列表框文本域 textarea 标签
文件域 file 标签

1.列表框文本域 (textarea)

<p>反馈：
        <textarea name="sign" id=" 填入反馈的地址" cols="30" rows="10"></textarea>
    </p>

在这里插入图片描述

2.文件域 (input-file)

   <p>附件上传：
        <input type="file" name="sources">
        <input type="button" name="btn2" value="点击上传">
    </p>

在这里插入图片描述

（七）搜索框滑块和简单验证

归类为 input

表单元素	应用
email	传入邮件
url	传入网址，链接地址
number	数字输入框，只允许输入数字
range	音量等滑动滑块有0-100 的比例值
search	搜索框

代码呈现

 <!--邮件验证-->
        <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" size="10">
        </p>
 
        <!--滑块-->
        <p>音量：
            <input type="range" name="voice" min="0" max="100" step="2">
        </p>
 
        <!--搜索框-->
        <p>搜索：
            <input type="search" name="search">
        </p>

在这里插入图片描述

（八）表单的应用

表单的应用

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

增强鼠标可用性，点击label，光标自动到text上

<!--增强鼠标可用性，点击label，光标自动到text上-->
    <p>
        <label for="mark">你点我试试</label>
        <input type="text" id="mark">
    </p>

label标签 for 后关键词对应要跳转索引的 id

（九）表单初级验证

常用方式
- placeholder：提示信息
- required：非空判断
- pattern：正则表达式

<p>名称：<input type="text" name="username" placeholder="请输入用户名"></p>
<p>名称：<input type="text" name="username" required></p>
<!--常用的正则：https://www.jb51.net/tools/regexsc.htm-->
<p>自定义邮箱：
    <input type="text" 
           name="diy" 
           pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/">
</p>

在这里插入图片描述

1.正则表达式

搜索网址

https://www.jb51.net/tools/regexsc.htm

<p>名称：<input type="text" name="username" placeholder="请输入用户名"></p>
<p>名称：<input type="text" name="username" required></p>
<!--常用的正则：https://www.jb51.net/tools/regexsc.htm-->
<p>自定义邮箱：
    <input type="text" 
           name="diy" 
           pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/">
</p>

（十）完整登陆表单演示代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单学习</title>
</head>
<body>
<h3>用户注册</h3>
<form action="1.我的第一个网页.html" method="get">
  <p>用户：
    <input type="text" name="username" value="" placeholder="请输入用户名">
  </p>
    <p>密码：
        <input type="password" name="passwd" value="" required>
    </p>
    <p>性别：
        <input type="radio" name="sex" value="boy">男
        <input type="radio" name="sex" value="girl">女
    </p>
    <p>爱好：
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby">编程
        <input type="checkbox" value="read" name="hobby">阅读
    </p>
    <p>
        <input type="image" src="../resources/images/1.jpg " width="300" >
        <br>
    <hr>
        <input type="button" value="点击变更长" name="but" >
    
    </p>
    <p>反馈：
        <textarea name="sign" id=" 填入反馈的地址" cols="30" rows="10"></textarea>
    </p>
    <p>附件上传：
        <input type="file" name="sources">
        <input type="button" name="btn2" 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" size="10">
    </p>

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

    <!--搜索框-->
    <p>搜索：
        <input type="search" name="search" id="wb">
    </p>
    <!--增强鼠标可用性，点击label，光标自动到text上-->
    <p>
        <label for="wb">你点我试试</label>
        <input type="text" id="">
    </p>
    <p>
        <input type="submit" name="submit" value="提交">
        <input type="reset" name="reset" value="重置">
    </p>


</form>

</body>
</html>