头部元素
<head>
标签中包括了哪些内容?
<title>
与h1
的区别在于<title>
是为整个HTML文档添加标题,会在添加书签的时候建议用做书签名。h1
主要是为<body>
添加标题的。
<meta>
元数据就是描述数据的数据。
charset
属性规定了文档中的字符编码。
name
指定了meta元素类型,可以取author
description
viewport
等值; content
属性指定了实际的元数据内容。
<link>
rel
href
属性,用于添加页面自定义图标或样式表
script
专门用于在HTML页面中应用JavaScript。
文字处理
p
段落h1
标题- 有序列表
<ol>
/无序列表<ul>
/ 列表元素<li>
/嵌套列表/描述列表(description list)<dl>
— 描述术语<dt>
— 描述列表的描述部分<dd>
会产生缩进。 <em>
表示强调/<strong>
表示非常重要/可以被嵌套在其他标签中<b>
<i>
<u>
仅仅影响表现且没有语义,是表象元素(presentational element)。
二者区别在于语义。<em>
<strong>
会表现出斜体/加粗是因为这是浏览器默认行为,是可以被更改的,用这个标签不是为了获得斜体风格。<b>
<i>
<u>
就是纯粹为了表现出特定的风格。
- 引用 块引用
<blockquote cite=""></blockquote>
— 行内引用<q cite=""></q>
。注意cite
属性不会被显示,如果需要显示该引用来源,直接用<cite>
标签包裹住内容,并在外层嵌套一个<a href>
超链接。 <address>
标记联系方式。<sup> <sub>
标记上下标。<time datetime=""></time>
提供机器可识别的时间和日期。
布局元素
有语义
<main>
一个页面上用一次,直接位于<body>
中。<article>
存放与页面其他布局元素无关的文章。<section>
适用于组织页面使其按功能分块。<aside>
侧边栏,补充信息。<header>
作body
的子元素就是网站的全局页眉;如果是<article>
或者<section>
的子元素就是这部分特有的页眉。注意和<head>
标题区分。<nav>
页面主导航功能。<footer>
包含了页面的页脚。
无语义
应用场景
- 之前有语义的元素无法对应
- 只想将一组元素作为一个单独的实体来修饰响应单一的CSS和JavaScript。
分类
内联无语义元素<span>
块级无语义元素<div>
多媒体元素
有时被称为替换元素,因为这个元素的内容和尺寸由外部资源所定义,而不是元素自身。
元素自身属于空元素,没有闭合标签,标签内容为空。
图片
位图用像素网格定义,精确包含每个像素的位置和它的色彩信息。有.bitmap .png .jpg .gif
。
矢量图用算法定义,包含图形和路径的定义,电脑根据定义计算出该如何呈现。有SVG格式,SVG是描述矢量图像的XML语言,用于标记图形。将矢量图添加到HTML的方法有三种:利用<img>
,直接复制SVG代码,并内联到HTML文件中,使用<iframe>
。
img
标签的属性如下:
src
想要引入的图片的绝对路径或相对路径alt
备选文本,值是对该图片的文字描述width height
设置图片大小title
鼠标悬停在图片上会有提示信息
<figure>
<figcaption>
为图片提供一个语义容器,在
HTML图片是具有语义的,而用CSS构建的图片只是为了起装饰作用。
音视频
video
audio
标签的属性如下:
src
controls
没有取值,是一个布尔变量,使其包含浏览器提供的控制界面。也可以使用JS API自定义控件界面。- video标签的内容是后备内容,当浏览器不支持
<video>
标签时就会显示这段内容。 - 在video标签内容中提供多个
<source>
播放源以提高兼容性。
媒体文件的内容有多种形式,类似于MP3、MP4、WebM这些属于叫做容器格式,它们定义了生成媒体文件的音频轨道/视频轨道/文本轨道的储存结构,一些描述性的元数据,和编码译码器。
因为浏览器支持的coder-decoder有所不同,为了兼容不同的浏览器,需要利用
<source>
标签提供不同格式的源文件。
autoplay
自动播放,不建议。loop
循环播放,不建议。muted
播放时默认关闭声音。poster
视频封面。preload
缓冲较大文件。<track>
标签的src
属性是.vtt
文件,kind
属性可以取值subtitles/captions/descriptions,srclang
属性高速浏览器你编写文件的语言。
在当前页面嵌入外部内容
iframe
能够将其他Web文档嵌入到当前文档中,适用于将第三方内容嵌入网站,存在安全隐患。
allowfullscreen
布尔变量。frameborder=""
src=""
width="" height=""
sandbox
布尔变量,建议始终使用sandbox属性。沙盒定义:一个允许包含在其里的代码以适当的方式执行或者用于测试,但不能对其他代码库(意外或恶意)造成任何损害的容器。object
embed
嵌入各种形式的插件。
响应式图片
一种可以在不同的屏幕尺寸和分辨率设备上良好工作的图片。涉及到美术设计问题和分辨率切换问题。
分辨率切换可以通过<img>
元素的srcset
和sizes
两个属性来实现。
美术设计可以通过<pictures>
元素来实现。
依据设备选择图片源
适用于不同图片尺寸的方案srcset
+sizes
:srcset
定义允许选择的图像集,双引号内用逗号分隔。每一个可选项包括:文件名+空格+以w
为单位的图像的固有宽度。
sizes
定义一组媒体条件,双引号内用逗号分隔。每一个可选媒体条件包括:带括号的媒体条件(不要忘了冒号)+空格+媒体条件为真时图像将填充的槽的宽度。最后一个逗号后面只有槽的宽度,是默认匹配。
1 | <img srcset="elva-fairy-320w.jpg 320w, |
浏览器行为:查看设备宽度 — 查询sizes
匹配合适的媒体条件 — 找到对应的媒体条件的槽的大小 — 依据已知槽的大小去选择最接近该槽大小的srcset
列表中的图像。
依据显示器分辨率选择源
适用于相同图片尺寸不同分辨率的方案srcset
+x语法:srcset
定义允许选择的图像集,可选项包括:文件名+空格+以x
为单位的数据(代表多少倍)。
1 | <img srcset="elva-fairy-320w.jpg, |
浏览器行为:计算出当前显示器的分辨率 — 从 srcset
中找出最合适的引用图片。
依据设备大小裁剪显示图片的不同部分
<picture>
:为不同的布局提供不同裁剪的图片,不同的图片突出的细节不同。可以在<picture>
标签中包含<source>
标签,浏览器会从上至下匹配media条件,一旦条件为真就会使用该图片。为了避免浏览器不支持该表篇,最后必须有的带有src
和alt
属性的<img>
标签。
1 | <picture> |
表单
HTML表单主要用于收集数据并将这些数据发送到服务器,需要有一个Web服务器来接收和处理数据。
<form>
定义了表单和确定表单属性的行为。是创建一切HTML表单的开始。
action
定义了提交表单的时候,这里收集到的键/值形式的数据送往那个URL,可以是一个PHP文件。
method
定义发送数据的HTTP方法时get还是post,无论使用哪一种方法,服务器接收到的都是一个字符串。
enctype
默认情况下该属性值为application/x-www-form-urlencoded
,意思是已编码为URL参数的表单数据。如果要发送文件,需要将值设置为multipart/form-data
。同时包含file picker小部件。
<fieldset>
用于创建具有相同目的的小部件组的方式,相当于功能相同一起打包,方便后续一起添加样式或者语义。在其开口标签之后添加<legend></legend>
来描述这个小部件组的用途。 具体应用于:包裹着一组单选按钮;对长表单进行分段,使之可以放在不同的页面上,提高可用性。
一般使用
<div>
<fieldset>
<section>
h
标题<p>
标签同时包装标签和对应的的小部件,可以构造更复杂的表单。例如section>h2+p的组合。
表单元素的通用属性
autofocus
布尔属性,加载时自动聚焦
disabled
布尔属性,表示用户不能与元素交互。继承。
name
元素名称,和数据一起提交。
value
元素初始值。
单行文本框
<input>
通用属性包括
readonly
disabled
(输入值永远不会和表单数据的其余部分一起发送)size
(框的物理尺寸)maxlength
(可输入的最大字符数目)placeholder
(文本库中出现的文本,用来粗略描述输入框目的)。<type>
是<input>
最重要的属性,定义了接收数据的格式。注意<input>
是一个空标签。
text
是<type>
的默认值和备用值,用于创建单行文本框。password
属性值用于创建密码框。email
属性值用于创建邮件地址框。search
属性值用于创建搜索框,样式上会呈现出圆角以及‘x’清除。tel
属性值用于创建电话号码栏。可选中项的创建基于:
checked
布尔属性+type=???
取值发送数据时的行为与其他表单小部件不同。表单发送时,只有在选中该选项时,才会提交选中的
value
和name
,不选择是不发送的。type="checkbox"
属性值用于复选框type="radio"
属性值用于创建单选按钮
value
因为input
是空标签,所以定义它的的初始值要用value
属性来实现。id
属性是为了和<label>
的for
属性值匹配。name
用于告诉浏览器这个数据的名称是什么,从而通过HTTP报文发送过去后服务器端可以按照名称收集并处理数据块。list
该属性值和<datalist>
元素的id
值相同,绑定之后提供提供数据列表(datalist>option*n
)。
多行文本框
<textarea>
多行文本框,允许用户包含硬换行符(按回车)。有开始标签和结束标签,和<input>
区别在于文本默认值的设定。
为输入框起名字/输入框是否必填
<label>
的for
属性值和<input>
的id
属性值相匹配。<label>
的内容就是该输入框的名字。完成绑定之后,可以将该输入框名字和该输入框相匹配,点击该输入框名字可以激活后面的输入框。
required
元素属性+伪类:optinal
:required
属于简单的客户端表单验证
下拉窗口
用于创建单选框下拉窗口,其中有一个或多个<option>
元素作为子元素。多选选择框的创建就是将multiple
属性添加到<select>
中,直接显示的不是下拉窗口而是所有列表。
<option>
元素还可以作为子元素嵌套在<optgroup>
中。<option>
的<value>
规定了表单提交时应该发送的数据。
按钮
<button>
按钮, type
属性有三种取值。这三个取值也可以在<input>
的type
属性中设置,技术上同样可以实现按钮。
submit
取值会将表单数据发送到<form>
里action
属性定义的网页中。reset
重置为默认值。button
不会发生任何事,可以用JavaScript构建定制按钮。
表单样式需要考虑的点
字体和文本统一
为了让表单的字体外观和其他内容保持一致使用
1 | button, input, select, textarea { |
盒子模型统一
每个小部件都有自己的边框,填充和边距的规则,如果统一所有小部件的风格,需要使用到box-sizing
属性。
This is because each widget has their own rules for border, padding and margin. To give the same size to several different widgets, you can use the
box-sizing
property along with some consistent values for other properties
1 | input, textarea, select, button { |
把特定的内容放在特定的位置定位
<legend>
元素最容易定位,总是存在于父元素fieldset
的内部,默认是在上边框的最顶端。如果想要把它放在fieldset
的内部其他地方,需要先对fieldset
定位,在对legend
定位。
<textarea>
元素被浏览器默认为display: inline-block,与文本底线对齐。
appearance: controlling OS-level styling
浏览器内核引擎大致有Gecko(Firefox)、Webkit(Safari/Chrome),每个引擎默认的网页排版与元素默认表现方式都不一样,所以需要加前缀指定特定浏览器内核下的样式。
为了使浏览器特有的样式失效,可以使用appearance
和带前缀的appearance
(是非标准属性),使其值为none
。
1 | select, option { |
其他表单部件
基于input
元素,type
属性取值+其他辅助属性。
- 数字 number + min + max + step
- 滑块 range + min + max + step
- 本地时间 datetime-local + min + max
- 月 month + min + max
- 时间 time + min + max
- 星期 week + min + max
- 拾色器 color
- 文件接收 file + accept(约束文件类型的属性) + multiple(允许接收多个文件的属性)
- 不可见隐藏内容 hidden + name +value
- 图像按钮 image (提交表单时提交的数据是相对于图像的XY坐标,形式为
name.x/name.y
,常用于构建热图)
进度条,基于progress
元素。
仪表,基于meter
元素。
使用JavaScript发送表单
HTML表单只负责收集用户输入,当用户尝试发送数据时,应用程序在后台采取控制并异步地传输数据,只更新UI中需要更改的部分。
异步地发送任何数据被称为AJAX(Asynchronous JavaScript and XML)
。
AJAX就是在不刷新当前页面的情况下,使用XMLHttpRequest(XHR)
DOM对象和服务器进行通信(发送HTTP请求,接收服务器数据),可以使用的数据格式有JSON、XML、HTML和text文本。
构建XMLHttpRequest发送表单数据
基本步骤
新建一个
XMLHttpRequest
对象告诉XMLhttp请求对象的
onreadystatechange
属性命名为请求状态改变时调用的函数,这里只是一个引用赋值,并不是调用,此函数需要提前声明。或者直接使用匿名函数响应处理的操作。声明接到响应后要做什么。发送一个实际的请求,通过调用HTTP请求对象的
open()
和send()
方法。
1 | httpRequest.open('GET/POST/HEAD', URL, true-by-default-for-synchroneous); |
- 回调函数处理服务器响应的步骤:检查请求状态,即服务器是否收到了请求并且没有问题
httpRequest.readyState === XMLHttpRequest.DONE
;其次判断响应码范围if(request.status >= 200 && request.status < 400)
;利用httpRequest.responseText/responseXML
获取返回数据。
细节
- 对空格的处理
1 | // Combine the pairs into a single string and replace all %-encoded spaces to |
- 服务器请求状态readyState与响应状态status作区分
- 对于POST方法需要设定HTTP header
1 | // Add the required HTTP header for form data POST requests |
XMLHttpRequest+FormData
引入新的FormData
对象,只可写(write only)can change them but not retrive their contents。
- 新建空的FormData对象
const FD = new FormData()
,后续利用append()
更新。 - 将FormData对象与HTML表单form元素绑定
const FD = new FormData(form)
二进制数据处理
哪里获得二进制数据?FileReader API、Canvas API、 WebRTC API。
直接利用formData的append()方法。
如果出现多种类型的表单数据,需要手动构建。需要定义一个分隔符来定义请求的每一个部分,该分隔符前面有其他符号,分隔符后面有换行。每一个类型的数据再放入data字符串时要有metada+data两个部分。
- 本文标题:HTML基础知识
- 本文作者:徐徐
- 创建时间:2020-10-19 11:14:48
- 本文链接:https://machacroissant.github.io/2020/10/19/html-revision/
- 版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!