【学习笔记】HTML5

最后更新时间：2022年09月17日

HTML5

本文为我观看遇见狂神说的讲解视频的个人学习笔记，侵删。

基本信息

<!--DOCTYPE:用的是什么规范（告诉浏览器），默认html-->
<!DOCTYPE html>
<html lang="en">

<!--网页头部-->
<head>
<!--    meta 描述性标签，描述网站的一些信息-->
<!--    常做SEO-->
    <meta charset="UTF-8">
    <meta name="keywords" content="Livinfly, WA">
    <meta name="description" content="可以摸鱼">
<!--    网页标题-->
    <title>Web0</title>
</head>
<!--网页主体-->
<body>
Hello,HTML
</body>

</html>

网页基本标签

<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级</h3>
<h4>四级</h4>
<h5>五级</h5>
<h6>六级</h6>

<!--段落标签-->
<p>啊啊啊 急急急</p>

<!--换行标签 单标签-->
5555<br>
<br>778

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

<!--粗体、斜体-->

<strong>粗体</strong>
<br>
<em>斜体</em>
<br>

<!--特殊符号 &-->
空&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp格

大于号&gt;
<br>
小于号&lt; 
<br>
版权&copy;

图像标签

<!-- <img src="图像地址（推荐相对地址）" alt="图像替代的文字（图片失败时候）" title="鼠标悬停提示的文字" width="宽" height="高"> -->

<!--
    ../ 上一级
    src alt 必要
    还有其他的属性
-->
<img src="https://q1.qlogo.cn/g?b=qq&nk=2756436359&s=640" alt="头像" title="残城三梦">

超链接标签及应用

<!--
    a标签
    href（必填）跳转的网址
    target 窗口在哪里打开
        _blank 新标签页
        _self 原标签
-->
<a href="">显示文字</a>
<!--图片跳转-->
<a href="">
    <img src="" alt="">
</a>

<!--
    锚标签
    1. 一个锚标记
    2. 跳转到标记
-->
<a id="top">顶部</a>
<a href="#top">回到顶部</a>
<a href="3.html#top">xxx</a>

<!--功能性链接
    邮件链接：mailto:
-->
<a href="mailto:rslovesgames@qq.com">LINK ME</a>

块元素和行内元素

<!--
块元素
    新开辟一行
    无论内容多少，独占一行
    p,h1-h6
行内元素
    a strong em... 在一行
-->

列表

<!--有序列表 ordered list-->
<ol>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
    <li>555</li>
    <li>666</li>
</ol>
<hr>
<!--无序列表 unordered list-->
<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
    <li>555</li>
    <li>666</li>
</ul>
<hr>
<!--定义列表-->
<dl>
    <dt>列表名称</dt>
    <dd>列表内容</dd>
    <dd>1</dd>
    <dd>323</dd>
    <dd>444</dd>
</dl>

表格标签

<!--
表格table
    行 tr rows
    列 td
-->
<table>
    <tr>
<!--        colspan 跨列-->
        <td colspan="4">1</td>
        <td>5</td>
    </tr>
    <tr>
<!--        rowspan 跨行-->
        <td rowspan="2">6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>10</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>10</td>
    </tr>
</table>

媒体元素

<!--
音频与视频
    src
    controls 控制
    autoplay 自动播放
-->
<video src="path" controls autoplay></video>
<audio src="path" controls autoplay></audio>

页面结构分析

<!--
结构清晰

header 头部区域
footer 脚部区域
section 页面中的独立区域
article 独立的文章内容
aside 相关内容（侧边栏）
nav 导航辅助内容
-->
<header>
    <h2>网页头部</h2>
</header>
<section>
    <h2>网页主体</h2>
</section>
<footer>
    <h2>网页脚部</h2>
</footer>

iframe内联框架

<!--
iframe内联框架
    更小层级的浏览器（？
    src
    width
    hight
    name 识别名
-->
<iframe src="" name="hello" width="1000px" height="800px"></iframe>
<a href="https://livinfly.top" target="hello">Link</a>

表单post和get提交

<!--
form表单
    method /get/post 如何发送表单
    action 向何处发送表单（网站/请求处理地址）
    get url中可以看到提交的信息，不安全，高效
    post 安全 适合大文件
-->

<form action="a.html" method="get">
<!--文本输入框 input-->
    <p>Name: &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="text" name="username"> </p>
    <p>Password: <input type="password" name="pwd"> </p>
    <p>
        <input type="submit">
        <input type="reset">
    </p>
</form>
  • 文本框和单选框
  • 按钮和多选框
  • 列表框文本域和文件域
  • 搜索框滑块和简单验证
<form action="a.html" method="get">
<!--
文本输入框 input
    value 默认初始值
    maxlength="" 最长
    size 文本框长度
-->
    <p>Name: <input type="text" name="username"> </p>
    <p>Password: <input type="password" name="pwd"> </p>
    <p>Sex:
<!--
单选框
    放到同一个组里面
    value 提交的值
    name 组别，在同一个组是单选
    checked 默认
-->
        <input type="radio" value="boy" name="sex">male
        <input type="radio" value="girl" name="sex" checked>female
    </p>
<!--
多选框 input type="checkbox"
    checked 默认
-->
    <p><input type="checkbox" value="sleep" name="hobby" checked>睡觉</p>
    <p><input type="checkbox" value="code" name="hobby">写代码</p>
    <p><input type="checkbox" value="char" name="hobby">聊天</p>
    <p><input type="checkbox" value="run" name="hobby">跑步</p>
<!--
下拉框，列表框
    selected 默认选中
-->
    <p>下拉框
        <select name="列表名称">
            <option value="China" selected>China</option>
            <option value="USA">USA</option>
            <option value="UK">UK</option>
        </select>
    </p>
<!--
文本域
    cols rows
-->
    <p>反馈：
        <textarea name="textarea" id="" cols="30" rows="10">文本内容</textarea>
    </p>
<!--
文件域
-->
    <p>
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>
<!--
邮箱验证
url验证
数字
-->
    <p>Email:
        <input type="email" name="email">
    </p>
    <p>URL:
        <input type="url" name="url">
    </p>
    <p>number:
        <input type="number" name="num" max="100" min="0" step="5">
    </p>
<!--滑块-->
    <p>volumn:
        <input type="range" name="voice" min="0" max="100" step="2">
    </p>
<!--搜索框-->
    <p>search
        <input type="search" name="search">
    </p>
<!--
按钮 input button （普通)
          img  （图片按钮)
          submit
          reset
-->
    <p><input type="button" name="btn1" value="check"></p>
    <p><input type="image" src=""></p>
    <p>
        <input type="submit">
        <input type="reset" value="xxx">
    </p>
</form>

表单应用

<!--
表单的应用
    readonly 只读 使用如同checked
    disabled 禁止
    hidden 隐藏+默认值（（
-->
<!--
增强鼠标可用性
    点文字光标也改变到文本框中
    id=""
-->
    <p>
        <label for="mark">click me?</label>
        <input type="text" id="mark">
    </p>

表单的初级验证

<!--
    placeholder="请输入xxx"  提示输入信息
    required 非空判断
    pattern 正则 描述规则
-->
    <p>自定义邮箱:
        <input type="text" name="diymail" pattern="">
    </p>

声明：残城三梦|版权所有，违者必究|如未注明，均为原创|本网站采用BY-NC-SA协议进行授权

转载：转载请注明原文链接 - 【学习笔记】HTML5

Live In Fly && Live Infinitely