【学习笔记】HTML5

发布于

HTML5

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

基本信息

代码语言：javascript
复制
<!--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>

网页基本标签

代码语言：javascript
复制
<!--标题标签-->

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

图像标签

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


<!--

../ 上一级

src alt 必要

还有其他的属性

-->

<img src="https://q1.qlogo.cn/g?b=qq&nk=2756436359&s=640" alt="头像" title="残城三梦">

超链接标签及应用

代码语言：javascript
复制
<!--

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>

块元素和行内元素

代码语言：javascript
复制
<!--

块元素

新开辟一行

无论内容多少，独占一行

p,h1-h6

行内元素

a strong em... 在一行

-->

列表

代码语言：javascript
复制
<!--有序列表 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>

表格标签

代码语言：javascript
复制
<!--

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

媒体元素

代码语言：javascript
复制
<!--

音频与视频

src

controls 控制

autoplay 自动播放

-->

<video src="path" controls autoplay></video>

<audio src="path" controls autoplay></audio>

页面结构分析

代码语言：javascript
复制
<!--

结构清晰


header 头部区域

footer 脚部区域

section 页面中的独立区域

article 独立的文章内容

aside 相关内容（侧边栏）

nav 导航辅助内容

-->

<header>

<h2>网页头部</h2>

</header>

<section>

<h2>网页主体</h2>

</section>

<footer>

<h2>网页脚部</h2>

</footer>

iframe内联框架

代码语言：javascript
复制
<!--

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

代码语言：javascript
复制
<!--

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>
  • 文本框和单选框
  • 按钮和多选框
  • 列表框文本域和文件域
  • 搜索框滑块和简单验证
代码语言：javascript
复制
<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>

表单应用

代码语言：javascript
复制
<!--

表单的应用

readonly 只读 使用如同checked

disabled 禁止

hidden 隐藏+默认值（（

-->

<!--

增强鼠标可用性

点文字光标也改变到文本框中

id=""

-->

<p>

<label for="mark">click me?</label>

<input type="text" id="mark">

</p>

表单的初级验证

代码语言：javascript
复制
<!--

placeholder="请输入xxx"  提示输入信息

required 非空判断

pattern 正则 描述规则

-->

<p>自定义邮箱:

<input type="text" name="diymail" pattern="">

</p>

#html5#图像标签#iframe#post#表单