HTML-基础知识总结与快速回顾

无处的风

已于 2022-08-22 00:23:06 修改

阅读量118

点赞数

分类专栏：总结文章标签： html 前端 html5

于 2022-08-22 00:18:13 首次发布

本文链接：https://blog.csdn.net/xx1233218/article/details/126457777

版权

总结专栏收录该内容

1 篇文章 0 订阅

订阅专栏

基本标签

标签	描述
!DOCTYPE	文档类型
html	html文档
head	文档信息
title	网页标题
body	主体部分
meta	文档元信息

HTML 文档的基本组成部分

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>拾柒的博客</title>
  </head>
  <body>
  </body>
</html>

页面标签

标签	描述
div	块级元素
main	文档主要区域
footer	文档页脚区域
article	文章区域
header	文档的头部区域
nav	文档导航区域
h1~h6	文档标题
section	区块
aside	侧边栏

基本页面结构

<div>
  <header>
    <nav>
      导航
    </nav>
  </header>
  <main>
    <article>
      <section><h2>内容</h2></section>
    </article>
    <aside>分类</aside>
  </main>
  <footer>基本信息</footer>
</div>

文本

标签	描述
p	块级文本
span	行内文本
pre	保留空白和换行
br	换行
time	时间
small	描述
abbr	缩写
sub	下标
sup	上标
del	删除线
s	删除线
code	代码
progress	进度
strong	粗体
em	斜体
mark	突出
cite	引用
blockquote	块引用
q	行内引用
address	地址

表单

标签	描述
form	文档表单
fieldset	表单中元素的边框
legend	fieldset元素的标题
label	input元素的标注
input	输入框
textarea	多行文本输入框
select	选择器
option	选择列表中的选项
optgroup	选择列表相关选项的组合
datalist	定义选择列表。为input框可能的值

from

属性	描述
action	后台地址
method	提交方式GET 或 POST

<form action="xxx.php" method="GET">
  <fieldset>
    <legend>拾柒</legend>
    <input type="text" />
  </fieldset>
</form>

input

属性	描述
type	表单类型默认为text
name	名称
required	是否必填
placeholder	提示文本内容
value	默认值
maxlength	允许最大输入字符数
size	表单显示长度
disabled	是否禁止使用
readonly	是否只读
capture	使用麦克风、视频或摄像头方式获取上传的文件，值有microphone, video, camera
accept	可接受的文件格式，type为file时可用
pattern	文本校验
checked	是否被选中
min	最小可选择时间，type为时间类型时可用
max	最大可选择时间，type为时间类型时可用
step	间隔，date 缺省是1天，week缺省是1周，month缺省是1月
autocomplete	是否显示之前输入过的键

和label结合

点击label自动聚焦到input框上

<form>
  <label for="title">账号：</label>
  <input type="text" id="title" />
</form>

type类型描述

类型	描述
email	邮箱
url	URL 地址
password	密码
tel	电话号码
search	搜索框
file	文件
hidden	隐藏表单
submit	提交表单
radio	单选框
checkbox	复选框
date	日期
week	周
month	月

file

<input type="file" multiple="multiple" accept="image/png,image/gif">

调取摄像头

当 input 类型为 file 时手机会让用户选择图片或者拍照，如果想直接调取摄像头使用以下代码

<input type="file" capture="camera" accept="image/*" />

radio

<form>
  <input type="radio" value="boy" id="boy" />
  <label for="boy">男</label>
  <input type="radio"value="girl" id="girl" checked />
  <label for="girl">女</label>
</form>

checkbox

<form>
  <input type="checkbox" value="boy" id="boy" />
  <label for="boy">男</label>
  <input type="checkbox" value="girl" id="girl" checked />
  <label for="girl">女</label>
</form>

date

<input type="date" step="1" min="2022-01-01" max="2022-02-01">

search

<input type="search" autocomplete="on" />

pattern

属性	描述
pattern	正则表达式验证规则
oninvalid	输入错误时触发的事件

<script>
  function validate() {
    alert('输入区间有误');
  }
