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

基本标签

标签描述
!DOCTYPE文档类型
htmlhtml文档
head文档信息
title网页标题
body主体部分
meta文档元信息
HTML 文档的基本组成部分
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>拾柒的博客</title>
  </head>
  <body>
  </body>
</html>
meta

设置屏幕缩放

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

网页关键词(SEO)

<meta name="keywords" content="博客“/>

网页内容描述(SEO)

<meta name="description" content="拾柒的博客"/>

网页作者

<meta name="author"content="拾柒"/>

定义文档的字符编码

<meta charset="utf-8">

指定网页缓存时间的期限,一旦网页缓存时间过期,网页就必须从服务器上重新缓存一次。 时间必须为GMT时间,即按照"星期 日 月 年 时间 GNT"的格式

<meta http-equiv="expires"content="Wed, 20 Jun 2022 23:59:59 GMT">

禁止浏览器从本地计算机的缓存中访问页面内容

<meta http-equiv="Pragma"content="no-cache">

自动刷新并指向新页面。下例为每60秒自动刷新到新页面

<meta http-equiv="Refresh"content="60;URL=https://www.freenode.cn">

网页过期,那么存盘的cookie将被删除

<meta http-equiv="Set-Cookie"content="cookie value=xxx;expires=Wed, 20 Jun 2022 23:59:59 GMT;path=/">

页面标签

标签描述
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表单中元素的边框
legendfieldset元素的标题
labelinput元素的标注
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邮箱
urlURL 地址
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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值