HTML基础

Posted 2021-07-05 OIqng

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML基础相关的知识，希望对你有一定的参考价值。

html

什么是HTML？

HTML 指的是超文本标记语言 (Hyper Text Markup Language)。
HTML 不是一种编程语言，而是一种标记语言 (markup language)。
标记语言是一套标记标签 (markup tag)。
HTML 使用标记标签来描述网页。

语义化标签

标签	描述
`<title>`	页面主体内容
`<hn>`	h1~h6，分级标题，`<h1>` 与 `<title>` 协调有利于搜索引擎优化
`<ul>`	无序列表
`<li>`	有序列表
`<header>`	页眉通常包括网站标志、主导航、全站链接以及搜索框
`<nav>`	标记导航，仅对文档中重要的链接群使用
`<main>`	页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能
<`article>`	定义外部的内容，其中的内容独立于文档的其余部分
`<section>`	定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分
`<aside>`	定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等
`<footer>`	页脚，只有当父级是body时，才是整个页面的页脚
`<small>`	呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权
`<strong>`	和 em 标签一样，用于强调文本，但它强调的程度更强一些
`<em>`	将其中的文本表示为强调的内容，表现为斜体
`<mark>`	使用黄色突出显示部分文本
`<figure>`	规定独立的流内容（图像、图表、照片、代码等等）（默认有40px左右margin)
`<figcaption>`	定义 figure 元素的标题，应该被置于 figure 元素的第一个或最后一个子元素的位置
`<cite>`	表示所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题
`<blockquoto>`	定义块引用，块引用拥有它们自己的空间
`<q>`	短的引述（跨浏览器问题，尽量避免使用）
`<time>`	datetime属性遵循特定格式，如果忽略此属性，文本内容必须是合法的日期或者时间格式
`<abbr>`	简称或缩写
`<dfn>`	定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用
`<address>`	作者、相关人士或组织的联系信息（电子邮件地址、指向联系信息页的链接）
`<del>`	移除的内容
`<ins>`	添加的内容
`<code>`	标记代码
`<meter>`	定义已知范围或分数值内的标量测量。（Internet Explorer 不支持 meter 标签）
`<progress>`	定义运行中的进度（进程）

文本格式化标签

标签	描述
`<b>`	定义粗体文本
<`em>`	定义着重文字
`<i>`	定义斜体字
`<small>`	定义小号字
`<strong>`	定义加重语气
`<sub>`	定义下标字
`<sup>`	定义上标字
`<ins>`	定义插入字
`<del>`	定义删除字

<b>这是粗体</b>
<br/>
<em>这是着重文字</em>
<br/>
<i>这是斜体字</i>
<br/>
<small>这是小号字</small>
<br/>
<strong>这是加重语气</strong>
<br/>
这是下标字H<sub>2</sub>O
<br/>
这是上标字10<sup>2</sup>
<br/>
<ins>这是插入字</ins>
<br/>
<del>这是删除字</del>

在这里插入图片描述

“计算机输出”标签

标签	描述
`<code>`	定义计算机代码
`<kbd>`	定义键盘码
`<samp>`	定义计算机代码样本
`<tt>`	定义打字机代码（HTML5不支持）
`<var>`	定义变量
`<pre>`	定义预格式文本

    <dfn>定义一个项目</dfn>
    <br/>
    <code>定义计算机代码文本print("Hello World!")</code>
    <br/>
    <samp>定义样本文本</samp>
    <br/>
    <kbd>定义键盘文本</kbd>
    <br/>
    <var>定义变量</var>
    <br/>
    <pre>定义计算机源码</pre>

在这里插入图片描述

引用、引用和术语定义

标签	描述
`<abbr>`	定义缩写
`<address>`	定义地址
`<bdo>`	定义文字方向
`<blockquote>`	定义长的引用
`<q>`	定义短的引用语
`<cite>`	定义定义引用、引证
`<dfn>`	定义一个定义项目

<abbr title="Hyper Text Markup Language">HTML</abbr>
<br/>
<address>
    Study HTML by: W3School, 菜鸟教程
</address>
<br/>
<bdo dir="rtl">从右到左显示文字</bdo>
<bdo dir="ltr">从左到右显示文字</bdo>
<br/>
<blockquote cite="https://www.runoob.com/tags/tag-blockquote.html">
来自菜鸟教程的blockquote标签讲解
</blockquote>
<br/>
<q>这是一个短引用</q>
<br/>
<cite>定义作品的标题</cite>

在这里插入图片描述

注释

<!--这是一个注释-->

实体字符

标签	描述
`<`	<
`>`	>
` `	空格
`&`	&
`©`	©
`®`	®

基本标签

插入样式表

外部样式表

<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

内部样式表

<head>
<style type="text/css">
#B1 {
margin: 20px
}
</style>
</head>

