文章目录
一、介绍
html全称超文本标记语言(Hyper Text Markup),用于在网页上展现超文本的标记语言。
html经历了很多的版本,最新的为html5,这里介绍的就是html5。浏览器对html的容错性大,即使语法不正确浏览器也能正确解析,但是最好还是使用正确的语法。
html网页中可以同时完成内容展示、页面渲染和用户交互。但是一般都是将这些分离到不同的地方去,比如html只用来展示内容,元素最好体现出语义;css用来美化界面;javascript用来与用户交互。因此这里只给出标签的含义、功能和用法。
html5默认使用utf-8作为文本编码,元素标签大小写不敏感,但建议小写。html默认会过滤掉多余的空格或换行,但是可以通过css改变这种设置。
二、组成
html文档声明、元素和注释组成。
2.1、模板
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
in test.html
</body>
</html>
这里的模板并不是最简单的形式。最简单的形式可以没有head
元素。html
为文档的根元素,head
元素描述了一些和文档相关的内容。所有的可视元素写在body
中。
<!DOCTYPE>
声明该文档为html5,只能出现一次,且必须在最顶部。大小写不敏感。
<meta charset="UTF-8">
为html5指定网页编码的方式,不需要使用使用<meta http-equiv="content-type" content="text/html; charset=UTF-8">
。浏览器事先不知道文档编码却又为何可以读取该元素?请参考:4.3、编码猜测
<meta name="viewport" ...
设置网页大小与视口一致,与css有关,这里不展开。请参考:viewport meta 元素
2.2、元素
html元素通常由开始标签、结束标签和内容组成,标签和属性名大小写不敏感。开始标签中可以有属性,键值对的形式,可用双引号(建议使用)或单引号围住值,也可不用,多个属性通过空格隔开;如果属性值是布尔值,那么可以直接写上属性名不带值;内容可以包含其他元素。空元素没有内容和结束标签,有两种写法,如<br>
,<br/>
。
<tagname attri="value">content goes here...</tagname>
html元素可以大致分为block元素和inline元素。block元素前后会换行然后尽可能的占据所有的行空间;inline元素不换行,占据仅需要的空间。这里会涉及到css,这里暂不展开。
inline元素不能嵌套block元素,即使使用样式display:block
改变它的显示方式也不能嵌套。
2.3、注释
注释会被浏览器忽略。
<!-- Write your comments here -->
三、元素
html元素是html最重要的组成部分,这里会简略讲解html5各个元素,如果没有对应标签,说明不是html5规定的标签。有关css的内容会在另一篇博客中给出。
3.1、属性
属性为html元素提供额外信息。每个元素都有不同的属性,在讨论具体元素时给出,但是有些属性是所有元素都有的,称为全局属性。这里讨论全局属性,全部全局属性参考:Global Attributes
属性 | 描述 |
---|---|
id | 为一个元素指定一个在该网页中唯一的id,css和js都可以通过id访问到该元素。链接和id组合,可以链接到具体一个元素。 |
class | 可以为多个元素指定一个class,相当于将多个元素归为一类。通过css和js可以访问到这一组元素。 |
style | 设置内联样式 |
lang | 指定文档使用的语言 |
title | 提供额外信息,鼠标悬停元素之上时会显示出来 |
contenteditable | 指定元素是否可以被编辑 |
hidden | 隐藏元素,即display:none |
data-* | 自定义属性,在元素中存储数据 |
-
style:样式设置格式:
<tagname style="property:value;[property:value;]...">
其他属性请参考链接。
3.2、basic 元素
Tag | Description |
---|---|
<!DOCTYPE> | Defines the document type |
<html> | Defines an HTML document |
<head> | Defines information about the document |
<title> | 标题,会显示在浏览器的地址栏上 |
<body> | Defines the document’s body |
<h1> to<h6> | Defines HTML headings |
<p> | Defines a paragraph |
<br> | 软换行 |
<hr> | 另起一行,画一条水平线 |
<!--...--> | Defines a comment |
3.3、formatting 元素
formatting元素就是用来格式化(比如加粗、倾斜、变小、加删除线等)文本或其他内容的,对于不同元素浏览器都会提供默认样式。这些样式完全可以通过css改变,因此不要在意是否好看,而是根据语义决定是否使用该元素。
这些元素在平常布局时是不常用的,但是一些编辑器中会被使用到,比如Markdown。这里给出一些有意思的元素。
<pre>
:内容的格式会被保存。- …没了
下面是全部元素:
Tag | Description |
---|---|
<abbr> | Defines an abbreviation or an acronym |
<address> | Defines contact information for the author/owner of a document/article |
<b> | Defines bold text |
<bdi> | Isolates a part of text that might be formatted in a different direction from other text outside it |
<bdo> | Overrides the current text direction |
<blockquote> | Defines a section that is quoted from another source |
<cite> | Defines the title of a work |
<code> | Defines a piece of computer code |
<del> | Defines text that has been deleted from a document |
<dfn> | Represents the defining instance of a term |
<em> | Defines emphasized text |
<i> | Defines a part of text in an alternate voice or mood |
<ins> | Defines a text that has been inserted into a document |
<kbd> | Defines keyboard input |
<mark> | Defines marked/highlighted text |
<meter> | Defines a scalar measurement within a known range (a gauge) |
<pre> | Defines preformatted text |
<progress> | Represents the progress of a task |
<q> | Defines a short quotation |
<rp> | Defines what to show in browsers that do not support ruby annotations |
<rt> | Defines an explanation/pronunciation of characters (for East Asian typography) |
<ruby> | Defines a ruby annotation (for East Asian typography) |
<s> | Defines text that is no longer correct |
<samp> | Defines sample output from a computer program |
<small> | Defines smaller text |
<strong> | Defines important text |
<sub> | Defines subscripted text |
<sup> | Defines superscripted text |
<template> | Defines a template |
<time> | Defines a date/time |
<u> | Defines text that should be stylistically different from normal text |
<var> | Defines a variable |
<wbr> | Defines a possible line-break |
3.3、Links 元素
Tag | Description |
---|---|
<a> | Defines a hyperlink |
<link> | Defines the relationship between a document and an external resource (most used to link to style sheets) |
<nav> | Defines navigation links,用做链接的容器 |
3.3.1、a
语法:
<a href="url" [target="value"] >inline context</a>
属性:
- href:指定链接地址,可以是相对地址。
- target:指定在哪里打开链接
如果target为_top,那么在iframe中点击链接,那么会在当前网页打开链接。
这里要注意的是,url可以与元素id结合(如html_demo.html#C4
),点击该链接时,浏览器会自动定位到该元素。
内容不仅仅是文本,还可以是其他inline元素,比如image。
3.3.2、link
示例:
<link rel="stylesheet" type="text/css" href="theme.css">
属性:
- rel:链接文档与当前文档的关系
- type:链接文档的媒体类型
- href:链接文档的地址
常用于链接样式表,type可以省略。
3.4、images 元素
Tag | Description |
---|---|
<img> | Defines an image |
<map> | Defines a client-side image-map |
<area> | Defines an area inside an image-map |
<canvas> | Used to draw graphics, on the fly, via scripting (usually JavaScript) |
<figcaption> | Defines a caption for a <figure> element |
<figure> | Specifies self-contained content |
<picture> | Defines a container for multiple image resources |
<svg> | Defines a container for SVG graphics |
3.4.1、img
示例:
<img src="pic_trulli.jpg" alt="Italian Trulli">
src和alt必须指定,如果src指定的文件不存在时,会显示alt的文字。
通过width和height可以指定大小,但是如果没有指定,会显示图片默认大小。单位px,但是经测试可以用%。可以被样式覆盖。
3.5、Lists 元素
Tag | Description |
---|---|
<ul> | Defines an unordered list |
<ol> | Defines an ordered list |
<li> | Defines a list item |
<dir> | Not supported in HTML5. Use <ul> instead.Defines a directory list |
<dl> | Defines a description list |
<dt> | Defines a term/name in a description list |
<dd> | Defines a description of a term/name in a description list |
示例:
无序列表
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
有序列表
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
通过样式可以控制列表的外观,通过语义使用它即可。
3.6、tables 元素
Tag | Description |
---|---|
<table> | Defines a table |
<caption> | Defines a table caption |
<th> | Defines a header cell in a table |
<tr> | Defines a row in a table |
<td> | Defines a cell in a table |
<thead> | Groups the header content in a table |
<tbody> | Groups the body content in a table |
<tfoot> | Groups the footer content in a table |
<col> | Specifies column properties for each column within a <colgroup> element |
<colgroup> | Specifies a group of one or more columns in a table for formatting |
3.7、frames 元素
在html5中,只有<iframe>
可用了。
示例:
<iframe src="https://www.baidu.com/" height="200" width="300"></iframe>
效果:
要注意的是,链接<a>
的target属性可以指定要打开链接的的iframe名字。iframe名字通过name给定。
3.8、forms and input
Tag | Description |
---|---|
<form> | Defines an HTML form for user input |
<input> | Defines an input control |
<textarea> | Defines a multiline input control (text area) |
<button> | Defines a clickable button |
<select> | Defines a drop-down list |
<optgroup> | Defines a group of related options in a drop-down list |
<option> | Defines an option in a drop-down list |
<label> | Defines a label for an <input> element |
<fieldset> | Groups related elements in a form |
<legend> | Defines a caption for a <fieldset> element |
<datalist> | Specifies a list of pre-defined options for input controls |
<output> | Defines the result of a calculation |
示例:
<form action="/action_page.php" method="get" target="_self">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>
有name属性的表单元素才会被发送,发送给form
元素action指定的网页,通过method指定的方法发送,然后在target指定的位置打开。
3.8.1、form
属性:
- action:指定发送数据的目的地(默认当前网页)
- method:发送的请求方式(默认get)
- target:响应展示的位置(默认_self)
- novalidate:表单是否验证,一些表单在发送前会进行验证。
- enctype:被提交数据如何编码(MIME类型,默认application/x-www-form-urlencoded)
当上传文件时,method必须使用post方式,enctype使用multipart/form-data。
3.8.2、input
输入表单需要指定输入类型(type属性),只有含有name属性才会被发送。
能够发送给服务端的数据有很多,比如文本、密码、颜色、email、文件、日期、image等,都可以通过type类型指定。一些输入表单可以验证输入,但是form的属性可以取消验证。type可选的值有:
button checkbox color date datetime-local email
file
hidden
image month numberpassword
radio
range reset searchsubmit
teltext
time url week
input有一些十分有用的属性:
- pattern:给定正则表达式,浏览器在提交时会自动验证
- required:该表单必须输入值
- disabled:该字段被禁用
- readonly:只读
- name:表单名,后端会接收到该名字
- value:默认值
- placeholder:占位符,用来提示用户输入类容的
- mutiple:允许多选
还可以为input表单提供参考值,如示例:
<form action="/action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
3.8.3、其他表单
<select>
可以提供下来列表
<textarea>
提供文本框
3.9、audio/video
Tag | Description |
---|---|
<audio> | Defines sound content |
<source> | Defines multiple media resources for media elements (<video> , <audio> and <picture> ) |
<track> | Defines text tracks for media elements (<video> and <audio> ) |
<video> | Defines a video or movie |
3.10、styles and semantics
Tag | Description |
---|---|
<style> | Defines style information for a document |
<div> | Defines a section in a document |
<span> | Defines a section in a document |
<header> | Defines a header for a document or section |
<footer> | Defines a footer for a document or section |
<main> | Specifies the main content of a document |
<section> | Defines a section in a document |
<article> | Defines an article |
<aside> | Defines content aside from the page content |
<details> | Defines additional details that the user can view or hide |
<dialog> | Defines a dialog box or window |
<summary> | Defines a visible heading for a <details> element |
<data> | Links the given content with a machine-readable translation |
html5提供了很多元素,它没有特殊的作用,除了拥有鲜明的语义,可以作为网页不同组件的容器,然后通过css可以渲染网页。而不必自己提供对应的class属性,规范化了html的编写。
3.10.1、style
用于为单个网页定义样式信息。
<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>
3.11、meta info
Tag | Description |
---|---|
<head> | Defines information about the document |
<meta> | Defines metadata about an HTML document |
<base> | Specifies the base URL/target for all relative URLs in a document |
3.11.1、meta
<meta>
是一些关于数据的数据,常用于指定编码、视口大小,指明编辑作者、网页的关键字等,示例如下:
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
3.11.2、base
默认情况下<a href="foo.html">
中的相对地址(具体是指path-relative url,即路径不以“/”开始)是相对于当前网页的,但是可以通过base元素修改。base元素为所有path-relative url定义默认base url或target属性。
<base href="http://www.baidu.com/" target>
注意:base可以是path-absolute的地址(即相对于根路径);base对Domain-absolue和path-absolute路径的链接无效。参考4.1小结。
https://stackoverflow.com/questions/51619597/html5-base-tag-with-root-relative-url
3.12、programming
Tag | Description |
---|---|
<script> | Defines a client-side script |
<noscript> | Defines an alternate content for users that do not support client-side scripts |
<applet> | Not supported in HTML5. Use <embed> or <object> instead.Defines an embedded applet |
<embed> | Defines a container for an external (non-HTML) application |
<object> | Defines an embedded object |
<param> | Defines a parameter for an object |
3.12.1、script
<script>
元素中可以写javascrpit代码,或者直接指向外部的js文件,如:
js写在script中:
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
链接外部js:
<script src="myScript1.js"></script>
要注意的是,如果src属性存在,<script>
元素必须为空。
四、其他
4.1、路径
URL是URI的一种,使用URI的语法表示:
URI = scheme:[//authority]path[?query][#fragment]
authority = [userinfo@]host[:port]
全部给出,即为绝对地址(absolute url),即:https://en.wikipedia.org/wiki/URL
。其他的都为相对地址,但是还可以细分下去。
如果不给出scheme,即为协议相对地址(protocol relative url 或 domain absolute url)。如:
<a href="//services/">
<a href="//services/video-production/corporate-videos">
以“//”开始,协议与链接所在网页使用的协议一致,所有是协议相对的。
如果authority(域名)也不给出,即为根相对地址(root relative url 或 path absolute url)。:如:
<a href="/services/">
<a href="/services/video-production/corporate-videos">
路径以“/”开始,即相对于的web服务器的根路径。
注意:对于java web应用的话,千万不要把该地址当做web应用根路径。
相对于当前网页的地址称为路径相对地址(path relative url)。即路径不以“\”开始,如:
<a href="services/video-production/corporate-videos">
<a href="corporate-videos">
相对于当前目录或上级目录的地址称为目录相对地址(relative directory traversal)。以“…”或"."开始,分别是相对于父路径和当前路径,如:
../file
./directory/file
注意:路径可以指向文件(path以文件名结尾),也可以指向目录(path以“/”结尾)。但是即使指向目录,服务器都会正确返回一个文件,比如index.html文件。当然,服务器可以控制这种行为。
url
<base\ tag with root relative url>
relative vs. absolute urls and seo
4.2、url编码
url传输时只能是通过ascii码传输,非ascii字符会被编码,通过网页指定的编码来编码(默认utf-8),编码成“%”紧跟十六进制的形式。如果有空格,会被+
或者%20
代替。
如使用utf-8编码的网页发送一个链接,含有一个“牛
”字,会被编码成%E7%89%9B
,查看它的utf-8编码:E7 89 9B
发现会一一对应。
4.3、html实体
一些字符为html保留字符,不能被直接使用;字符集数量太大,以至于不能全部被打印出来。这两个问题都可以通过html实体来表示,可以通过实体名或者实体码来表示。形式如下:
实体名
&entity_name;
实体码,也就是字符对应的code point,默认十进制,但是以“x”开头则使用十六进制
&#entity_number;
因为html5使用的是unicode字符集,因此可以通过实体展示unicode任何字符。
如:空格使用
或 
表示。
有意思的是,emoji表情也在unicode字符集中,因此可以直接显示出emoji表情出来。如笑脸code point为U+1F600
,那么实体为😀
。显示效果:?
4.4、MIME类型
MIME(Multipurpose Internet Mail Extensions)是一种指定文件类型的标准,广泛使用在web数据传输上,告诉对方数据组织的格式,便于对方解析。
MIME类型的通用结构如下:
type/subtype
type执行文件类型的主要分类,分为两种:discrete和multipart。subtype是该type类型中具体的类型。
文件扩展名也可以确定文件类型,但是在web传输中仅使用MIME,在头字段
Content-type
中指定。在tomcat中,全局文件web.xml几乎对每种可能的扩展文件指定了一种MIME类型。
4.4.1、Discrete types
Type | Description | Example of typical subtypes |
---|---|---|
text | Any document that contains text and is theoretically human readable | text/plain, text/html, text/css, text/javascript, text/markdown |
image | Any kind of image. Videos are not included, though animated images (like animated GIF) are described with an image type. | image/gif, image/png, image/jpeg, image/bmp, image/webp, image/vnd.microsoft.icon |
audio | Any kind of audio file | audio/midi, audio/mpeg, audio/webm, audio/ogg, audio/wav |
video | Any kind of video file | video/webm, video/ogg |
application | Any kind of binary data, especially data that will be executed or interpreted somehow. | application/octet-stream, application/pkcs12, application/vnd.mspowerpoint, application/xhtml+xml, application/xml, application/pdf application/x-www-form-urlencoded |
如果文本文档不知道具体类型,一般text/plain
会被使用;如果二进制文档不知道具体类型,一般会使用application/octet-stream
。
4.4.2、Multipart types
multipart/form-data
multipart/byteranges
Multipart表示会将文档分为多个部分,经常每个部分都有不同的MIME类型。
form表单上传文件时必须使用第二种。
参考:MIME types
4.4.3、其他
application/x-www-form-urlencoded
在form表单中默认使用该类型保存参数键值对。键值对以&
分隔,键值用=
分隔,空格用+
替代,非字母数字字符使用如下十六进制表示:%HH
。
如可能的消息体内容如下:
MyVariableOne=ValueOne&MyVariableTwo=ValueTwo
其中,url编码也使用了这种方法。
multipart/form-data
在form表单中常用于文件传输。该类型将键值对分成几个part,每个part被特殊字符边界分隔(在content-Type中定义)。每个part都有一些可选的头字段,如Content-Type、Content-Disposition等。其中Content-Disposition含有字段名或文件名信息。
例子:
<form action="http://localhost:8000/" method="post" enctype="multipart/form-data">
<label>Name: <input name="myTextField" value="Test"></label>
<label><input type="checkbox" name="myCheckBox"> Check</label>
<label>Upload file: <input type="file" name="myFile" value="test.txt"></label>
<button>Send the file</button>
</form>
POST / HTTP/1.1
Host: localhost:8000
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Connection: keep-alive
Upgrade-Insecure-Requests: 1
Content-Type: multipart/form-data; boundary=---------------------------8721656041911415653955004498
Content-Length: 465
-----------------------------8721656041911415653955004498
Content-Disposition: form-data; name="myTextField"
Test
-----------------------------8721656041911415653955004498
Content-Disposition: form-data; name="myCheckBox"
on
-----------------------------8721656041911415653955004498
Content-Disposition: form-data; name="myFile"; filename="test.txt"
Content-Type: text/plain
Simple file.
-----------------------------8721656041911415653955004498--
参考:
application/x-www-form-urlencoded or multipart/form-data?
HTML enctype Attribute
MDN multipart/form-data
Content-Disposition
其他的以后补充
参考
html5教程
html参考
url
<base\ tag with root relative url>
relative vs. absolute urls and seo
emoji
字符编码
http协议
viewport meta