Typography label
title label
<!-- 共6种标题 -->
<h1>标题一共六级选</h1>
<h2>文字加粗一行里</h2>
<h3>由大到小依次减</h3>
<h4>从重到轻随之变</h4>
<h5>语法规范书写到位</h5>
<h6>具体效果刷新见</h6>
Paragraph tag
<p>段落内容</p>
Newline label
<br/>
Horizontal label
<hr/>
<div>And <span>labels The
two of them have no semantics, they are mainly used to distinguish and layout, and can be used as boxes to hold other labels.
A div can be seen as a big box and only one div can be placed in a row. A div can be
seen as a small box and many spans can be placed on a row.
<div></div>
<span></span>
Text formatting tags
| label | effect |
|---|---|
<b></b>Or < strong></strong> |
Bold text |
<i></i> 或<em></em> |
Character italics |
<s></s>或<del></del> |
Text removal line |
<u></u> 或 <ins></ins> |
Text underline |
Among these tags, <b> <i> <s> <u>4 tags can only achieve their own effects without semantics, so it is not recommended to use them. The <strong> <em> <del> <ins>4 tags can not only achieve different effects, but also have strong semantics, so it is recommended to use them.
The<img>
format of the image tag is as follows:
<img src="图像.jpg" width="104" height="142" />
Attributes of the <img`> tag:
When only one of the width and height attributes is set, the image will be scaled proportionally.
Path
There will be a lot of pictures in the page. Usually we will create a new folder to store these image files (images). Then we need
to use the "path" method to specify the location of the image files when looking for images .
The path can be divided into:
- relative path
- Absolute path
Relative path: the directory path established based on the location of the referenced file.
To put it simply, the
relative path of the position of the picture relative to the HTML page starts from the file where the code is located to find the target file, and the upper level, the next level and the same level we are talking about here are the
picture relative to the HTML The location of the page.
Absolute path: Refers to the absolute location under the directory, directly to the target location, usually the path starting from the drive letter.
For example, "D:\web\img\logo.gif" or the full web address "http://www.itcast.cn/images/logo.gif".
The anchor tag<a>
< a>tag represents a hyperlink, and its syntax is as follows:
<!-- 当内容为文本时，表示为文本加链接 -->
<!-- 当内容为图像时，表示为图像加链接 -->
<a href="跳转目标" target="目标窗口的打开方式">内容</a>
href: Used to specify the url address of the link target. When the value of href is "#", it means an empty address and no redirection.
target: Used to specify the opening method of the linked page, and its value has two types: "_self" and "_blank".
其中self 为默认值，表示在当前窗口打开链接，blank为在新窗口中打开方式。
Anchor point positioning
Anchor point positioning can achieve the effect of jumping on the current page.
There are two steps to using anchor points:
① 为某个标签添加 id 属性。
② 在<a> 标签中添加 href="#id 值"。
Examples are as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>锚点定位练习</title>
</head>
<body>
<h3><a href="#China">去中国</a></h3>
<h3><a href="#America">去美国</a></h3>
<h3><a href="#England">去英国</a></h3>
<p id="China"> 这里是中国 </p>
<p id="America"> 这里是美国 </p>
<p id="England"> 这里是英国 </p>
</body>
</html>
The < base> tag is
used to set the open state of the overall link, written between the <head>tags, as shown below:
<head>
<!-- 设置本页面中所有的链接的打开方式为_blank -->
<base target="_blank" />
</head>
List tags
There are three types of list tags: unneeded lists, ordered lists and custom lists. The most used one is unneeded lists. Let's look at them one by one below.
Unordered List (Key Point) An
unordered list is <ul></ul>represented by tags, and its list items are <li></li>represented by tags. It should be noted <ul>that generally only <li>tags are placed in the tags, and no other <li>tags are placed , and other tags can be stored in the tags. There is no order of each list item, it is a parallel relationship, and the syntax format is as follows:
<ul>
<li>列表项1</li>
<li>列表项2</li>
...
</ul>
Examples of unordered lists:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>无序列表演示</title>
</head>
<body>
<h3>下面是徐峥导演的四部电影</h3>
<ul>
<li>人在囧途</li>
<li>泰囧</li>
<li>港囧</li>
<li>囧妈</li>
</ul>
</body>
</html>
After opening with a browser, the effect is as follows:
Ordered list
Unordered list is <ol></ol>represented by tags, and its list items are also represented by <li></li>tags. There is an order relationship between each list item. The syntax format is as follows:
<ol>
<li>列表项1</li>
<li>列表项2</li>
...
</ol>
example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>有序列表演示</title>
</head>
<body>
<h3>一天分三餐</h3>
<ol>
<li>早餐</li>
<li>午餐</li>
<li>晚餐</li>
</ol>
</body>
</html>
With the browser to open as shown below:
custom list
custom list of terms or terminology commonly used to explain and describe custom list needs three different labels to <dl>the label start, each custom list item to <dt>begin, each custom defined list item to <dd>begin, a <dt>may correspond to a plurality of<dd>。
The following is the bottom layout of Xiaomi's official website. This layout can be written using a custom list:
The syntax format of the custom list is as follows:
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
...
</dl>
example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自定义列表演示</title>
</head>
<body>
<dl>
<dt>清华大学</dt>
<dd>教学楼</dd>
<dd>图书馆</dd>
<dd>体育馆</dd>
<dt>教室</dt>
<dd>桌子</dd>
<dd>椅子</dd>
<dd>黑板</dd>
</dl>
</body>
</html>
After opening with a browser, it looks like this:
