HTML5

最新推荐文章于 2024-09-03 20:17:53 发布

过来我的小熊

最新推荐文章于 2024-09-03 20:17:53 发布

阅读量158

点赞数

分类专栏：前端基础文章标签： java html

本文链接：https://blog.csdn.net/weixin_56121715/article/details/124392132

版权

前端基础专栏收录该内容

3 篇文章 1 订阅

订阅专栏

HTML 笔记

初识HTML
网页基本标签
图像（超链接）网页布局
列表，表格，媒体元素
表单及表单应用
表单初级验证

初识HTML

什么是HTML?

Hyper Text Markup Language(超文本标记语言) ----> 超文本包括：文字，图片，音频，视频，动画等

HTML5 2013-5-6

HTML5 的优势？

主浏览器都支持
市场的需求
跨平台

W3C 标准是什么？

World Wide Web Consortium(万维网联盟)
成立于1994年。Web技术领域最权威和具影响力的国际中立性技术标准机构
https://www.w3.org/
https://www.chinaw3c.org/

W3C 标准包括：

结构化标准语言（HTML，XML）
表现标准语言（CSS）
行为标准（DOM(文档对象模型)，ECMAScript(JavaScript)）

常用IDE

记事本
Dreamweaver
IDEA
WebStorm

HTML 基本结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w1a0fEDs-1650806120317)(C:\Users\17，\AppData\Roaming\Typora\typora-user-images\image-20220405202057852.png)]

, 等成对的标签，分别叫 **开放标签**和**闭合标签**，单独呈现的标签（空元素），如
意为用 / 来关闭空元素

网页基本信息

DOCTYPE 声明
title 标签
meta 标签


<!-- DOCTYPE: 告诉浏览器，我们要使用什么规范 -->
<!DOCTYPE html>
<html lang="en">

<!-- head标签代表网页头部 -->
<head>
    <!-- meta 描述性标签，它用来描述我们网站的一些信息 -->
    <!-- meta 一般用来做SEO -->
    <meta charset="UTF-8">
    <meta name="keywords" content="学习HTML5">

    <!-- title 网页标签 -->
    <title>Title</title>
</head>
<!-- body标签 代表网页主体 -->
<body>
hello,world!
</body>
</html>

网页基本标签

标题标签
段落标签
换行标签
水平线标签
字体样式标签
注释和特殊符号

<!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>

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

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

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

<!--粗体，斜体-->
<br/>
粗体： <strong>i love you</strong>  <br/>
斜体： <em>i love you</em>

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

<!--
    特殊符号记忆
    &   ;
-->

</body>
</html>

图像标签

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
    img 学习
    src ： 图片地址（必填）
        相对地址(推荐使用)，绝对地址
        ../ 代表上一级目录

    alt ： 图片名称（必填）

    title：悬停文字

    width：图片宽度
    height：图片高度

    hidden：隐藏
-->

<img src="../resources/image/01.jpg" alt="图片名字" title="悬停文字"  width="500px" height="300px" hidden="hidden">

</body>
</html>

链接标签

文本超链接
图像超链接
页面链接 (从一个页面调转到另一个页面)
锚链接
功能链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>

<!--
    链接标签学习
    href：跳转到哪里（必填）

    target：
        _blank  在另一个页面打开
        _self  在本页面打开

-->
<a name="top">顶部</a> <br/>
<a href="1.我的第一个HTML.html" target="_blank">跳转到1.我的第一个HTML.html</a>  <br/>
<a href="https://www.baidu.com" target="_self">跳转到百度</a> <br/>

<!--图片跳转-->
<a href="1.我的第一个HTML.html">
    <img src="../resources/image/01.jpg" alt="图片名字" title="悬停文字"  width="500px" height="300px">
</a>

<p><img src="../resources/image/01.jpg" alt="图片名字" title="悬停文字"  width="500px" height="300px"></p>
<p><img src="../resources/image/01.jpg" alt="图片名字" title="悬停文字"  width="500px" height="300px"></p>
<p><img src="../resources/image/01.jpg" alt="图片名字" title="悬停文字"  width="500px" height="300px"></p>
<p><img src="../resources/image/01.jpg" alt="图片名字" title="悬停文字"  width="500px" height="300px"></p>

<!--锚链接-->
<a href="#top">回到顶部</a>  <br/>
<a href="3.图像标签.html#down">down</a> <br/>

<!--
    功能性标签
    邮件链接：mailto
    QQ链接：
-->
<a href="mailto:2902987351@qq.com">点击联系我</a> <br/>

<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2902987351&site=qq&menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2:2902987351:52" alt="你好，咨询" title="你好，咨询" width="50px" height="50px"/>
</a>

</body>
</html>

行内元素和块元素

块元素
- 无论内容多少，该元素独占一行
- （p，h1-h6，…）
行内元素
- 内容撑开宽度，左右都是行内元素的可以排在一行
- （a，strong，em，…）

列表

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

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

<!--
    无序列表
    应用范围：试卷，问答...
-->
<ol>
    <li>Java</li>
    <li>Python</li>
    <li>Linux</li>
    <li>JavaScript</li>
</ol>

<!--
    有序列表
    应用范围：导航，侧边栏....
-->
<ul>
    <li>Java</li>
    <li>Python</li>
    <li>Linux</li>
    <li>JavaScript</li>
</ul>

<!--
    自定义列表
        dl：标签
        dt：列表名称
        dd：列表内容
    应用范围：公司网站底部
-->
<dl>
    <dt>学科</dt>

    <dd>Java</dd>
    <dd>Python</dd>
    <dd>Linux</dd>
    <dd>JavaScript</dd>
</dl>

</body>
</html>

表格标签

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

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

<!--
    表格标签  table
    表头  th (head)
    行 tr (rows)
    列 td (data)
-->

<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>

媒体元素

视频元素
- video
音频元素
- audio

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

<!--
    音频和视频
        src ：资源路径
        controls ： 控制条
        autoplay ： 自动播放
        muted ： 静音
-->

<video src="../resources/video/2.mp4" controls autoplay></video>
<audio src="../resources/audio/3.mp3" controls autoplay></audio>

</body>
</html>

页面结构分析

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

iframe 内联框架

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

<!--
  iframe 内联框架
      src ： 地址
      w-h ： 宽度，高度
-->

<iframe src="" frameborder="0" name="hello"></iframe>

<a href="1.我的第一个HTML.html" target="hello">点击跳转</a>

</body>
</html>

初识表单post和get提交

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

<!--
  表单 form
      action ：表单提交的位置，可以是网站，也可以是一个请求处理地址
      method ：post ， get 提交方式
          get  ：我们可以在url中看到我们提交的信息，不安全，高效
          post ： 比较安全，传输大文件
-->
<h1>注册</h1>
<form action="1.我的第一个HTML.html" method="post">
  <!-- 文本输入框 input type="text"-->
  <p>名字：<input type="text" name="username"></p>
  <!-- 密码框 input type="password"-->
  <p>密码：<input type="password" name="pwd"></p>

  <p>
    <!-- 提交 input type="submit"-->
    <input type="submit">
    <!-- 重置 input type="reset"-->
    <input type="reset">
  </p>

</form>

</body>
</html>

表单元素

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

表单的应用

隐藏域 hidden
只读 readonly
禁用 disabled

表单初级验证

为什么需要表单验证？

因为可以减轻服务器的压力

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

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

<!--
    表单元素  name 要写上
        input
           type:
                text  文本框
                password  密码框
                submit 提交按钮
                reset  重置按钮
                radio  单选按钮 name(分组) checked 默认选择  需要分到一个组中
                checkbox 多选按钮  checked 默认选择
                button 普通按钮
                image 图片按钮
                file  文件域
                emil  邮件验证
                url  URL验证
                number  数字  max最大 min最小 step步长
                range  滑块
                search  搜索框
           value: 初始值
           maxlength: 可以输入的最长字符个数
       select 下拉框
           option 列表框  selected 默认选择
       textarea  文本域  cols 行  rows 列
       label  增强鼠标可用性(简明：点到文字也可以选中文本框)
   属性
       readonly  只读
       disabled  禁用
       hidden  隐藏域

   表单初级验证
       placeholder  提示信息
       required  非空判断
       pattern  正则表达式
-->

<form action="1.我的第一个HTML.html" method="get" >
    <p>名字:<input type="text" name="username" value="mingZi"  ></p>
    <p>密码:<input type="password" name="pwd" maxlength="8" placeholder="请输入密码"></p>

    <p>性别:
        <input type="radio" name="sex" value="boy" checked>男
        <input type="radio" name="sex" value="girl">女
    </p>
    
    <p>爱好:
        <input type="checkbox" name="sleep">睡觉
        <input type="checkbox" name="game">游戏
        <input type="checkbox" name="code" checked>写代码
        <input type="checkbox" name="chat">聊天
    </p>

    <p>按钮:
        <input type="button" name="btn1" value="点击变长">
        <input type="image" src="../resources/image/01.jpg" width="50px" height="50px" formtarget="_blank">
    </p>

    <p>
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>
    
    <p>
        <textarea name="textarea" id="textarea" cols="50" rows="10"></textarea>
    </p>
    
    <p>
        <label for="mark">你点我试试</label>
        <input type="text" id="mark">
    </p>

    <p>
        <!--pattern 正则表达式  可以去搜索-->
        <input type="text" name="diyEmil" pattern="">
    </p>

    <p>国家:
        <select name="列表名称" id="">
            <option value="CN">中国</option>
            <option value="US">美国</option>
            <option value="CH" selected>瑞士</option>
        </select>
    </p>

    <!--邮件验证-->
    <p>邮箱:
        <input type="email" name="email" required>
    </p>

    <!--URL-->
    <p>URL:
        <input type="url" name="url">
    </p>

    <!--数字-->
    <p>商品数量:
        <input type="number" name="num" max="100" min="0" step="1">
    </p>

    <!--滑块-->
    <p>滑块:
        <input type="range" name="volume" min="0" max="100" step="2">
    </p>

    <!--搜索框-->
    <p>搜索框:
        <input type="search" name="search">
    </p>

    <p>
        <input type="submit">
        <input type="reset" value="清空表单">
    </p>
</form>

</body>
</html>

    </select>
</p>

<!--邮件验证-->
<p>邮箱:
    <input type="email" name="email" required>
</p>

<!--URL-->
<p>URL:
    <input type="url" name="url">
</p>

<!--数字-->
<p>商品数量:
    <input type="number" name="num" max="100" min="0" step="1">
</p>

<!--滑块-->
<p>滑块:
    <input type="range" name="volume" min="0" max="100" step="2">
</p>

<!--搜索框-->
<p>搜索框:
    <input type="search" name="search">
</p>

<p>
    <input type="submit">
    <input type="reset" value="清空表单">
</p>

```