HTML text tags & lists

Date: 2020-10-02

Author: 19th WY

Tags: html text tag & list tag

One, em and strong

Both of these tags indicate an emphasized content.
em mainly indicates the emphasis on the tone. The em is displayed in italics by default in the browser.
Strong indicates the emphasized content, which is stronger than em, and is displayed in bold by default.
These two tags can be used alone or together

<p>今天天气<em>针不戳</em>！</p>
<p>
	<strong>
		如果你不认真上课，你就gg了
	</strong>
</p>

Two, i and b tags

The content in the i tag will be displayed in italics The content in the
b tag will be displayed in bold
The h5 specification stipulates that for content that does not need to be emphasized, but simply bold or italic, you can use the b and i tags

<p>
	<i>
		我是i标签中的内容
	</i>
<br /><br />
	<b>
		我是b标签中的内容
	</b>
</p>

Three, small label

The content in the small tag will be smaller than the text in its parent element
Use the small tag in h5 to indicate some detailed rules,
such as the small print in the contract and the copyright statement of the website can be placed in small

<p>
	我是p标签的内容<samll>我是small标签中的内容</samll>
</p>

Four, cite label

All content with book title number on the web page can use cite tag to indicate the reference content,
such as: book title, song title, drama name, movie name

<p>
	<cite>《论语》</cite>是最喜欢的一本书
</p>

Five, q and blockquote tags

The q tag represents a short quotation (inline quotation)
. The content of the q tag quotation, the browser adds quotation marks by default
The blockquote tag represents a long quote (block-level quote) (block elements cannot be placed in p, but can be placed in div)

<p>
	子曰：<q>学而时习之</q>
</p>
<div>
	子曰：
		<blockquote>
			不亦乐乎
		</blockquote>
</div>

Six, sup and sub tags

Use the sup tag to set the superscript
The sub tag represents a subscript

<p>2<sup>2</sup></sub></p> 
<p>赵薇<sup><a href="#">【1】</a></sup></p>

<p>H<sub>2</sub>O</p>

Seven, del and ins tags

Use the del tag to indicate a deleted content. The content in the
del tag will automatically add strikethrough
ins represents the content of an inserted content
ins, which will automatically be underlined

<p>
	<del>17.75</del><br />
	15.54<br />	
</p>

<p>
	好<ins>haoa</ins>
</p>

Eight, pre and code tags

Need to write some code in the page:

pre is a pre-format tag, (how many spaces are reserved) will save the format in the code, and will not ignore multiple spaces
code is specifically used to represent code
We generally use pre and code to represent a piece of code

<pre>
	<code>
window.onload = function(){
	alert("hello");
};			
	</code>
</pre>

Result of text label:

Text label result

Nine, unordered list

Unordered list:
Use the ul tag to create an unordered list
Use li to create a list item in ul,
a li is a list item
The bullets of the unordered list can be modified through the type attribute
Optional values:
disc, default value, solid far point
square, solid square
circle, hollow circle
Note that we generally do not use the default bullets
If you need to set up bullets, you can set the background image for li to set
Both ul and li are block elements

<ul type="disc">
		<li>大雾</li>
		<li>计组</li>
		<li>汇编</li>
		<li>离散</li>
</ul>

You can use CSS to remove the bullets:

<style type="text/css">
/*
去掉项目符号
*/
	ul{
    
    
		list-style:none;
	}
</style>

The list is equivalent to the list of shopping in the supermarket.
You can also create a list in HTML. There are three types of lists in the web page:
1. Unordered list
2. Ordered list
3. Definition list

Ten, ordered list

An ordered list is similar to an unordered list, except that it uses ol instead of ul
Ordered lists use ordered serial numbers as bullets
type attribute, you can specify the type of serial number

Optional values:

 1，默认值，使用阿拉伯数字
 a/A 采用小写或大写字母作为序号
 i/I 采用小写或大写的罗马数字作为序号

ol is also a block element

<ol type="1">
		<li>大雾</li>
		<li>计组</li>
		<li>汇编</li>
		<li>离散</li>
</ol>

The lists can be nested with each other, you can put an ordered list in the unordered list, or you can put an unordered list in the ordered list

<p>菜谱</p>
		<ul>
			<li>
				鱼香肉丝
				<ol>
					<li>鱼</li>
					<li>香</li>
					<li>肉丝</li>
				</ol>
			</li>
			<li>宫爆鸡丁</li>
			<ul>
				<li>宫保</li>
				<li>鸡丁</li>
			</ul>
			<li>青椒肉丝</li>
		</ul>

11. Definition list

The definition list is used to define some words or content
Use dl to create a definition list

There are two subtags in dl

 dt：被定义的内容
 dd：对定义内容的描述

<dl>
	<dt>武松</dt>
	<dd>景阳冈打虎英雄，战斗力99</dd>
	<dd>后打死西门庆，投奔梁山</dd>
	<dt>武大</dt>
	<dd>著名餐饮企业家，战斗力0</dd>
</dl>

The result of the list:

List result