HTML基础知识
徐徐 抱歉选手

头部元素

<head>标签中包括了哪些内容?

<title>

h1的区别在于<title>是为整个HTML文档添加标题,会在添加书签的时候建议用做书签名。h1主要是为<body>添加标题的。

<meta>

元数据就是描述数据的数据。

charset属性规定了文档中的字符编码。

name指定了meta元素类型,可以取author description viewport 等值; content属性指定了实际的元数据内容。

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>元素的srcsetsizes两个属性来实现。

美术设计可以通过<pictures>元素来实现。

依据设备选择图片源

适用于不同图片尺寸的方案srcset+sizes:srcset定义允许选择的图像集,双引号内用逗号分隔。每一个可选项包括:文件名+空格+以w为单位的图像的固有宽度。

sizes定义一组媒体条件,双引号内用逗号分隔。每一个可选媒体条件包括:带括号的媒体条件(不要忘了冒号)+空格+媒体条件为真时图像将填充的槽的宽度最后一个逗号后面只有槽的宽度,是默认匹配。

1
2
3
4
5
6
7
<img srcset="elva-fairy-320w.jpg 320w,
elva-fairy-480w.jpg 480w,
elva-fairy-800w.jpg 800w"
sizes="(max-width: 320px) 280px,
(max-width: 480px) 440px,
800px"
src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

浏览器行为:查看设备宽度 — 查询sizes匹配合适的媒体条件 — 找到对应的媒体条件的槽的大小 — 依据已知槽的大小去选择最接近该槽大小的srcset列表中的图像。

依据显示器分辨率选择源

适用于相同图片尺寸不同分辨率的方案srcset+x语法:srcset定义允许选择的图像集,可选项包括:文件名+空格+以x为单位的数据(代表多少倍)。

1
2
3
4
<img srcset="elva-fairy-320w.jpg,
elva-fairy-480w.jpg 1.5x,
elva-fairy-640w.jpg 2x"
src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy">

浏览器行为:计算出当前显示器的分辨率 — 从 srcset中找出最合适的引用图片。

依据设备大小裁剪显示图片的不同部分

<picture>:为不同的布局提供不同裁剪的图片,不同的图片突出的细节不同。可以在<picture>标签中包含<source>标签,浏览器会从上至下匹配media条件,一旦条件为真就会使用该图片。为了避免浏览器不支持该表篇,最后必须有的带有srcalt属性的<img>标签。

1
2
3
4
5
<picture>
<source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
<source media="(min-width: 800px)" srcset="elva-800w.jpg">
<img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</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>

  1. 通用属性包括readonly disabled(输入值永远不会和表单数据的其余部分一起发送) size(框的物理尺寸) maxlength(可输入的最大字符数目) placeholder(文本库中出现的文本,用来粗略描述输入框目的)。

  2. <type><input>最重要的属性,定义了接收数据的格式。注意<input>是一个空标签。

  • text<type>的默认值和备用值,用于创建单行文本框。

  • password属性值用于创建密码框。

  • email属性值用于创建邮件地址框。

  • search属性值用于创建搜索框,样式上会呈现出圆角以及‘x’清除。

  • tel属性值用于创建电话号码栏。

  • 可选中项的创建基于: checked布尔属性+type=???取值

    发送数据时的行为与其他表单小部件不同。表单发送时,只有在选中该选项时,才会提交选中的valuename,不选择是不发送的。

    • type="checkbox"属性值用于复选框
    • type="radio"属性值用于创建单选按钮
  1. value因为input是空标签,所以定义它的的初始值要用value属性来实现。

  2. id属性是为了和<label>for属性值匹配。

  3. name用于告诉浏览器这个数据的名称是什么,从而通过HTTP报文发送过去后服务器端可以按照名称收集并处理数据块。

  4. 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
2
3
4
button, input, select, textarea {
font-family : inherit;
font-size : 100%;
}

盒子模型统一

每个小部件都有自己的边框,填充和边距的规则,如果统一所有小部件的风格,需要使用到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
2
3
4
5
6
7
8
input, textarea, select, button {
width : 150px;
margin: 0;

-webkit-box-sizing: border-box; /* For legacy WebKit based browsers */
-moz-box-sizing: border-box; /* For legacy (Firefox <29) Gecko based browsers */
box-sizing: border-box;
}

把特定的内容放在特定的位置定位

<legend>元素最容易定位,总是存在于父元素fieldset的内部,默认是在上边框的最顶端。如果想要把它放在fieldset的内部其他地方,需要先对fieldset定位,在对legend定位。

<textarea>元素被浏览器默认为display: inline-block,与文本底线对齐。

appearance: controlling OS-level styling

浏览器内核引擎大致有Gecko(Firefox)、Webkit(Safari/Chrome),每个引擎默认的网页排版与元素默认表现方式都不一样,所以需要加前缀指定特定浏览器内核下的样式。

为了使浏览器特有的样式失效,可以使用appearance和带前缀的appearance(是非标准属性),使其值为none

1
2
3
4
5
6
7
8
select, option {
-webkit-appearance : none; /* To gain control over the appearance on WebKit/Chromium */
-moz-appearance : none; /* To gain control over the appearance on Gecko */

/* To gain control over the appearance on and Trident (IE)
Note that it also works on Gecko and has partial effects on WebKit */
background : none;
}

其他表单部件

基于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发送表单数据

基本步骤

  1. 新建一个XMLHttpRequest对象

  2. 告诉XMLhttp请求对象的onreadystatechange属性命名为请求状态改变时调用的函数,这里只是一个引用赋值,并不是调用,此函数需要提前声明。或者直接使用匿名函数响应处理的操作。

  3. 声明接到响应后要做什么。发送一个实际的请求,通过调用HTTP请求对象的open()send()方法。

1
2
httpRequest.open('GET/POST/HEAD', URL, true-by-default-for-synchroneous);
httpRequest.send(what-you-want-to-send-to-the-server);
  1. 回调函数处理服务器响应的步骤:检查请求状态,即服务器是否收到了请求并且没有问题httpRequest.readyState === XMLHttpRequest.DONE;其次判断响应码范围if(request.status >= 200 && request.status < 400);利用httpRequest.responseText/responseXML获取返回数据。

细节

  • 对空格的处理
1
2
3
// Combine the pairs into a single string and replace all %-encoded spaces to 
// the '+' character; matches the behaviour of browser form submissions.
urlEncodedData = urlEncodedDataPairs.join( '&' ).replace( /%20/g, '+' );
  • 服务器请求状态readyState与响应状态status作区分
  • 对于POST方法需要设定HTTP header
1
2
3
// Add the required HTTP header for form data POST requests
XHR.setRequestHeader( 'Content-Type', 'application/x-www-form-urlencoded' );

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 许可协议。转载请注明出处!
 评论