Home > Web Front-end > H5 Tutorial > HTML5 study notes (2) - detailed introduction to elements, attributes, and formatting

HTML5 study notes (2) - detailed introduction to elements, attributes, and formatting

黄舟
Release: 2017-03-16 15:33:38
Original
1606 people have browsed it

HTML element


## The element refers to all code from the start tag to the end tag .

Start (open) tagElement contentEnd (close) tag

this is my web page

## An HTML element without content is called is an empty element. Empty elements are closed in the opening tag.


is an empty element without a closing tag (
tag definition wraps).

In XHTML,

XML

, and future versions of HTML, all elements must be closed. Adding a slash in the opening tag, such as
, is the correct way to close an empty element, and is accepted by HTML, XHTML, and XML.

Even though
is valid in all browsers, using
is actually a longer-term guarantee.

HTML element syntax

## The content of element
is the content between the start tag and the end tag

Empty elements are closed in the opening tag

Most HTML elements can have

attributes

Nested HTML elements

Most HTML elements can be nested

<p>Hello world, <a>找度娘</a></p>
Copy after login

HTML attributes 1. Tags can have attributes to provide more information for elements


2. Attributes appear in the form of key-value pairs, such as: href = "www.cnblogs. www/winsoncheung"

3. Commonly used tag attributes:

#  :target specifies where to open the connection

4. Common attributes:

class
Specifies the class name of the element

id
Specifies the unique ID of the element
styleSpecify the style of the element
titleSpecify the additional information of the element
<!DOCTYPE html><html><head>
    <meta charset="UTF-8">
    <!--id规定元素唯一ID-->
    <title id="1223">基础</title>
    <!--style规定元素的样式-->
    <style type="text/css"></style></head><body bgcolor="#5f9ea0">
    <h1 align="center">标题1</h1>
    <a href="index02.html" target="_blank">打开本地</a>
    <!--class规定元素类名-->
    <h2 class="h2ID">标题2</h2></body></html>
Copy after login

HTML格式化


文本格式化标签:

标签描述
定义粗体文本。
定义大号字。
定义着重文字。
定义斜体字。
all>定义小号字。
定义加重语气。
定义下标字。
定义上标字。
定义插入字。
定义删除字。
不赞成使用。使用 代替。
不赞成使用。使用 代替。
不赞成使用。使用样式(style)代替。

“计算机输出”标签:

标签描述
定义计算机代码。
定义键盘码。
定义计算机代码样本。
定义打字机代码。
定义变量
</td><td style="margin-left: 30px">定义预格式文本。</td></tr><tr style="margin-left: 30px"><td style="margin-left: 30px"><<a href="http://www.php.cn/wiki/1059.html" target="_blank">list</a>ing></td><td style="margin-left: 30px">不赞成使用。使用 <pre class="brush:php;toolbar:false"> 代替。</td></tr><tr style="margin-left: 30px"><td style="margin-left: 30px"><plaintext></td><td style="margin-left: 30px">不赞成使用。使用 <pre class="brush:php;toolbar:false"> 代替。</td></tr><tr style="margin-left: 30px"><td style="margin-left: 30px"><xmp></td><td style="margin-left: 30px">不赞成使用。使用 <pre class="brush:php;toolbar:false"> 代替。</td></tr></tbody></table><p style="margin-left: 30px; text-align: left;"><a href="http://www.php.cn/wiki/231.html" target="_blank">引用</a>、引用和术语定义</p><table style="margin-left: 30px; height: 261px; width: 331px"><tbody style="margin-left: 30px"><tr style="margin-left: 30px" class="firstRow"><th style="margin-left: 30px">标签</th><th style="margin-left: 30px">描述</th></tr><tr style="margin-left: 30px"><td style="margin-left: 30px"><abbr></td><td style="margin-left: 30px">定义缩写。</td></tr><tr style="margin-left: 30px"><td style="margin-left: 30px"><acronym></td><td style="margin-left: 30px">定义首字母缩写。</td></tr><tr style="margin-left: 30px"><td style="margin-left: 30px"><address></td><td style="margin-left: 30px">定义地址。</td></tr><tr style="margin-left: 30px"><td style="margin-left: 30px"><bdo></td><td style="margin-left: 30px">定义文字方向。</td></tr><tr style="margin-left: 30px"><td style="margin-left: 30px"><blockquote></td><td style="margin-left: 30px">定义长的引用。</td></tr><tr style="margin-left: 30px"><td style="margin-left: 30px"><q></td><td style="margin-left: 30px">定义短的引用语。</td></tr><tr style="margin-left: 30px"><td style="margin-left: 30px"><cite></td><td style="margin-left: 30px">定义引用、引证。</td></tr><tr style="margin-left: 30px"><td style="margin-left: 30px"><dfn></td><td style="margin-left: 30px">定义一个定义项目。</td></tr></tbody></table><p style="margin-left: 30px; text-align: left;"> 代码示例:</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;"><!DOCTYPE html><html><head>
    <meta charset="UTF-8">
    <title id="1223">格式化</title></head><body>
    <b>My name is Winson</b>
    <br/>
    <big>Welcome to my blog~</big>
    <br/>
    <i>Hello, visitor!</i>
    <br/>
    <small>我很小, 你看不见 看不见</small>
    <br/>
    <strong>太显眼了</strong>
    <br/>
    大家好<sub>欢迎</sub>来到    <br/>
    大家好<sup>欢迎</sup>来到    <br/>
    <ins>Come on! girls!</ins>
    <br/>
    <del>Hei! girl!</del></body></html>
Copy after login


The above is the detailed content of HTML5 study notes (2) - detailed introduction to elements, attributes, and formatting. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template