HTML5 笔记
发表于：2022-06-08 | 分类： HTML5.0 + CSS3.0 笔记

Visual Studio Code

插件推荐

  • Live Server : 实时更新修改后的网页
  • TabNine : 更好的代码提示
  • Prettier - Code formatter : 更好的格式化代码
  • vscode-icons : 图标插件
  • emmit(内置) : 快速生成代码
  • htmltagwrap : 自动闭合 HTML 标签
  • 中文代码快速补全 : 中文代码拼音补全

代码片段

在线生成代码片段(opens new window)

修复 WebStorme 一直索引

设置-编辑器-文件类型-忽略文件和文件夹-node_modules

HTML5 结构

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>页面标题</title>
</head>
<body>

</body>
</html>

HTML 特殊符号

HTML 原代码 显示结果 描述
< < 小于号或显示标记
> > 大于号或显示标记
& & 可用于显示其它特殊字符
" “ 引号
® ® 已注册
© © 版权
™ ™ 商标
  半个空白位
  一个空白位
不断行的空白

基础标签

标题

1
2
3
4
5
6
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

段落标签

1
<p>段落</p>

超链接标签

a 标签用来跳转链接

1
<a href="URL" target="弹出方式">文本或图片</a>

弹出方式：

  • _self : 默认值
  • blank : 新窗口打开
    隐藏 a 标签下划线：
    1
    2
    3
    a {
      text-decoration:none;
    }

描点链接

点击链接后，可以快速定位到页面中的某个位置

1
<a href="#id名">文本或图片</a>

div 标签

块级元素

1
<div></div>

span 标签

行级元素

1
<span></span>

图片标签

img 标签用来显示图片

1
<img src="图片路径" title="提示!!!文本" alt="图片无法显示时提示!!!信息"/>

分割线

1
<hr />

换行符

1
<br>

有序列表

1
2
3
4
<ol>
  <li>有序列表1</li>
  <li>有序列表2</li>
</ol>

无序列表

1
2
3
4
<ul>
  <li>无序列表1</li>
  <li>无序列表2</li>
</ul>

隐藏列表的小点：

1
2
3
li {
  list-style:none;
}

自定义列表

1
2
3
4
5
<dl>
  <dt>自定义列表标题</dt>
  <dd>自定义列表1</dd>
  <dd>自定义列表2</dd>
</dl>

表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table>
  <thead>
    <tr>
      <th>表头1</th>
      <th>表头2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
  </tbody>
</table>

提示!!!
table 有一个特殊的 CSS：border-collapse: collapse;，设置后可将相邻的边框进行合并

内嵌网页

1
<iframe src="网页链接"></iframe>

鼠标悬浮提示!!!

1
<p title="提示!!!内容"></p>

语义化标签

语义化标签与 div 标签无实质区别，仅仅是有语义化。语义化标准主要是针对搜索引擎。

头部标签

1
<header></header>

导航标签

1
<nav></nav>

区域标签

1
<section></section>

侧边栏标签

1
<aside></aside>

尾部标签

1
<footer></footer>

文本格式化标签

pre 标签

定义预格式化的文本（保留空格和换行符）

1
<pre></pre>

加粗

1
<strong>加粗文本</strong>

倾斜

1
<em>倾斜文本</em>

删除线

1
<del>删除文本</del>

下划线

1
<ins>下划线文本</ins>

表单标签

fieldset 标签

<fieldset> 标签是对表单中的相关元素进行分组，效果是在上边框左侧显示标题

1
2
3
4
<fieldset>
  <legend>标题</legend>
  <h2>内容</h2>
</fieldset>

label 标签

<label> 标签的作用是为鼠标用户改进可用性，当用户点击<label>标签中的文本时，浏览器就会自动将焦点转到和该标签相关联的控件上。<label>标签通常和<input>标签一起使用；

1
2
3
4
5
6
<!--  嵌套使用 -->
<label> 用户：<input type="text" /> </label>

<!-- 绑定使用 -->
<label for="text1"></label>
<input name="text1" type="text" />

