HTML4&5 knowledge points compilation

HTML

HyperText Markup Language

Hypertext

It is a way of organizing information. It organizes text, pictures and other information in different spaces through hyperlinks. It can jump from the content currently read to the content pointed to by the hyperlink.

HTML development history

1997 - HTML 4.0
1999 - HTML 4.0.1
2014 - HTML 5

HTML tags

Tags, also known as elements, are the basic building blocks of HTML.
Divided into double label and single label
Not case sensitive, but lowercase is recommended
Relationship between tags: parallel relationship, nested relationship, you can use the tab key for indentation

HTML tag attributes

Used to provide additional information to the label
Can be written in a start tag or a single tag
Some special attributes do not have attribute names, only attribute values, for example
```
<input disabled />
```

HTML basic structure

<!DOCTYPE html>
<html>
    <head>
	<title>...</title>
    </head>
    <body>
	...
    </body>
</html>

HTML comments

<!-- html注释 -->

HTML document declaration

<!doctype html>

HTML set language

<html lang="zh-CN"></html>

main effect:
- Let the browser display the corresponding translation prompts
- Good for search engine optimization

HTML standard structure

<!doctype html>
<html lang="zh-CN">
    <head>
	<meta charset="UTF-8">
        <title>...</title>
    </head>
    <body>
	...
    </body>
</html>

HTML layout tags

Title tag: h1~h5
- It is best to have only one h1
- cannot be nested within each other
Paragraph tag: p
- There cannot be h1~h6, p, div
Block-level tag: div

HTML semantic tags

Concept: Use specific labels to express specific meanings

Principle: The default effect of the label is not important, what is important is the semantics

Advantage:

Code is highly readable
Good for SEO (search engine optimization) crawler code robot
Convenient device analysis

Block-level elements vs. inline elements

block-level elements

Features:

Exclusive party
Almost anything can be written in it
h1~h6 cannot be nested
p cannot have block-level elements

inline elements

Features:

Don't occupy a line
Block-level elements cannot be written in it

Commonly used text labels

Used to wrap: words, phrases, etc.
Usually written in the typesetting tag
Usually inline elements

em: focus on reading content

strong: very important content

span: no semantics, a general container for wrapping phrases

Uncommonly used text labels

code: a piece of code
small: additional details
sub/sup: subscript text, superscript text
…

Image tags

<img src="" alt="" width="" height=""/>

src: path
alt: picture description
width: image width
height: picture height

Relative paths and absolute paths

relative path

Use the current location as a reference point to create a path
./ / …/

absolute path

Use the root position as a reference point to create a path
Divided into local absolute path and network absolute path
- Local: E:/a/b/c/…
- Network: http://…

Common image formats

jpg: supports rich colors, takes up little space, does not support transparent backgrounds, and does not support dynamic images
png: supports rich colors, takes up slightly larger space, supports transparent background, and does not support dynamic images
bmp: supports rich colors, retains more details, takes up a lot of space, does not support transparent backgrounds, and does not support dynamic images
gif: supports fewer colors, supports simple transparent backgrounds, and supports dynamic images
webp: has the advantages of several formats, but the compatibility is not very good
base64: Base64 encode the image to form a special string of text, which should be opened through the browser

Hyperlink

<a href="" target="" />

Function: Used to jump to the current page

href: specific location to jump to

target: How to open the page when jumping

Jump to anchor point

Anchor: A marked point in a web page

<a name="test"></a>

<a href="#test" />

A tag with name attribute is the anchor point

Call up a specific application

<a href="tel:10010">电话联系</a>

<a href="mailto:[email protected]">邮件联系</a>

<a href="sms:10086">短信联系</a>

list

Ordered list: ul-li
Unordered list: ol-li
Definition list: dl-dt-dd

sheet

basic structure

A complete table consists of four parts: table title, table header, table body, and table footnote.

<table border="1" width="400px" height="300px" cellspacing="0">
    <caption>表格标题</caption>
    <thead align="center" valign="middle">
	<tr>
	    <th>表头</th>
	    ...
	</tr>
    </thead>
    <tbody>
	<tr>
	    <td>内容</td>
	</tr>
    </tbody>
    <tfoot>
    	<tr>
	    <td>脚注</td>
	</tr>
    </tfoot>
</table>

table: table
caption: table title
thead: header
tbody: table body
tfoot: table footnote
tr: OK
th: header cell
td: ordinary cell
- width: width
- height: height
- align: horizontal alignment
- valign: vertical alignment
- rowspan: Specify the number of rows to span
- colspan: Specify the number of columns to span

