【学习笔记】HTML5

HTML
732
0
0
2022-12-01
HTML常用标签及属性
上一篇
html屏蔽右键、禁止复制与禁止查看源代码的几种方法
下一篇
标签   HTML5

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>
HTML常用标签及属性
上一篇
html屏蔽右键、禁止复制与禁止查看源代码的几种方法
下一篇