A, HTML5 commonly used text label
1, the title tag
(1) the definition and usage:
HTML, the definition of the six titles, respectively h1 h2, h3, h4, h5 h6 , for each level of headline font size in descending order, level 1 title font size maximum, 6. level title font size to a minimum.
(2) syntax:
<h1>1号标题</h1>
<h2>2号标题</h2>
<h3>3号标题</h3>
<h4>4号标题</h4>
<h5>5号标题</h5>
<h6>6号标题</h6>
contents h series label displayed in bold, and the word size from largest to smallest; h Series title tag is generally only used to define, casual use is not recommended.
(3) Examples
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>html中h1~h6标题标签的详细介绍</title>
</head>
<body bgcolor="bisque" style="margin-left:100px;">
<h1>1号标题</h1>
<h2>2号标题</h2>
<h3>3号标题</h3>
<h4>4号标题</h4>
<h5>5号标题</h5>
<h6>6号标题</h6>
</body>
</html>
2, paragraph tag
(1) Definition and Usage:
<p>tag used to define the passages.
[Note] in HTML5, paragraph tag may be used in pairs, can be used alone, for the regulation code, it is recommended in pairs
label.
(2) syntax:
<p>段落文字</p>
(3) Examples
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>段落标签</title>
<html>
<body>
<p>这是段落。</p>
<p>这是段落。</p>
<p>这是段落。</p>
<p>段落元素由 p 标签定义。</p>
</body>
</html>
3, <br>the label and <wbr>the label
(1) Definition and Usage:
<br>can be inserted into a simple newline for inputting blank lines, paragraph segmentation instead.
<br>Tag is an empty tag, meaning that it has no closing tag.
<wbr>Provisions in the text where appropriate to add a line break. Action is recommended in the browser can mark off the line, and not just suggest here will definitely break the line but also according to the entire line of text on the length. In addition to Internet Explorer, all other browsers support <wbr>tabs.
(2) syntax:
<p>文本<br>文本</p>
<p>文本<wbr>文本<wbr>文本</p>
(3) Examples
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p>hehhhhhhh hhhhhhh hhhhhh hhhhh tqwetuqwty<br> qwyie</p>
<p>gafjksgjs<wbr>DJGDGAS<wbr>GHGG hfskfjdkafasd</p>
</body>
</html>
4, <bdi>the tag
(1) Definition and Usage:
<bdi>tag is used to set a text, the text direction away from the parent tag set. When you publish user comments or other content that you can not completely control the label is useful.Label is designed to allow text changes direction, from left to right or right to left. It has a property the dir, direction to define text attribute value LTR, the text from left to right in the normal direction, RTL attribute value, text from right to left; default attribute is auto.
(2) syntax:
<bdi dir="auto">内容</bdi>
(3) Examples
<p>This <bdo dir="ltr">is</bdo> an bdi.</p>
<p>This <bdo dir="rtl">is</bdo> an bdi.</p>
<p dir="rtl">This <bdo dir="rtl">is</bdo>an bdi.</p>
5, <ruby>tag, <rt>label and <rp>tag
(1) the definition and usage:
<ruby>tag defines a ruby to release (or Chinese phonetic characters). And <rt>tag - the same use.
<rt>Tag defines a character (or Chinese phonetic characters) interpretation or pronunciation.
<rp>Labels are used in ruby annotations to define not support the <ruby>label content browser is displayed.
(2) syntax:
<ruby>内容<rp>(</rp><rt>内容</rt><rp>)</rp>内容<rp>(</rp><rt>内容</rt><rp>)</rp></ruby>
(3) Examples
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ruby>
<rb>吉林大学</rb>
<rp>(</rp>
<rt>きつ りん だい がく</rt>
<rp>)</rp>
</ruby>
<p></p>
<ruby>
<rb>吉林大学</rb>
<rp>(</rp>
<rt>ji lin da xue</rt>
<rp>)</rp>
</ruby>
</body>
</html>
6, <mark>the label
(1) the definition and usage:
<mark>label is mainly used in the regulatory sense those words appear or highlight the need to highlight to the user, the typical application is the search results highlighted a pinch prime keywords.
(2) syntax:
<mark>内容</mark>
(3) Examples
<p>Do not forget to buy <mark>milk</mark> today.</p>
Note: Although the <mark>elements in the use of effects <em>or <strong>have similar elements, but the starting point of the three are not the same. <strong>Element is to emphasize the importance of the document in a certain text made; <em>element is set to focus the article author carried out.
7, <time>the tag
(1) Definition and Usage:
<time>Label is used to define the date or time, can be both. The element may be representative of a time of 24 hours, at a time when expressed, allowing time difference. When setting the time or date, the only element attributes "datetime" is set corresponding to the time or date.
(2) syntax:
<time datetime="日期">日期</time>
(3) Examples
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Time 元素</title>
</head>
<body>
<time datetime="2017-3-6">2017/3/6</time>
</body>
</html>
8, <progress>the label
(1) the definition and usage:
<progress >tag is used to define any type of task execution progress, you can use <progress>the label display process in JavaScript function of time. Properties max: provisions need to complete value; attribute value: The current value of the specified process.
(2) syntax:
<progress value="当前值" max="需要完成的值"></progress>
(3) Examples
<!DOCTYPE html><html><head>
<meta charset="utf-8" />
<title>html5中progress标签（进度条）的详细介绍</title>
</head>
<body style="background-color: bisque;">
<h3>progress标签演示</h3>
<progress value="50" max="100"></progress><br>
<progress value="100" max="100"></progress><br>
<progress value="10" max="200"></progress><br>
<progress value="150" max="200"></progress><br>
</body></html>
These are commonly used in HTML5 text labels lesson in the practical application flexibility.
Two, CSS font style attributes
CSS is used to define the font style attributes of the text font family, size, style, CSS
common font style properties shown in the following table.
| Attributes | Allowed values | description |
|---|---|---|
| font-size: font size | 1em, 5em, etc., or 5px | em denotes the object with respect to the current font size of the text. px for pixels, the most commonly recommended. |
| font -family: Fonts | "Microsoft elegant black." | Web page commonly used fonts are Arial, Microsoft elegant black, black body and so on. |
| font-weight: The font weight | normal 、bold、bolder、lighter | The default is normal, lighter fine body, normal to their normal size, bold bold, bolder as Patent bold. |
| font -style font style | normal、italic 、oblique 、inherit | The default is normal, the browser displays a standard font style. italic browser displays a italic font style. oblique browser displays a slanted font style. inherit provisions should inherit the font style from the parent element. |
| word-wrap: long words or URL wrap | normal、break-word | When normal browser's default property value processing, line feed only in half-width space or a hyphen in place. The browser can be wrapped in a long word internal address or URL using break-word. |
font attributes for a comprehensive set font style, font co-wrote, syntax is as follows:
选择器{ font:font-style font-weight font-size line-height font-family; }
Three, CSS text appearance properties
CSS is used to set the color property of the appearance of text, word spacing, letter-spacing, horizontal alignment, text decoration, shadows.
1, color: Text Color
| value | description |
|---|---|
| color_name | Color predetermined color name of the color (such as red, green, blue) |
| hex_number | Predetermined color value is a hexadecimal color values (such as # FF0000) |
| rgb_number | Rgb color value of a predetermined color code (such as red: rgb (255,0,0) or rgb (100%, 0%, 0%), if the percentage of using the eyedropper, can not be omitted when the value of 0%) |
| inherit | The provisions of color should inherit from the parent element |
example
body
{
color:red;
}
h1
{
color:#00ff00;
}
p
{
color:rgb(0,0,255);
}
2, letter-spacing: word spacing
| value | description |
|---|---|
| normal | By default, the character is not among the provisions of additional space |
| length | Fixed space between the defined character (negative values are allowed, generally used as the unit px) |
| inherit | Provision should inherit the value of the letter-spacing property from the parent element |
Examples
provided h1 and h2 letter spacing elements:
h1 {letter-spacing:2px}
h2 {letter-spacing:-3px}
3, word -spacing: word spacing
| value | description |
|---|---|
| normal | By default, the character is not among the provisions of additional space |
| length | Fixed space between the defined character (negative values are allowed, generally used as the unit px) |
| inherit | Provision should inherit the value of the word -spacing property from the parent element |
Examples of
predetermined word spacing is 25 pixel paragraph:
p
{
word-spacing:25px;
}
4, line-height: Line Spacing
| value | Explanation |
|---|---|
| normal | By default, setting a reasonable line spacing |
| number | Digital setting, this number will be multiplied by the current font size to set the line spacing corresponds to a multiple of |
| length | Set line spacing fixed (is not allowed to copy, is generally used as the unit px) |
| % | Percentages based on the current line spacing of the font size. |
| inherit | Provision should inherit the property line-height value from the parent element |
example
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css" >
span
{
padding:0px;
line-height:1.5;
}
</style>
</head>
<body>
<div class="test">
<div style="background-color:#ccc;">
<span style="font-size:3em;background-color:#999;">中文English</span>
<span style="font-size:3em;background-color:#999;">English中文</span>
</div>
</div>
</body>
<html>
5, text- transform: English text conversion
| value | description |
|---|---|
| none | The default text, the definition of lowercase and uppercase letters with the standard |
| capitalize | Text each word beginning with a capital letter |
| uppercase | Defined only uppercase letters |
| lowercase | No definition of uppercase letters, lowercase letters only |
| inherit | Provision should inherit the value of the text-transform property from the parent element |
example
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>text-transform属性</title>
<style type="text/css">
#p1{text-transform:uppercase;}
#p2{text-transform:lowercase;}
#p3{text-transform:capitalize;}
</style>
</head>
<body>
<p id="p1">大写:Rome was't built in a day.</p>
<p id="p2">小写:Rome was't built in a day.</p>
<p id="p3">仅首字母大写: Rome was't built in a day.</p>
</body>
</html>
6, text-align: horizontal alignment
| value | description |
|---|---|
| left | The text-align to the left. The default value is determined by the browser |
| right | The text-align to the right |
| center | The text-align to intermediate |
| justify | Justification is text effect |
| inherit | Provision should inherit the value of text-align property from the parent element |
example
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>text-align属性</title>
<style type="text/css">
#p1{text-align:left;}
#p2{text-align:center;}
#p3{text-align:right;}
</style>
</head>
<body>
<p id="p1"><strong>左对齐</strong>:好好学习，天天向上。</p>
<p id="p2"><strong>居中对齐</strong>:好好学习，天天向上。</p>
<p id="p3"><strong>右对齐</strong>:好好学习，天天向上。</p>
</body>
</html>
7, text-decoration: Text decoration
| value | description |
|---|---|
| none | By default, the definition of a standard text |
| underline | The text line definition |
| overline | 定义文本上的一条线 |
| line-through | 定义穿过文本下的一条线 |
| blink | 定义闪烁的文本 |
| inherit | 规定应该从父元素继承 text-decoration 属性的值 |
例子
设置h1，h2，h3和h4元素文本装饰：
h1 {text-decoration:overline}
h2 {text-decoration:line-through}
h3 {text-decoration:underline}
8、text-indent：首行缩进
| 值 | 描述 |
|---|---|
| length | 定义固定的缩进，默认值：0。 |
| % | 定义基于父元素宽度的百分比的缩进 |
| inherit | 规定应该从父元素继承 text-indent 属性的值 |
例子
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>text-indent属性</title>
<style type="text/css">
p
{
font-size:14px;
text-indent:28px;
}
</style>
</head>
<body>
<h3>中国</h3>
<p>中国加油</p>
<p>武汉加油</p>
</body>
</html>
9、white-space：空白符处理
| 值 | 描述 |
|---|---|
| normal | 默认，空白会被浏览器忽略 |
| pre | 空白会被浏览器保留，其行为方式类似 HTML 中的 <pre> 标签 |
| nowrap | 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止 |
| pre-wrap | 保留空白符序列，但是正常地进行换行 |
| pre-line | 合并空白符序列，但是保留换行符 |
| inherit | 规定应该从父元素继承 white-space 属性的值 |
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title> <style>
.box{ width: 400px; height: 300px; background: lightgreen; }
</style>
</head>
<body>
<div class="box"> It is when my love is bewildering the soul ！
</div>
</body>
</html>
10、text- overflow：标示对象内溢出文本
| 值 | 描述 |
|---|---|
| clip | 修剪文本 |
| ellipsis | 显示省略符号来代表被修剪的文本 |
| string | 使用给定的字符串来代表被修剪的文本 |
例子
使用text-overflow属性：
div.test
{
text-overflow:ellipsis;
}
到底啦！