Other commonly used tags

Newline tag:<br/>
Dividing line:<hr/>
Show as original text:<pre></pre>

form

basic structure

<form action="" target="" method="">
    <fieldset>
	<legend>主要信息</legend>
    </fieldset>
    <input type="text" name="文本输入框" disabled/>
    <label for="pwd">
	xxx:
	<input id="pwd" type="password" name="密码输入框"/>   
    </label>
    <input type="radio" name="单选框" value=""/>
    <input type="checkbox" name="多选框" value=""/>
    <input type="hidden" name="隐藏域"/>
    <textarea name="" cols="20" rows="10">文本框</textarea>
    <select name="下拉框">
	<option value="1">选项一</option>
	<option value="2">选项二</option>
    </select>
    <input type="submit" value="提交"/>
    <input type="reset" value="重置"/>
    <button type="submit">提交</button>
    <button type="reset">重置</button>
</form>

label: can be associated with a form control. After association, click the text, and the corresponding form control will gain focus.

frame tag

<iframe></iframe>

character entity

Space:
Less than sign: <
Greater than sign: >
Yuan:¥
Copyright:©
…

HTML global attributes

id
class
style
dir
title
lang
…

meta meta information

<!-- 配置字符编码 -->
<meta charset="utf-8">

<!-- 配置网页关键字 -->
<meta name="keywords" content="...">

<!-- 配置网页描述信息 -->
<meta name="description" content="...">

...

HTML5

Introduction

HTML5 is a new generation of HTML standards. The standard was completed by the World Wide Web Consortium in October 2014.

Advantage

For JavaScript, more operable interfaces have been added
Added semantic tags and global attributes
Added multimedia tag, replacing flash
Focus more on semantics and more friendly to SEO
Good portability and can be applied on mobile devices

About article and section:

There can be multiple sections in an article

section emphasizes segmentation or chunking

Article emphasizes independence more than section

H5 new status label

meter tag

Semantics: Defines a scalar measurement within a known range
Common properties:
- high
- low
- max
- min
- optimum
- value

progress tag

Semantics: An indicator that displays the progress of a task, generally used to represent a progress bar
Common properties:
- max
- value

H5 new list tag

datalist: used for search box keyword prompts
details: used to display questions and answers, or explain proper nouns
summary: written in details, used to specify problems or proper nouns

H5 new text label

Ruby: Wrap text that needs phonetic notation
rt: write phonetic notation, written in ruby
mark: text mark

H5 adds new form control properties

placeholder: prompt text
required: indicates that the input item is required
autofocus: automatically obtain focus
autocomplete: automatically complete
pattern: fill in the regular expression

H5 input adds new type attribute

email: email type
url: url type
number: number type
search: search type
tel: phone type
range: range type
color: color selection box
date: date selection box
month: month selection box
week: week selection box
time: event selection box
datetime-local: date + time selection box

H5 form tag new attributes

novalidate: no longer perform validation when the form is submitted

H5 adds audio and video tags

video: define video
- src
- width
- height
- controls: display video controls
- muted: video muted
- autoplay: automatic play
- loop: loop playback
- poster: video cover
- preload: video preloading
  - none
  - metadata
  - auto
audio: define audio
- src
- control: Display audio controls
- autoplay: automatic play
- muted: mute
- loop: loop playback
- preload: audio preloading
  - auto
  - metadata
  - none

H5 adds new global attributes (understand)

contenteditable: Indicates whether the element can be edited by the user
draggable: Indicates that the element can be dragged
hidden: hidden element
spellcheck: specifies whether to perform spelling and grammar checks on elements
contextmenu: Specifies the context menu of the element
data-*: used to store private custom data for the page

H5 compatibility processing

Add meta information to put the browser in optimal rendering mode

<!-- 设置IE总是使用最新的文档模式进行渲染 -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">

<!-- 优先使用 webkit 内核进行渲染 -->
<meta name="renderer" content="webkit">

Use html5shiv to let low-version browsers recognize H5 semantic tags

<!--[if lt ie 9]>
<script src="../sources/js/html5shiv.js"></script>
<![endif]-->

Expand

<!--[if IE 8]>仅IE8可见<![endif]-->
<!--[if gt IE 8]>仅IE8以上可见<![endif]-->
<!--[if lt IE 8]>仅IE8以下可见<![endif]-->
<!--[if gte IE 8]>IE8及以上可见<![endif]-->
<!--[if lte IE 8]>IE8以下可见<![endif]-->
<!--[if !IE 8]>非IE8的IE可见<![endif]-->