内联样式

<p style="color: red">这是一个内联样式</p>

表格

table 标签

常用属性：

标签	描述
border	表示表格的边框，默认值为零
width/height	宽度和高度
bordercolor	边框颜色
align	对齐方式取值
bgcolor	背景颜色
background	背景图片
cellspacing	间距，单元格与单元格之间的距离
cellpading	边距，单元格中的内容到边距之间的距离

tr标签

常用属性：

标签	描述
align	表示水平对齐取值：left（默认）
valign	垂直对齐取值：top顶部 middle中间 bottom底部
bgcolor	背景颜色
background	背景图片

td标签

常用属性：align、valign
合并单元格

标签	描述
rowspan	设置单元格所跨的行数
colspan	设置单元格所跨的列数

列表

有序列表 <ol> 标签

默认使用阿拉伯数字、从1开始标记，可以通过属性进行修改。
type属性：设置列表的符号标记、取值；数字1（默认）、字母（a或A）、罗马数字(i或I)。
start属性：设置起始值，值必须是数字。

无序列表 <ul> 标签

默认情况下使用实心圆表作为符号标记，可以通过属性进行修改。
type属性：设置列表的符号标记、取值：disc实心圆（默认）、circle空心圆、square正方形、none不显示项目符号。

定义列表

自定义列表<dl> 标签，自定义列表项 <dt> ，自定义列表项的定义 <dd> 。

块

大多数 HTML 元素被定义为块级元素或内联元素。
“块级元素”译为 block level element，“内联元素”译为 inline element。
<div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。
<span> 元素是内联元素，可用作文本的容器。

水平线标签

常用属性：

标签	描述
color	颜色
size	粗细
width	宽度
align	对齐

图像标签

常见的属性：

标签	描述
src	source指定图片的路径（来源）
alt	当图片无法显示时显示的提示信息
title	当鼠标放到图片上时显示的提示信息
width和height	设置图片的宽度和高度

head 元素

标签	描述
`<head>`	定义了文档的信息
`<title>`	定义了文档的标题
`<base>`	定义了页面链接标签的默认链接地址
`<link>`	定义了一个文档和外部资源之间的关系
`<meta>`	定义了HTML文档中的元数据
`<script>`	定义了客户端的脚本文件
`<style>`	定义了HTML文档的样式文件

超链接

<a href="链接地址" target="链接打开的位置">链接文本或图片</a>

标签	描述
_blank	响应显示在新窗口或选项卡中
_self	响应显示在当前窗口中
_parent	响应显示在父框架中
_top	响应显示在窗口的整个 body 中

锚链接

定义锚点（标记）

<a name="锚点的名称">目标位置</a>

链接锚点

<a href="#锚点名称">链接文本</a>

页面间的锚链接

<a href="目标页面的文件名#锚点名称">链接文本</a>

高级标签

标签	描述
caption标签	表格的标题标签
thehead标签	表格的头部
th标签	表格头部的标题
tbody标签	表格的主体
tfoot	标签表格的底部

表单

表单用于获取琐类型的用户数据。

<form action="表单的提交地址" method="提交方式"> </form>

常用属性：

属性	描述
accept-charset	规定在被提交表单中使用的字符集（默认：页面字符集）
action	规定向何处提交表单的地址（URL）（提交页面）
autocomplete	规定浏览器应该自动完成表单（默认：开启）
enctype	规定被提交数据的编码（默认：url-encoded）
method	规定在提交表单时所用的 HTTP 方法（默认：GET）
name	规定识别表单的名称（对于 DOM 使用document.forms.name）
novalidate	规定浏览器不验证表单
target	规定 action 属性中地址的目标（默认：_self）

target 属性

值	描述
_blank	响应显示在新窗口或选项卡中
_self	响应显示在当前窗口中
_parent	响应显示在父框架中
_top	响应显示在窗口的整个 body 中
framename	响应显示在命名的 iframe 中

<input>表单元素

大多数的表单元素都是使用<input>标签来定义的，通过设置属性type来定义不同的表单元素。

<input type="表单元素类型" name="名称" value="初始值" size="宽度">

type 属性	描述
类型	描述
text	定义常规文本输入
password	定义密码字段
radio	定义单选按钮
checkbox	定义复选框
button	定义按钮
submit	定义提交按钮

<select> 元素（下拉列表）
<option> 元素定义待选择的选项
通过添加 selected 属性来定义预定义选项
<textarea> 元素定义多行输入字段（文本域）
<button> 元素

HTML5 增加了如下表单元素：

<datalist>
<keygen>
<output>

HTML5 <datalist> 元素

<datalist>元素为 <input> 元素规定预定义选项列表。
用户会在他们输入数据时看到预定义选项的下拉列表。
<input>元素的 list 属性必须引用 <datalist>元素的 id 属性。

