我的位置:首页 > 资讯>010_HTML5

010_HTML5

时间:2021-02-21 23:24:00 来源:互联网 热度: 作者: 佚名 字体:

目录
  • 初识HTML
    • 什么是HTML
    • HTML发展史
    • HTML5的优势
    • W3C标准
    • 常见IDE
  • IDEA开发HTML
    • IDEA创建HTML文件,并用浏览器打开
    • 配置浏览器
  • HTML基础
    • HTML基本结构
    • HTML注释
    • 网页基本信息
    • 网页基本标签
    • 图像标签
    • 链接标签
    • 块元素和行内元素
    • 列表标签
    • 表格标签
    • 媒体元素:音频和视频
  • 页面结构分析
  • iframe内联框架
  • 表单
    • 表单元素
    • 表单的初级验证
  • 总结

初识HTML

什么是HTML

  1. Hyper Text Markup Language
  2. 超文本标记语言
  3. 超文本包括:文字、图片、音频、视频、动画等

HTML发展史

image.png

HTML5的优势

image.png

W3C标准

image.png

常见IDE

image.png

IDEA开发HTML

IDEA创建HTML文件,并用浏览器打开

image.png

配置浏览器

image.png

HTML基础

HTML基本结构

image.png

HTML注释

<!-- HTML注释 -->

网页基本信息

  1. DOCTYPE声明
  2. title标签
  3. meta标签
<!-- DOCTYPE:告诉浏览器,要使用什么规范 -->
<!DOCTYPE html>
<html lang="en">
<!-- head标签代表网页头部 -->
<head>
    <!-- meta描述性标签,用来描述网站的一些信息 -->
    <!-- meta一般用来做SEO(搜索引擎优化) -->
    <meta charset="UTF-8">
    <meta name="keywords" content="网站关键词描述">
    <meta name="description" content="网站描述">

    <!-- title网页标题 -->
    <title>我的第一个页面</title>
</head>
<!-- body标签代表网页主体 -->
<body>
Hello World!
</body>
</html>

网页基本标签

  1. 标题标签
  2. 段落标签
  3. 换行标签
  4. 水平线标签
  5. 字体样式标签
  6. 注释和特殊符号
<!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>

    <!-- 段落标签 -->
    <h1>沁园春·雪</h1>
    <p>北国风光,千里冰封,万里雪飘。</p>
    <p>望长城内外,惟余莽莽;大河上下,顿失滔滔。</p>
    <p>山舞银蛇,原驰蜡象,欲与天公试比高。</p>
    <p>须晴日,看红装素裹,分外妖娆。</p>
    <p>江山如此多娇,引无数英雄竞折腰。</p>
    <p>惜秦皇汉武,略输文采;唐宗宋祖,稍逊风骚。</p>
    <p>一代天骄,成吉思汗,只识弯弓射大雕。</p>
    <p>俱往矣,数风流人物,还看今朝。</p>

    <!-- 水平线标签 -->
    <hr/>

    <!-- 换行标签 -->
    <h1>沁园春·长沙</h1>
    独立寒秋,湘江北去,橘子洲头。<br/>
    看万山红遍,层林尽染;漫江碧透,百舸争流。<br/>
    鹰击长空,鱼翔浅底,万类霜天竞自由。<br/>
    怅寥廓,问苍茫大地,谁主沉浮?<br/>
    携来百侣曾游。忆往昔峥嵘岁月稠。<br/>
    恰同学少年,风华正茂;书生意气,挥斥方遒。<br/>
    指点江山,激扬文字,粪土当年万户侯。<br/>
    曾记否,到中流击水,浪遏飞舟?<br/>

    <!-- 字体样式标签 -->
    <p>粗体 <strong>样本 hello</strong></p>
    <p>斜体 <em>样本 hello</em></p>

    <!-- 特殊符号 -->
    空 格<br/>
    空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格<br/>
    大于<br/>
    &gt;<br/>
    小于<br/>
    &lt;<br/>
    版权符号<br/>
    &copy;版权所有<br/>
</body>
</html>

图像标签

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签</title>
</head>
<body>
    <!--
    src:图像地址(必填)
        相对地址(推荐使用),绝对地址
        ../ 上一级目录
    alt:图像名称(必填)
    -->
    <img src="../resources/image/1.jpg" alt="图片名称" title="悬停文字" width="1024" height="577">
    <img src="../resources/image/2.jpg" alt="图片名称" title="悬停文字" width="1024" height="577">
</body>
</html>

链接标签