</script>
<form>
  <input
    type="text"
    name="username"
    pattern="[A-z]"
    oninvalid="validate()"
  />
  <button>提交</button>
</form>

textarea

属性	描述
cols	列数
rows	行数

select

选项	说明
multiple	是否支持多选
size	列表框高度
selected	选中状态

<form>
  <select>
    <option>语言</option>
    <optgroup label="前端">
      <option value="HTML">HTML</option>
      <option value="CSS">CSS</option>
      <option value="JAVASCRIPT">JAVASCRIPT</option>
    </optgroup>
    <optgroup label="后端">
      <option value="JAVA">JAVA</option>
      <option value="PHP">PHP</option>
      <option value="GO">GO</option>
    </optgroup>
  </select>
</form>

datalist

<form>
  <input type="text" list="article" />
  <datalist id="article">
    <option value="HTML">HTML</option>
    <option value="CSS">CSS</option>
    <option value="JAVASCRIPT">JAVASCRIPT</option>
  </datalist>
</form>

列表标签

有序列表

选项	说明
ol	有序列表
ul	无序列表
li	列表内容
dl	描述列表
dt	描述列表标题
dd	描述列表内容

<dl>
  <dt>前端</dt>
  <dd>HTML</dd>
  <dd>CSS</dd>
  <dt>后端</dt>
  <dd>JAVA</dd>
  <dd>PHP</dd>
</dl>

链接

选项	说明
href	跳转地址
target	_blank 新窗口打开 _self 当前窗口打开
title	链接提示文本

<a href="https://freenode.cn" target="_blank" title="拾柒">拾柒</a>

图片

属性	说明
src	图片地址
alt	图像打开异常时的替代文本

<img src="freenode.png" alt="拾柒"/>

表格

标签	描述
	表格
caption	表格标题
thead	表头部分
tbody	表格主体部分
tfoot	表格尾部

<table border="1">
  <caption>
    标题
  </caption>
  <thead>
    <tr>
      <th>表头</th>
      <th>表头</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>表格</td>
      <td>表格</td>
    </tr>
  </tbody>
</table>

表格属性

属性	描述
border	边框粗细
colspan	单元格列合并
rowspan	单元格行合并

<table border="1">
  <caption>
    标题
  </caption>
  <thead>
    <tr>
      <th>表头</th>
      <th>表头</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="2">表格</td>
      <td>表格</td>
    </tr>
    <tr>
      <td rowspan="2">表格</td>
      <td>表格</td>
      <td>表格</td>
    </tr>
    <tr>
      <td>表格</td>
      <td>表格</td>
    </tr>
  </tbody>
</table>

视频

属性	描述
autoplay	视频在就绪后马上播放（需要指定类型如 type=“video/mp4”)
preload	视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。如果视频观看度低可以设置为 preload="none"不加载视频数据减少带宽。如果设置为 preload=metadata值将加载视频尺寸或关键针数据，目的也是减少带宽占用。设置为preload=“auto” 时表示将自动加载视频数据
controls	显示控件，比如播放按钮
height	设置视频播放器的高度
width	设置视频播放器的宽度
loop	完成播放后再次开始播放
muted	静音
poster	点击播放前显示的图像
src	要播放的视频的 URL

<video
  src="freenode.mp4"
  autoplay="autoplay"
  loop
  muted
  controls
  width="500"
  height="300"
>
  <source src="freenode.mp4" type="video/mp4" />
  <source src="freenode.webm" type="video/webm" />
</video>

声音

属性	描述
autoplay	音频在就绪后马上播放
preload	音频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。如果音频观看度低可以设置为 `preload="none"` 不加载音频数据减少带宽。如果设置为 `preload="metadata"`值将加载音频尺寸或关键针数据，目的也是减少带宽占用。设置为`preload="auto"` 时表示将自动加载音频数据
controls	显示控件，比如播放按钮
loop	完成播放后再次开始播放
muted	静音
src	要播放的音频URL

<audio controls autoplay loop preload="auto">
  <source src="freenode.ogg" type="audio/ogg" />
  <source src="freenode.mp3" type="audio/mp3" />
</audio>