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

基本标签

标签	描述
!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><inputtype="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

<videosrc="freenode.mp4"autoplay="autoplay"loopmutedcontrolswidth="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>

HTML-基础知识总结与快速回顾相关推荐

HTML day_01(5.31)Web基础知识、HTML快速入门、文本、图像和链接
一.课程安排 1.HTML5天所有的网页结构,数据都是由h5搭建的 2.AJAX 5天异步的数据交互,帮我们进行异步的连接服务器,发送请求,接收响应 3.CSS3 8天美化页面,让页面做的更好看 ...
计算机基础知识教程算法,快速掌握！计算机二级公共基础知识教程：算法
小编所收集到的相关计算机二级公共基础知识教程:算法的资料大家要认真阅读哦! 算法是指解题方案的准确而完整的描述.即是一组严谨地定义运算顺序的规则,并且每一个规则都是有效的,且是明确的,没有二义性,同 ...
【基础知识】如何快速转发CSDN博客
使用:火狐浏览器.Markdown编辑器一.打开要转发的博客.按F12并点击查看器二.复制页面的代码(此处用到一个小技巧) 1.鼠标点击该按钮 2.将鼠标放到图示位置,使变色的位置覆盖所有博客的内 ...
Java基础知识总结——java快速入门
逢考必过,祝复习考试的你,顺利通过,B站账号@狼群里的小杨,记得点赞收藏加关注,一键三连哦! 第一章知识点总结 1.java语言的主要贡献者是James Gosling 2.开发Java应用程序的基 ...
Kali Linux渗透基础知识整理（四）：维持访问
Kali Linux渗透基础知识整理系列文章回顾维持访问在获得了目标系统的访问权之后,攻击者需要进一步维持这一访问权限.使用木马程序.后门程序和rootkit来达到这一目的.维持访问是一种艺术形式 ...
Unity中的MonoBehaviour脚本-基础知识和继承关系
本文分享Unity中的MonoBehaviour脚本-基础知识和继承关系作为一个程序员, 在Unity中开发, 我们接触最多的对象之里一定有MonoBehaviour, 所以作为Unity基础知识学 ...
【笔记】——MySQL数据库——基础知识-——快速回顾——(加深印象篇)
文章目录前言一.MySQL是什么? 二.数据库的常见概念三.数据库存储数据的特点四.SQL语言的分类 1.)DML 2.)DDL 3.)DCL 五.数据库的基本操作 5.1.)创建数据库 5. ...
【Java基础知识回顾篇】之打怪升级Day001
Java基础知识回顾篇之打怪升级Day001 目录 Java基础知识回顾篇之打怪升级Day001 简介一.为什么现在主流的是Java8和Java11? 二.简单尝试编写java程序 1.编写一个He ...
python基础一入门必备知识-Python快速入门指南基础知识详细说明
随着人工智能大火,我们身边几乎处处充满着AL的气息,就连停车,都是机器人值班了. 可是很多人都不知道人工智能是由什么开发的,各种相关联的框架都是以Python作为主要语言开发出来的. Python本身 ...

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

基本标签

HTML 文档的基本组成部分

meta

页面标签

基本页面结构

文本

表单

from

input

和label结合

type类型描述

file

调取摄像头

radio

checkbox

date

search

pattern

textarea

select

datalist

列表标签

有序列表

链接

图片

表格

表格属性

视频

声音

HTML-基础知识总结与快速回顾相关推荐

最新文章

热门文章