HTML5笔记-优快云博客

仅为学习记录，方便回顾复习，如有侵权请联系删除！

HTML5

1 HTML详解

1.1 初识HTML

Hyper Text Markup Language（超文本标记语言）
超文本包括：文字、图片、音频、视频、动画等。
Html5+Css3 —>现在使用的版本
Html5提供了一些新的元素和一些有趣的新特性，同时也建立了一些新的规则。这些元素、特性和规则的建立，提供了许多新的网页功能，如使用网页实现动态渲染图形、图表、图像和动画，以及不需要安装任何插件直接使用网页播放视频等等。

HTML5的优势

世界知名浏览器厂商对HTML5的支持
微软、Google、苹果、Opera、Mozilla
市场的需求
跨平台

W3C

World Wide Web Consortium（万维网联盟）
中立性技术标准机构
http://www.w3.org/
http://www.chinaw3c.org/

W3C标准包括
结构化标准语言（HTML、XML）
表现标准语言（CSS）
行为标准语言（DOM、ECMAScript）

常见IDE
记事本
Dreamweaver
IDEA
WebStorm

1.2 网页基本标签

HTML的基本结构

开放标签（成对出现）
闭合标签（单独呈现的标签（空元素））

<!--!DOCTYPE：告诉浏览器我们使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!--head标签代表网页头部-->
<head>
    <!--meta表示网页标签 一般用来做SEO-->
    <meta charset="UTF-8">
    <meta name="keywords" content="呀哈哈">
    <!--表示网页标题-->
    <title>Title</title>
</head>
<body>
<!--body表示网页主体-->
</body>
</html>

DOCTYPE声明

标题标签<h1></h1>
段落标签<p></p>
换行标签<br/>
水平线标签<hr/>
字体样式标签
<strong>内容粗体</strong>
<em>内容斜体</em>
注释和特殊符号
&nbsp;空格
&gt大于号
&lt小于号
&copy;版权符号

1.3 图像、超链接标签及网格布局

常见图像格式

JPG、GIF、PNG、BMP

<img src="path" alt="text" title="text" width="x" height="y"/>

src：图像地址（绝对地址、相对地址）
../：表示上级目录
alt：图像的替代文字，即图片的名字
title：鼠标的悬停文字
width：图像宽度
height：图像高度

链接标签

文本超链接

<a href="path" target="目标窗口位置">链接文本和图像</a>
<a href="1.我的第一个网页.html" target="_blank">点击跳转到页面一</a>
<a href="https://www.baidu.com" target="_self">点击跳转到百度</a>

href：必填，表示要跳转到哪个页面
target：表示窗口在哪里打开，_blank表示在新标签中打开。_self表示在自己的网页中打开，也是默认值。

图像超链接：

<a href="1.我的第一个网页.html">
    <img src="../resources/image/1.jpg" alt="墩墩" title="悬停文字" width="300" height="300">
</a>

页面间链接：从一个页面链接到另一个页面

锚链接：

<!--锚链接
1. 需要一个锚标记
2. 跳转到标记
#页面内跳转
-->
<!--使用id作为标记-->
<a id="top">自定义内容，可空</a>
....
<a href="#top">回到顶部</a><!--点击这条链接就会在页面内跳回到<a id="top">语句所在的位置-->
...

<!--也可以在网址后添加#号跳到对应网站的对应位置-->
<a href="https://www.baidu.com#down">百度底部</a> <br/>

功能性链接：

<!--邮件链接
邮件链接mailto
-->
<a herf="mailto:xxxxxxxx@qq.com">点击联系我</a>

1.4 表单及表单应用

无序列表

<!--无序列表-->
<ul>
    <li>无序列表1</li>
    <li>无序列表5</li>
    <li>无序列表2</li>
    <li>无序列表7</li>
</ul>

有序列表

<!--有序列表-->
<ol>
    <li>有序列表</li>
    <li>苹果</li>
    <li>香蕉</li>
    <li>梨</li>
</ol>

