Author | Jeskson
source | Dada front-end bistro
HTML5 and CSS3 development of basic and applied, a detailed description of new features and add elements of HTML5, CSS3 new features, the new added option, the new layout, box model, text, borders, gradient, deformation, animation and so on. Introduction of HTML5, the common elements and attributes, form-related elements and attributes, CSS3 selectors newly added, CSS3 new property.
Learn HTML5, and now the mainstream browsers, and basic grammar.
Before using HTML5, w3c want to use XHTML instead of HTML, because HTML compared with XHTML, XHTML is a stricter, more compliant HTML code, which is required because XHTML is an XML document must HTML format, an XML document is a structured document.
There in an XML document and only one root element, elements in the document must consist of start and end tags, in addition to a single label, that is not a cross between an empty element syntax, the use of the label, the attribute value must "" quotes.
At that time the HTML document because there are a lot of non-standard, so the preparation of documents be written in HTML document prepared in accordance with specifications XHTM, but due to the large number of these non-standard page exists on the Internet, so there will be a new HTML standard is HTML5.
In HTML5 in fact, not so much the stringent requirements, but as a programmer to strong demand for their writing specifications.
The difference between HTML4 and HTML5
The difference between HTML4 and HTML5
Character encoding changes:
HTML4：
<meta http-equiv="content-type" content="text/html;charset=utf-8">HTML5：
<meta charset="utf-8">The syntax of HTML5 is to appear compatible with a variety of non-standard HTML document, written in HTML5 document can sometimes not a strict standard XML document, however, still have to strongly urge their writing specifications.
HTML5, certain elements may be omitted end tag, and some elements may be omitted altogether start and end tags, there is absolutely no element end tag, label is no longer a case-sensitive, some of the standard attribute value attribute can be omitted.
The benefits of HTML5 that can resolve cross-browser, cross-platform issues, supports most browsers support the market for front-end developers, the development of
HTML + CSS + JavaScript will be more convenient, enhanced web applications.
HTML5 common elements and attributes
Common elements HTML5 reserved newly added common elements, common properties, it has been abandoned elements and attributes.
The main common elements of HTML5 reserved:
HTML comments, annotations are not displayed in the browser, the code can be interpreted to help other developers understand the specific content of the code.
html is the root element of HTML5, tells the browser itself is an HTML document.
head portion for defining a header HTML5 page document, the main base, link, meta, script, styple, title inside the head tag.
title to define the title page of the document.
style for style definitions introduced the document.
meta meta information for the definition of the document.
the default base address is defined in the document stipulated that all links or default destination.
body is used to define a document page Topics section.
h1 ~ h6 for defining the title.
p is used to define passages.
hr for insertion of a horizontal line.
br for inserting a line break.
div used to define the partition or section of a document, a block-level element.
span and div Similarly, the element does not wrap.
Text formatting elements
b Bold text is used to define, strong for defining bold text, small text font used to define small, em used to emphasize text, i is used to define italic text, sub subscript text for definition, sup for defining superscript text.
is used to define a abbr abbreviation abbreviation abreviation, address is used to define an address, used to define a block quote blockquote, q is used to define a short reference, computer code used to define the text code, used for indicating that a auf cite a cited references, del used to define the document to be deleted text, ins inserted into the document to define the text, kbd text keyboard for defining, pre preformatted text to define, samp used to define the sample text , var used to define variables.
Hyperlinks and anchors
HTML5 preserves hyperlinks, a label element, used to jump from one page to another, an important attribute for a tag href, it is a link to the target.
In HTML4.01, a is an element may be a hyperlink, or anchor, but in HTML5, a hyperlink element is, if there is no href attribute, then it is just a placeholder for a hyperlink.
HTML5 introduces two new properties, to download and media:
download element instructs the browser to download URL rather than navigating to it, media specified target URL is why the type of media or device evolution.
<a href="http.."></a>
<a href="" download="">点击下载</a>List elements
is used to define an unordered list ul, ol used to define an ordered list, li is used to define a list of items, dl is used to define a list of sub-elements and have dl dd two kinds. dt is the term used to define a list of titles, dd is used to define the definition list item.
Table element
table is used to define a table, caption table for defining the title, TR is used to define a table row, the sub-element for defining two kinds th and td, td used to define the cell, for defining th cell is a table header.
In td element is composed of two attributes: colspan rowspan attributes and attribute indicates how many columns across the cell and the cell spanning many rows.
tbody table is used to define the body, the child has two kinds th and td, thead for defining table header, the child has two kinds th and td, tfoot table for defining the footer, the child has two kinds th and td.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>da</th>
</tr>
</thead>
<tbody>
<tr>
<td>da</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>da</td>
</tr>
</tfoot>
</table>
</body>
</html>col table for a plurality of columns or attribute values defined, for COLGROUP table columns be combined to be formatted.
mark is used to define the highlighted text, time for displaying the date or time of labeling information, 24-hour time system, there datetime attribute indicates the time and date of this element, pubtime indicating the date and time is the time element in the release date of the document .
Document structure elements, header used to define the document or section header, footer footer for the definition of a document or section, HTML5 new structure header, except footer, there is an article aside within the definition of a document, area defining section for a document, NAV navigation links for page definition portion, independently Figure for defining a reference period, used in conjunction with figcaption, or figcaption for explaining the title represented by reference associated therewith, etc. It is to improve the readability of the code.
<figure>
<figcaption></figcaption>
</figures>meter represents a known maximum and minimum values of the counters, form one or more form specified element belongs meter, value meter element specified current value, min meter element of the specified minimum, max specify the maximum meter elements, low the meter element specified minimum specified range, high maximum meter elements specified range, optimum meter element specifies the optimum value.
progress represents a progress bar, max designated task total amount of wages, the amount of value specified task has been completed.
Multimedia elements
audio custom audio, video custom video
<audio src="" controls="controls"></audio>To set the path src song
controls to set whether to use the playback controls
<video src="" controls="controls"></video>src is provided a video path
controls to set whether to use the playback controls
Common Properties
id for unique identification of the HTML element, css style style specifies an HTML element, for matching class, class css style selector, dir element for setting the direction of arrangement of the contents, there are two attributes rtl and ltr.
Key attributes:
hidden attribute, the attribute value is true when displayed, hidden attribute value is false, display: none equal hidden = "true"
spellcheck attribute set spellcheck = "true", the text entered by the user browser will perform input checking, checking is not passed, the browser will prompt the misspelled word.
Form-related elements and attributes
form element for generating the input form, action is submitted to the address, method used to submit a form what type of request, get attribute value or post, enctype to specify the character set used for encoding the contents of the form:
application/x-www-form-urlencoded
默认编码方式
multipart/form-data
text/plainThe only name name is used to define the form, target used to define which way to open the target url, property value _blank, _self, _top one.
Form controls:
type="text"单行文本输入框
type="password"密码输入框
type="hidden"隐藏域
type="radio"单选框
type="checkbox"复选框
type="file"文本域
type="image"图像域
type="submit"提交按钮
type="reset"重置按钮
type="button"按钮<body>
<form action="" method="post">
<label for="username">用户名：</label>
<input id="username" type="text"/><br/>
<label>密码：
<input type="password"/>
</label>
<br/>
</form>
</body>select, option, optgroup drop-down list box
size shows how many list items select elements displayed simultaneously, multiple whether to allow multiple choice, optgroup the property, label the option to select label group.
// button
<body>
<form action="" method="post">
<button type="submit">提交</button><br/>
<button type="reset">重置</button><br/>
<button type="button"><img src=""></button>
</form>
</body>Textarea form controls
textarea attributes: cols used to represent the width of the text field, rows for representing the height of the text field, readonly for read only indicates that the text field.
<body>
<form action="" method="get">
<input type="color" name="color" id="" value="#ff000"/><br/>
<input type="submit" id="" name="" />
</form>
</body><body>
<form action="" method="get">
<input type="time" name="time" id="" value=""/><br/>
<input type="submit" id="" name=""/>
</form>
</body><body>
<form action="" method="get">
<input type="data" name="date" id="" value="" max="205-02-01" min="2019-03-03"/>
<br/>
<input type="submit" id="" name=""/>
</form>
</body><body>
<form action="" method="get">
<input type="month" name="month" id="" value="" min="1002-02" max="2303-23"/>
<br/>
<input type="submit" id="" name="" />
</form>
</body><body>
<form action="" method="get">
<input type="week" name="week" id="" value="" min="2322-W01"
max="3444-w12"/>
<br/>
<input type="submit" id="" name="" />
</form>
</body><body>
<form action="" method="get">
<input type="email" name="email" id="" value="" multiple="multiple"/>
<br/>
<input type="submit" id="" name=""/>
</form>
</body><body>
<form action="" method="get">
<input type="number" name="number" id="" value="" max="100" min="0" step="10"/>
<br/>
<input type="submit" id="" name="" />
</form>
</body>range Type generate a drag bar:
<body>
<form action="" method="get">
<input type="range" name="range" id="" value="" max="100" min="0" step="10"/>
<br/>
<input type="submit" id="" name=""/>
</form>
</body><body>
<form action="" method="get">
<input type="search"/>
<input type="submit" id="" name="" />
</form>
</body>tel type can only enter the phone number of a text box
<body>
<form action="" method="get">
<input type="tel" name="tel">
</form>
</body>// url类型，如果输入框中不是url格式，会提示用户
<body>
<form action="" method="get">
<input type="url" name="url">
<input type="submit" id="" name="" />
</form>
</body>Login user list
<body>
<form id="login" action="" method="get">
<label for="username">
用户名：
</label>
<input id="username" type="text" name="username"/>
</form>
<label>密码：
<input from="login" type="password" name="password"/>
</label>
<br/>
<input form="login" type="submit"/>
</body>form form, an action property, another property formaction, method formmethod properties and attributes, properties, and the enctype formenctype properties, and properties formtarget target property.
<body>
<form id="login" action="" method="get">
<label for="username"></label>
<input id="username" type="text" name="username" placeholder="请输入用户名"/>
<br/>
<label><input type="password" name="password" autofocus="autofocus" placeholder="请输入密码"/>
</label>
<br/>
<input type="submit" formaction="login"/>
<button type="submit" formaction="regist">注册</button>
<br/>
</form>
</body><body>
<form id="login" action="login" method="get">
<label for="username"></label>
<input id="username" type="text" name="username" palceholder="请输入用户名"/>
<br/>
<label><input type="password" name="password" autofocus="autofocus" placeholder="请输入密码"/>
</label>
<br/>
<input type="submit" formmethod="get"/>
<input type="submit" formmethod="post"/>
</form>
</body>autocomplete attribute for rapid entry form, a browser provides auto-complete functionality. In autocomplete HTML5 default value is on, it is sometimes necessary to turn off when the attribute value Please input autocomplete = "off".
The autofocus attribute automatically acquire focus, pattern attribute is used to verify form input contents, the opposite is not verified when the form is submitted novalidate properties, required attribute specifies the input value must be filled prior to submission.
<body>
<form action="" method="get">
<textarea name="text" rows="5" cols="5" wrap="hard">
</textarea>
<input type="submit" id="" name=""/>
</form>
</body>maxlength a predetermined maximum number of characters in the text area,
Warp Soft default value, when the form is submitted, the present TextArea Chinese does not wrap,
when the form is submitted, if the text wrap = "hard", filed contains the newline
css3 selector
Brother selector, 2 new attribute selectors, 3 new pseudo-class selectors, 4 new pseudo-element selector.
Brothers Selector:
格式：
元素1~元素2
{ property1: value1; property2: value2 }E[attribute^=value]
选择带有以指定开头的属性值的元素
E[attribute$=value]
选择带有以指定结尾的属性值的元素
E[attribute*=value]
选择属性值中包含值的元素，位置不限，不限制整个单词Pseudo class selector
:root 选择文档的根元素
向元素添加样式
:last-child 该元素是它的父元素的最后一个子元素
:nth-child(n) 该元素是它的父元素的第n个子元素
:nth-last-child(n) 该元素是它的父元素的倒数第n个子元素
:noly-child 该元素是它的父元素的唯一子元素
:first-of-type 该元素是同级同类型元素中第一个元素
:last-of-type 该元素是同级同类型元素中最后一个元素
:nth-last-of-type(n)该元素是同级同类型元素中倒数第n个元素
:only-of-type 该元素hi同级同类型元素中唯一的元素
:empty 向没有子元素的元素添加样式New CSS3 attributes:
background-clip 设置背景覆盖范围
border-box/padding-box/content-box
border-box背景显示区域到边框
padding-box背景显示区域到内边距框
content-box背景显示区域到内容框
background-origin 设置背景覆盖的起点
border-box/padding-box/content-box
border-box:背景起点在边框的左上角
padding-box:背景起点在内边距框的左上角
content-box:背景起点在内容框的左上角
background-size 设置背景的大小
cover/containtext-overflow
设置当文本溢出元素框时的处理方式
clip/ellipsis
clip：裁剪文本内容
ellipsis：显示省略号
word-break
自动换行的方式
normal/break-all/keep-all
word-wrap
单词的换行方式
normal/break-wordBox model
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radiusRounded corners
box-shadow shadow
h-shadow
阴影的水平方向偏移的距离
v-shadow
阴影的垂直方向偏移的距离
blur
模糊的半径距离
spread
阴影的额外增加的尺寸
color
阴影的颜色
inset
切换为内部阴影contour outline-offset property can be increased a set offset contour
Deformation properties, transform, and transform-origin
3D deformation properties, transform properties:
rotateX: along the x axis represents rotation element
rotateY: the rotary element along the y axis indicates
rotateZ: presentation element along the z axis of rotation
Effect transform-style subelement nested set for display in the 3D space, the default value is flat, preserve-3d, perspective, perspective effect provided, backface-visibility for setting the screen is visible when the back element oriented generally for setting the user does not want to see the back of the rotating element.
column-count
the number of columns should be separated by an element
column-width
setting the column width
columns
one column width and the statement set the number of columns
column-gap
arrangement interval between the columns
column-span
number of columns across the element should
column-rule-style
to style the interval between the columns
column-rule-color
set the color of the interval between the columns
column-rule-width
setting the width of the space between the columns
column-rule
spacing between all the properties of a statement to set the column
❤️ Do not forget to leave your footprints learning [collection point Like Comment]
Author Info:
[Author]: Jeskson
No public [original]: Dada front-end bistro.
[Reserved] Description: reproduced please indicate the source, thank you! ~
On the current content of the article that is involved in front-end, PHP knowledge, if you are interested to follow, very honored, can you find really identify what the British! Also thank you for your attention in the coming days, hoping been quietly supporting me, I will try to write more good works. We grow together, learn from the zero-based programming, the user-friendly front-end Web presentation areas, data structures and algorithms, network theory, etc. to the junior partner. Share Web front-end related technical articles, tools, resources, course selection, hot information.
If this number of local contents do not get bits (for example: to copyright or other problems), please contact us for rectification can be timely and will be processed in the first time.
Please thumbs up! Because you agree / encouragement is the greatest power of my writing!
Welcome attention to Dada 's CSDN!
This is a quality, attitude blog