name 属性：当前 input 弹的名字,后台可以通过这个 name 属性找到这个表弹。页面中的表单很多，name 的主要作用就是用于区别不同的表单。

  • 文本输入
    1
    <label>文本输入：<input type="text" placeholder="文本提示!!!" /> </label>
    修改文本提示!!!颜色：
    1
    2
    3
    input::placeholder {
      color: red;
    }
  • 密码输入
    1
    <label>密码输入：<input type="password" /> </label>
  • 数字输入
    提示!!!
    在移动端同样适用，并且会自动将输入法键盘切换至数字输入
    1
    <label>数字输入：<input type="number" /> </label>
  • 搜索输入
    1
    <label>搜索输入：<input type="search" /> </label>
  • 手机号输入
    1
    <label>手机号输入：<input type="tel" /> </label>
  • 电子邮箱输入
    1
    <label>电子邮箱输入：<input type="email" /> </label>
  • 颜色选择
    1
    <label>颜色选择：<input type="color" /> </label>
  • URL 网址输入
    1
    <label>URL网址输入：<input type="url" /> </label>
  • 日期选择
    1
    <label>日期选择：<input type="date" /> </label>
  • 时间输入
    1
    <label>时间输入：<input type="time" /> </label>
  • 月份输入
    1
    <label>月份输入：<input type="month" /> </label>
  • 周输入
    1
    <label>周输入入：<input type="week" /> </label>

文本域

文本框只能单行输入，<textarea>标签是用于定义多行文本输入的控件

1
<textarea></textarea>

提示!!!
cols 属性可用来定义每行字符数，rows属性可定义行数。实际开发中一般使用 CSS 进行设置样式。

单选框

1
2
3
4
5
<label>
  单选框1：<input name="单选框1" type="radio" />
  <!-- 默认选中 -->
  单选框2：<input name="单选框1" type="radio" checked />
</label>

提示!!!
单选框需要加name属性，且需要相同名称，否则无法实现单选

多选框

1
2
3
4
5
<label>
  多选框1：<input type="checkbox" />
  <!-- 默认选中 -->
  多选框2：<input type="checkbox" checked />
</label>

下拉框

如果有多个选项让用户选择，并且想要节须面空间时, 我们可以使用<select>标签控件定义下拉列表

1
2
3
4
5
<select>
  <option>下拉选项1</option>
  <!-- 默认选中 -->
  <option selected>下拉选项2</option>
</select>

提交按钮

提交按钮会把表单中的数据发送到服务器

1
<input type="submit" />

重置按钮

重置按钮会清除表单中的所有数据

1
<input type="reset" />

普通按钮

普通按钮 需要结合 JavaScript 搭配使用

1
<input type="button" value="按钮" />

上传按钮

弹出文件对话框

1
2
3
4
<!-- 单选文件 -->
<input type="file" />
<!-- 多选文件 -->
<input type="file" multiple="multiple" />

表单属性

属性 值 描述
required required 表单拥有该属性表示其内容不能为空，必填
placeholder 提示!!!文本 表单的提示!!!信息，存在默认值将不显示
autofocus autofocus 自动聚焦属性，页面加载完成自动聚焦到指定表单
autocomplete off/ on 当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段 中填写的选项。默认已经打开，如 autocomplete=”on”，关闭 autocomplete =”off” 需要放在表单内，同时加上 name 属性，同时成功提交
multiple multiple 可以多选文件提交
onTimeUpdate 函数 当播放时间发送改变时回调此函数

多媒体标签

音频

支持 mp3、Wav、Ogg 三种格式（各浏览器的支持程度略有差异），推荐使用 mp3 格式

1
<audio src="文件地址" controls="controls"></audio>

常用属性：

属性 值 描述
autoplay autoplay 如果出现该属性，则音频在就绪后马上播放。
controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。
loop loop 如果出现该属性，则每当音频结束时重新开始播放。
muted muted 规定视频输出应该被静音。
preload preload 如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
src url 要播放的音频的 URL。

视频

支持 mp4、WebM、Ogg 三种格式（各浏览器的支持程度略有差异），推荐使用 mp4 格式

1
<video src="文件地址" controls="controls"></video>

常用属性：

属性 值 描述
autoplay autoplay 如果出现该属性，则视频在就绪后马上播放。（谷歌浏览器需要增加 muted 来解决自动播放问题）
controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。
height pixels 设置视频播放器的高度。
loop loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted muted 规定视频的音频输出应该被静音。
poster URL 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
preload preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
src url 要播放的视频的 URL。
width pixels 设置视频播放器的宽度。
HTML5 笔记
上一篇:
CSS3 笔记
下一篇:
Windows 10 桌面版的 OEM 部署

    • Copyright © 2024 南辞的家
    Powered by 南辞 | Hexo
    Theme Bamboo

    本站总访问量： 次 |