自定义列表

<!--自定义列表 -->
<dl>
    <dt>上海（自定义列表）</dt>
    <dd>中国的金融中心（解释）</dd>
    <dt>北京</dt>
    <dd>中国的首都</dd>
</dl>

表格

<table border="2">
    <tr>
        <td colspan="3">表格跨列的使用</td>
    </tr>
    <tr>
        <td>表格1.1</td>
        <td>表格1.2</td>
        <td>表格1.3</td>
    </tr>
    <tr>
        <td>表格2.1</td>
        <td>表格2.2</td>
        <td>表格2.3</td>
    </tr>
</table>

视频和音频的使用

<!--音频-->
<audio controls="controls">
    <source src="../audio/恋爱循环.mp3" type="audio/mp3">
</audio>
<!--视频-->
<video width="320" height="240" controls="controls" autoplay="autoplay" muted>
    <source src="../video/糖果比赛.mp4" type="video/mp4"/>糖果比赛
</video>

内联框架 iframe

<iframe src="https://www.bilibili.com/video/BV1FT41177vX?vd_source=4409ee90aa26d596d6644a9739670a05#reply124472464976"
        scrolling="no"
        border="0"
        frameborder="no"
        framespacing="0"
        allowfullscreen="true">
</iframe>

1.5 表单初级验证

表单form get提交在url中可见，高效不安全；post提交，在url中不可见，安全，大文件。
表单的属性：只读readonly，禁用disable，隐藏hidden。
表单的初级验证 placeHolder提示信息；required不能为空；pattern正则表达式。

<form method="post" action="提交位置（网站/请求）">
    <p>（文本框输入测试）名字：<input type="text" name="name" placeholder="请填写全名"/></p>
    <p>（文本框输入测试）爱好：<input type="text" name="love" required="required"></p>
    <!--radio标签-->
    <p>（radio测试）性别：
        <input type="radio" name="sex" value="male">男
        <input type="radio" name="sex" value="female">女
    </p>
    <!--checkbox 多选-->
    <p>（多选测试）爱好：
        <input type="checkbox" name="love" value="read">读书
        <input type="checkbox" name="love" value="basketball">篮球
        <input type="checkbox" name="love" value="football">足球
    </p>
    <!--下拉框select-->
    <p>（下拉框测试）工作地址：
        <select name="address">
            <option value="">请选择</option>
            <option value="上海">上海</option>
            <option value="北京">北京</option>
            <option value="广州">广州</option>
            <option value="深圳">深圳</option>
        </select>
    </p>
    <!--文本域，多行文本，textarea-->
    <p>（文本域测试）自我介绍：
        <textarea name="self" row="3" cols="80">请写自我介绍</textarea>
    </p>
    <!--文件域-->
    <p>
        <input type="file" name="files"/>
    </p>
    <!--邮件和邮件的验证-->
    <p>（邮件和邮件的验证）
        <input type="email" name="email" required="required"
               pattern="^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$"/>
    </p>
    <!--滑块 音量-->
    <p>（滑块测试）音量：
        <input type="range" min="0" max="100"/>
    </p>
    <!--搜索框 search-->
    <p>（搜索框测试）搜索：
        <input type="search"/>
    </p>
    <p>
        <input type="submit" name="username"/>
        <input type="reset" name="reset"/>
    </p>
</form>

button标签

<!--button标签-->
<button type="button">点击我！</button>

footer标签

<!--footer标签的使用-->
<footer>
    <p>
        <span class="red">Copyright footer标签的使用</span>
        <a href="#top">粤aaa - 132123123号</a>
    </p>
</footer>

点击我！


[外链图片转存中...(img-viFKr7rA-1660175271204)]



### footer标签

```html
<!--footer标签的使用-->
<footer>
    <p>
        <span class="red">Copyright footer标签的使用</span>
        <a href="#top">粤aaa - 132123123号</a>
    </p>
</footer>

[外链图片转存中…(img-LskofGgE-1660175271206)]