image.png

  1. 文本超链接
  2. 图像超链接
  3. 页面间链接:从一个页面链接到另一个页面
  4. 锚链接
  5. 页面间链接+锚链接:从一个页面链接到另一个页面的锚点
  6. 功能性链接
    1. 邮件链接
    2. QQ链接:使用QQ推广网站的推广工具

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>
    <p><a name="top" href="#bottom">直达底部</a></p>

    <!--
    a标签
    href:必填,表示要跳转到哪个页面
    target:表示窗口在哪里打开
        _blank 在新标签打开
        _self 默认,在本页打开
    -->
    <a href="1.我的第一个网页.html" target="">默认跳转</a><br>
    <a href="1.我的第一个网页.html" target="_self">本页跳转</a><br>
    <a href="https://www.baidu.com" target="_blank">新标签跳转</a><br>

    <a href="1.我的第一个网页.html">
        <img src="../resources/image/1.jpg" alt="图片名称" title="悬停文字" width="1024" height="577">
    </a>
    <p><a>
        <img src="../resources/image/1.jpg" alt="图片名称" title="悬停文字" width="1024" height="577">
    </a></p>
    <p><a>
        <img src="../resources/image/1.jpg" alt="图片名称" title="悬停文字" width="1024" height="577">
    </a></p>
    <p><a>
        <img src="../resources/image/1.jpg" alt="图片名称" title="悬停文字" width="1024" height="577">
    </a></p>

    <!--
    锚链接:
    1.需要一个锚标记,使用name
    2.跳转到标记
    -->
    <p><a name="bottom" href="#top">回到顶部</a></p>
    <!-- 页面间链接+锚链接:从一个页面链接到另一个页面的锚点 -->
    <p><a href="2.基本标签.html/#bottom" target="_blank">跳转到基本标签页面底部</a></p>

    <!--
    功能性链接:
    邮件链接:mailto
    QQ链接
    -->
    <p><a href="mailto:wl3pb@163.com">点击给我发邮件</a></p>
    <p>
        <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=962307062&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:962307062:53" alt="在线咨询" title="在线咨询"/></a>
    </p>
</body>
</html>

块元素和行内元素

image.png

列表标签

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表标签</title>
</head>
<body>
    <!--有序列表-->
    <ol>
        <li>java</li>
        <li>python</li>
        <li>javascript</li>
    </ol>
    <hr/>
    <!--无序列表-->
    <ul>
        <li>java</li>
        <li>python</li>
        <li>javascript</li>
    </ul>
    <hr/>
    <!--自定义列表
    dl:标签
    dt:列表名称
    dd:列表内容
    -->
    <dl>
        <dt>编程语言</dt>
        <dd>java</dd>
        <dd>python</dd>
        <dd>javascript</dd>

        <dt>武功秘籍</dt>
        <dd>九阳神功</dd>
        <dd>九阴真经</dd>
        <dd>降龙十八掌</dd>
    </dl>
</body>
</html>

表格标签

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
</head>
<body>
    <!--表格标签table
        行 tr
        列 td
    -->
    <table border="1px">
        <tr>
            <!--colspan 跨列-->
            <td colspan="4">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>

媒体元素:音频和视频

image.png

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

页面结构分析

image.png

<!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内联框架

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe内联框架</title>
</head>
<body>
<!--iframe内联框架
    src 地址
    w-h 宽度高度
		name 标识名
-->
<iframe src="https://www.baidu.com" frameborder="1" width="800px" height="500px"></iframe>

<!--点击显示跳转页面嵌入到标识名iframe-->
<iframe src="" name="hello" frameborder="1" width="800px" height="500px"></iframe>
<a href="3.图像标签.html" target="hello">点击显示跳转页面嵌入到标识名iframe</a>
</body>
</html>

表单

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
    action 表单提交的位置,可以是网站,也可以是一个请求处理地址
    method post,get提交方式
        get方式提交:可以在url中看到我们提交的信息,不安全,高效
        post方式提交:可以传输大文件,比较安全,但可以在Network查看,可以处理为不能查看
-->
<form action="1.我的第一个网页.html" method="post">
    <p><input type="text" name="username"></p>
    <p><input type="password" name="pwd"></p>
    <p>
        <input type="submit"></input>
        <input type="reset">
    </p>
</form>
</body>
</html>

表单元素

image.png

  1. checked 单选框和多选框选中
  2. selected 下拉框选中
  3. readonly 只读
  4. disabled 禁用
  5. hidden 隐藏
<!--单选框 radio
    value 值
    name 表示组
-->
<p>
    <input type="radio" value="boy" name="sex"/>男
    <input type="radio" value="girl" name="sex"/>女
</p>
<!--多选框 checkbox
    value 值
    name 表示组
-->
<p>
    <input type="checkbox" value="1" name="number"/>一
    <input type="checkbox" value="2" name="number"/>二
    <input type="checkbox" value="3" name="number"/>三
</p>
<!--文本域 textarea
    cols 列
    rows 行
-->
<p>反馈
    <textarea name="fankui" cols="20" rows="10">文本内容</textarea>
</p>
<!--文本域 textarea
    cols 列
    rows 行
-->
<p>文件域
    <input type="file" name="files"/>
</p>
<p>数字
    <input type="number" name="num" max="100" min="10" step="5"/>
</p>
<p>滑块
    <input type="range" name="voice" max="100" min="0" step="2"/>
</p>
<p>搜索框,有叉号,可以删除
    <input type="search" name="search"/>
</p>
<!--label标签,增强鼠标可用性,点击文件,文本框获取焦点-->
<p>
  <label for="mark">你点我试试</label>
    <input type="search" name="search" id="mark"/>
</p>

表单的初级验证

  1. placeholder 提示信息
  2. required 非空
  3. pattern 正则表达式

总结