HTML5增加输入类型

color
List item
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

输入类型：number

<input type="number"> 用于应该包含数字值的输入字段。

输入限制

属性	描述
disabled	规定输入字段应该被禁用
max	规定输入字段的最大值
maxlength	规定输入字段的最大字符数
min	规定输入字段的最小值
pattern	规定通过其检查输入值的正则表达式
readonly	规定输入字段为只读（无法修改）
required	规定输入字段是必需的（必需填写）
size	规定输入字段的宽度（以字符计）
step	规定输入字段的合法数字间隔
value	规定输入字段的默认值

输入类型：date
<input type="date"> 用于应该包含日期的输入字段。

输入类型：color
<input type="color"> 用于应该包含颜色的输入字段。

输入类型：range
<input type="range"> 用于应该包含一定范围内的值的输入字段。

输入类型：month
<input type="month"> 允许用户选择月份和年份。

输入类型：week
<input type="week"> 允许用户选择周和年。

输入类型：time
<input type="time"> 允许用户选择时间（无时区）。

输入类型：datetime
<input type="datetime"> 允许用户选择日期和时间（有时区）。

输入类型：datetime-local
<input type="datetime-local"> 允许用户选择日期和时间（无时区）。

输入类型：email
<input type="email"> 用于应该包含电子邮件地址的输入字段。

输入类型：search
<input type="search"> 用于搜索字段。

输入类型：tel
<input type="tel"> 用于应该包含电话号码的输入字段。

输入类型：url
<input type="url"> 用于应该包含 URL 地址的输入字段。

单行文本框

常用属性：

标签	描述
name	名称
value	初始值
size	显示宽度
maxlength	最大字符数
readonly只读	readonly=“readonly”,可简写readonly
disabled禁用	disabled=“disabled”, 可简写disabled禁用字段

HTML5 属性

HTML5 为 <input> 增加了如下属性：

autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height 和 width
list
min 和 max
multiple
pattern (regexp)
placeholder
required
step

并为 <form> 增加如需属性：

autocomplete
novalidate

autocomplete 属性

autocomplete 属性规定表单或输入字段是否应该自动完成。
autocomplete 属性适用于 <form> 以及如下 <input> 类型：text、search、url、tel、email、password、datepickers、range 以及 color。

novalidate 属性

novalidate 规定在提交表单时不对表单数据进行验证。

autofocus 属性

当页面加载时 <input> 元素应该自动获得焦点。

form 属性

form 属性规定元素所属的一个或多个表单。
注意：如需引用一个以上的表单，请使用空格分隔的表单 id 列表。

formenctype 属性

formenctype 属性规定当把表单数据（form-data）提交至服务器时如何对其进行编码（仅针对 method=“post” 的表单）。
formenctype 属性覆盖元素的 enctype 属性。

formmethod 属性

formmethod 属性定义用以向 action URL 发送表单数据（form-data）的 HTTP 方法。
formmethod 属性覆盖 <form> 元素的 method 属性。

formnovalidate 属性
如果设置，则规定在提交表单时不对 <input> 元素进行验证。
formnovalidate 属性覆盖 <form> 元素的 novalidate 属性。

formtarget 属性
formtarget 属性规定的名称或关键词指示提交表单后在何处显示接收到的响应。
formtarget 属性会覆盖 <form> 元素的 target 属性。

height 和 width 属性

height 和 width 属性规定 <input> 元素的高度和宽度。
height 和 width 属性仅用于 <input type="image">

list 属性

list 属性引用的 <datalist> 元素中包含了 <input> 元素的预定义选项表单元素

min 和 max 属性

min 和 max 属性规定 <input> 元素的最小值和最大值。
min 和 max 属性适用于如需输入类型：number、range、date、datetime、datetime-local、month、time 以及 week。

multiple 属性

如果设置，则规定允许用户在 <input> 元素中输入一个以上的值。
multiple 属性适用于以下输入类型：email 和 file。

pattern 属性

pattern 属性规定用于检查 <input> 元素值的正则表达式。
pattern 属性适用于以下输入类型：text、search、url、tel、email、and password。

placeholder 属性

placeholder 属性规定用以描述输入字段预期值的提示（样本值或有关格式的简短描述）。
该提示会在用户输入值之前显示在输入字段中。
placeholder 属性适用于以下输入类型：text、search、url、tel、email 以及 password。

required 属性

如果设置，则规定在提交表单之前必须填写输入字段。
required 属性适用于以下输入类型：text、search、url、tel、email、password、date pickers、number、checkbox、radio、and file。

以上是关于HTML基础的主要内容，如果未能解决你的问题，请参考以下文章

JSP基础

JSP开发中的基础语法

VSCode自定义代码片段5——HTML元素结构

[Go] 通过 17 个简短代码片段，切底弄懂 channel 基础