[HTML] Web front-end development technology 2 (HTML5, CSS3, JavaScript) formatted text markup, definition list,

I hope you are happy, I hope you are healthy, I hope you are happy, I hope you like it!

Finally, follow meow, follow meow, follow meow, you will see more interesting blogs! ! !

Meow meow meow, you are really important to me!

Table of contents

Preface

Format text and paragraphs

Web page design principles

Add text information to web pages

Formatted text markup

title word tag

Add spaces and special symbols

Text modification tags (important)

Computer Output Markup (Comprehension)

Quote and term marking (comprehension)

font tag (important)

Paragraph and formatting marks

paragraph mark

newline mark

Horizontal dividing line mark (important)

Pinyin/phonetic symbol annotation ruby mark and rt/rp mark

paragraph indent mark

After-school exercises

Familiar with the application of ul elements in unordered lists

Familiar with the application of ol elements in ordered lists.

Practice defining the use of list nesting.

Practice mixing unordered, ordered, and defined list nesting.

Summarize

Preface

Reviewing in advance at the end of the semester and taking the exam right after class is exciting. Do well in the exam, do well in the exam, points will come, points will come, points will come from all directions, meow~

our target is:

Formatted text markup

Grip title character （ h1 ～ h6 tag and attribute language. )

Understand the types and functions of text formatting tags, and learn to use various styles.

font used by the academic society font tag.

Learn to use paragraphs and typography marks.

Learn to use various formatting tags Design simple Web Page.

list

1. Understand the types of lists;

2. Master unordered list , ordered List , Definition list markup syntax and attribute syntax;
3.3. a> Learn to use unordered, ordered and defined list designsLearn to use nested lists to design small website homepages. 5.Web page;Web4. Understand the markup syntax of menu lists and directory lists;

Format text and paragraphs

l 1. 标题标签 <h1>-<h6>

l 2. Paragraph label <p>

l 3. horizontal line < hr< /span> >

l 4. 换行标签 < br >

l 5. font tag <font>

l 6. Shikuru Kakushiki <pre>

l 7. 缩标签 < blockquote >

l 8. pinyin or sound tag note <ruby>

how to say? You can remember it or not. If you remember it, it will be easier to use later. If you don’t remember it, you will remember it if you use it too much in the future. Look at yourself!

WebPrinciples of page design

concise

       The goal is to meet people's practical needs and needs, which requires conciseness and accuracy.

consistency

       Every page in the website uses the same margins, and each element on the page is consistent with the color and style of the entire page and site.

good contrast

       The purpose of contrast is to highlight key content to attract viewers and encourage them to explore deeper content.

Add text information to web pages

<body> Add content here </body>

Grammar instructions

The body element defines the body of the document.

The body element contains all the content of the document (such as text, hyperlinks, images, tables, lists, etc.).

The content contained in the Body tag will be displayed on the page.

Formatted text markup

title word tag

l The title is defined by tags such as <h1> - <h6> .

l Basic language

<h1 align=“left|center|right| justify " >1号标题字</h1>

Add spaces and special symbols

l In HTML files, spaces are added differently than in other documents , the web page uses code control to add spaces , and in a>. In other editors, use the keyboard space bar to enter spaces

l Basic language

<body>

 <®×

</body>

Note: No matter how many spaces or carriage returns are entered within the body tag, the page will be ignored when displaying.

Text modification tags (important)

Text modification tags are supported by all browsers and are still available in various web development tools.

Computer Output Markup (Comprehension)

Quote and term marking (comprehension)

fontfontlabel (important)

The l font tag is used to change the default font, color, size and other attributes. These changes are completed through different attribute definitions.

l Basic language

<font face="" size="" color="" ></font>

l Attribute description

Paragraph and formatting marks

Paragraph mark<p>

The l paragraph <p> tag is used to start a paragraph, which is a block level element. Between paragraphs default is a blank line for separation .

l 基本语法 <p align=" left|center|right "> 段落正文内容 </p>

揢行标记<br>

l Basic language

<br> 换行

In the document, the <br> element belongs to a single flag, indicating the insertion of a newline character.

Horizontal dividing line mark<hr> (Important)

The l <hr> element can display a thin line on the browser to separate the two areas.

l Basic language

<hr size="" color="" width="" align="" >

pinyin/sound annotationruby sound annotation a>rt/rp label


<ruby>
      中<rt>zhong</rt>
      国<rt><rp>(</rp> guo <rp>)</rp></rt>
</ruby>

• ruby tag definition comment (Chinese phonetic or character). The ruby tag is used together with the rt tag.

• ruby The tag consists of one or more characters (needs an explanation / pronunciation) and a rt tag providing that information, and optionally rp tag, defines the content displayed when the browser does not support ruby tag.

• Note that some browsers will have no effect after defining the rp tag.

Paragraph 缩进标记<blockquote>

Paragraph indentation(Also known as "block quote")blockquote< The content quoted by the a i=4> tag must be a block-level tag. The browser adds line breaks before and after the blockquote tag and adds margins.

l pair blockquote tags can shrink to the right Enter the position of 5 Western characters .

l Basic language

<body>

<blockquote>Content that needs to be indented</blockquote>

</body>

Preformatted tag<pre>

The l <pre></pre> tag applies to the text paragraphs in the web page. Pre-formatted , the browser will completely retain the format defined by the designer in the source file, including various Spaces, indents and other special spaces

list

There are a total of5 types of lists in . species3, etc.unordered list, ordered list, definition list, which are unordered lists, ordered lists, Definition lists, menu lists, and directory lists. Commonly used lists includeHTML

unordered list

l unordered table ( U nordered L< /span> ist )

resigned html 4>ul></ul>, not completed Introducing the ranking table. Column table(List Items)liUsing the list for recording.

l Basic language

<ul type=“disc | circle | square">

<li type="">项目名称</li>

<li type="">项目名称</li>

<li type="">项目名称</li>

…

</ul>

符号： disc - ●； circle -○； square -■

ordered list

l Ordered table ( O rdered , completed ordered table entry. >ol></ol<written in the textHTMLlist. It's inolist) L

l Basic language

List nesting

InHTML files, the use of nested lists not only makes the content layout of the web page more beautiful, but also makes the displayed content clearer and clearer. .

l Basic language

<ul>

   <li >Item name

        <ol>

             <li >Item name </li>

              …

         </ol>

   </li>

    …

</ul>

definition list

l Definition list ( D efinition <dl></dl> filesHTML tag is a pair tag. Insert pairs of tags intoist)dl L

l Basic language

<dl>

    <dt>项目1</dt>

             <dd>说明1<dd>

             <dd>说明2<dd>

        …

</dl>

dtdesignation origin:definition ermt

dd标记的由来: definition description

After-school exercises

If you are doing questions, you are welcome to come to Miaomiao to make a question package, which will be accompanied by relevant pictures, transcripts, answers, and sent with one click.

For example, in this chapter, there are many pictures. You can ask Meow to get them, and then copy and paste them directly into the img. It’s easy to use.

The "img" folder under the site folder is specially used to store images used in web pages. All < /span> into this folder. Picture materials

Character set: utf-8

The title of this web page file is "Li Bai's Poems"

"Wine will come in" is the first-level title

Pay attention to setting the superscript of the text

Insert the corresponding picture "qiang.jpg"

The specific effect is shown in the figure below:

The prompt information for setting the picture is: Li Bai's poems

Set the picture replacement information to: wine will be served


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>李白诗词</title>
</head>
<body>
<div align="center">
    <p>将进酒|送友人|静夜思</p>
    <hr/>
    <img src="images/qiang.jpg" alt="将进酒" title="李白诗词">
    <h1>将进酒</h1>
    <p>君不见，黄河之水天上来，奔流到海不复回。</p> 
    <p>君不见，高堂明镜悲白发，朝如青丝暮成雪。</p> 
    <p>人生得意须尽欢，莫使金樽空对月。</p> 
    <p>天生我材必有用，千金散尽还复来。</p> 
    <p>烹羊宰牛且为乐，会须一饮三百杯。 </p>
    <p>岑夫子<sup>1</sup>，丹丘生<sup>2</sup>，将进酒，杯莫停。</p> 
    <p>与君歌一曲，请君为我倾耳听。 </p>
    <p>钟鼓馔玉何足贵，但愿长醉不愿醒。</p> 
    <p>古来圣贤皆寂寞，唯有饮者留其名。</p> 
    <p>陈王昔时宴平乐，斗酒十千恣欢谑。</p> 
    <p>主人何为言少钱，径须沽取对君酌。 </p>
    <p>五花马,千金裘，呼儿将出换美酒，与尔同销万古愁。</p> 
    <hr/>
    <p>1.岑夫子：人名</p>
    <p>2.丹丘生：人名</p>
</div>
</body>
</html>

Web page title: Graphic and text introduction to Meijia Decoration Company

The picture prompt information is (title attribute): Meijia Decoration

Image replacement text (alt attribute): Company profile

Image height 193, width 141, left aligned, image border 2

Image: intro.gif

"Company Profile": first-level title, displayed in the center

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>美家装饰公司图文简介</title>
</head>

<body>
<h1>公司简介</h1>
<hr>
<p><img src="images/intro.gif" alt="公司简介" title="美家装饰" height="193" width="141" align="left" border="2">
美家装饰有限公司是一家集家具生产和家具装饰一体的综合服务公司，公司产品齐全，提供全程优质服务，节约客户宝贵时间，引导客户做出合理决策，本公司主要生产橱柜、桌椅、卧室床、阶梯椅、剧场椅、屏风、办公家具等各类产品，适用于家庭、政府机关、学校、宾馆、酒店、医院、银行等。公司拥有高效的团队，科学的管理，先进的设备，完美的设计，结合优质的材料，保障公司所生产的每件产品都展示了对人性的充分尊重，使顾客均能享受人性化所带来的健康和舒适。</p> 
</body>
</html>

Familiar with the application of ul elements in unordered lists

<!-- edu_4_2_1.html -->
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
   <title>无序列表</title>
	</head>
	<body>
	<h4>Disc 项目符号列表：</h4>
	<ul type="disc">
      <li>计算机科学与技术专业</li>
      <li>软件工程专业</li>
      <li type="circle">信息管理与信息系统专业   </li>
	</ul>
	<h4>Circle 项目符号列表：</h4>
	<ul type="circle">
	   <li>计算机科学与技术专业</li>
	   <li type="square">软件工程专业</li>
	   <li>信息管理与信息系统专业</li>
	</ul>
	<h4>Square 项目符号列表：</h4>
	<ul type="square">
<li>计算机科学与技术专业</li>
<li>软件工程专业</li>
<li>信息管理与信息系统专业</li>
</ul>	
</body>
</html>

Familiar with the application of ol elements in ordered lists.

<!-- edu_4_3_1.html -->
<!doctype html>
<html lang="en">
<head>  
	<meta charset="UTF-8">
	<title>有序列表</title>
</head>
<body>
	<h4>1数字编号：</h4>
	<ol>
        <li>计算机科学与技术专业</li>
        <li>软件工程专业 </li>
        <li>信息管理与信息系统专业</li>
        <li>电子信息工程专业</li> 
	</ol>
	<h4>A字母编号：</h4>
	<ol type="A">
        <li>计算机科学与技术专业</li>
        <li>软件工程专业 </li>
        <li>信息管理与信息系统专业</li>
        <li>电子信息工程专业</li>
    </ol>
    <h4>aI混合编号：</h4>
    <ol type="a">
        <li>计算机科学与技术专业</li>
        <li type="I" value="5">软件工程专业 </li>
        <li>信息管理与信息系统专业</li>
        <li>电子信息工程专业</li>
        <li>电子科学与技术专业</li>
        <li>物联网工程专业</li> 	
	</ol>		
</body>
</html>

ExercisesDefinition listsThe use of nesting.

<!-- edu_4_6_1.html -->
<html>
<head>
<meta charset="utf-8">
<title>定义列表</title>
</head>
<body>
<h4>定义列表展示联系人信息</h4>
<dl>
<dt>联系人:</dt>
	<dd>张有为之</dd>
    <dd>电话:010-11011011</dd>
    <dd>E-mail:[email protected]</dd>
<dt>联系地址:</dt>
	<dd>上海市复旦大学计算机系10计算机班</dd>
<dt>邮政编码:</dt>
	<dd>200433</dd>
</dl>
</body>
</html>

ExercisesUnordered, ordered, definition listsMixed use of nesting.

Web page title: Meijia Decoration News Center

The bullets before "Article Category", "Meijia Community Registration Steps", and "Meijia Community Contact Information" are hollow circles

"News Center" is a secondary title

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>美家装饰新闻中心</title>
</head>

<body>

<h2>新闻中心</h2>
<ul type="circle">
	<li>文章分类</li>
    	<ul type="disc">
        	<li>新闻中心</li>
            <li>装修学堂</li>
            <li>网购天地</li>
            <li>美家社区</li>
        </ul>
        <hr/>
    <li>美家社区注册步骤</li>
    	<ol type="A">
        	<li>填写会员信息</li>
            <li>接收电子邮件</li>
            <li>激活会员账号</li>
            <li>注册成功</li>
        </ol>
        <hr/>
    <li>美家社区联系方式
    	<dl>
    		<dt>电话</dt>
            	<dd>400-111-6666</dd>
    		<dt>地址
            	<dd>开封市金明大道3号</dd>
    	</dl>
    </li>
</ul>
</body>
</html>

Character set: utf-8

Web page title: Hyperlink application

Set a hyperlink for the text "Baidu": http://www.edu.cn, open in the current window, and the prompt information pointing to the link is "Baidu".

Set a hyperlink for the text "China Education and Research Computer Network": http://www.edu.cn, it will open in a new window, and the prompt information pointing to the link is "CERNET".

Set a hyperlink for the text "Sina": http://www.sina.com.cn, open in the current window, and the prompt information pointing to the link is "Sina".

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>超链接应用</title>
</head>

<body>
   <h3>超链接导航</h3>
   <a href="http://www.baidu.com" title="BaiDu">百度</a><br>
   <a href="http://www.edu.cn" target="_blank" title="CERNET">中国教育与科研计算机网</a><br>
   <a href="http://www.sina.com.cn" target="_self" title="Sina">新浪</a>
</body>

</html>

Character set: utf-8

Web page title: Site navigation

Use paragraph marks and hyperlinks to implement website navigation, set as four-level headings

The first line of navigation is implemented using paragraphs and hyperlinks, requiring all hyperlinks to be opened in new windows

The height of the horizontal dividing line is 2 and the color is blue

Use an unordered list to implement a horizontal navigation bar and set it as a fourth-level title

The second part of the navigation bar is implemented using unordered lists and hyperlinks.

Navigation link information table on the first line of the web page

serial number

Website name

URL

1

Baidu

http://www.baidu.com/

2

Sina

http://www.sina.com.cn/

3

Tencent

http://www.qq.com/

4

Sohu

http://www.sohu.com/

5

Netease

http://www.163.com/

6

valley song

http://www.google.com.hk/

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>网站导航</title>
</head>

<body>
<h4>使用段落标记和超链接实现网站导航</h4>
<p>
   <a href="" target="_blank">百度</a>
   <a href="" target="_blank">新浪</a>
   <a href="" target="_blank">网易</a>
   <a href="" target="_blank">腾讯</a>
   <a href="" target="_blank">搜狐</a>
   <a href="" target="_blank">360搜索</a>
</p>
<hr size="2" color="#3399CC">
<h4>利用无序列表实现水平导航条</h4>
<ul>
	<li><a href="" target="_blank">百度</a></li>
    <li><a href="" target="_blank">新浪</a></li>
    <li><a href="" target="_blank">网易</a></li>
    <li><a href="" target="_blank">腾讯</a></li>
    <li><a href="" target="_blank">搜狐</a></li>
    <li><a href="" target="_blank">360搜索</a></li>
</ul>
</body>
</html>

Title: Meijia Decoration Download Zone

"Download Area": Secondary Title

Icon: title.jpg, left aligned

"Category/Title": font size 4, gray

Horizontal dividing line: gray

Click the "Meijia Decoration Technical Documents" hyperlink to the "Download Document Details Page" web page (3-8-1.html)

The hyperlinks of the remaining text are set to empty links.

The opening method of all hyperlinked pages is set to: open in new window

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>美家装饰下载专区</title>
</head>

<body>
<img src="images/title.jpg" align="left">
<h3>&nbsp;&nbsp;下载专区</h3>
<p><font size="4" color="#999999">分类/标题</font></p>
<hr color="#CCCCCC"/>
<a href="3-8-1.html" target="_blank">美家装饰技术文档</a><br/>
<a href="#" target="_blank">家具选购文档</a><br/>
<a href="#" target="_blank">水电改造文档</a><br/>
<a href="#" target="_blank">色彩搭配文档</a><br/>
<a href="#" target="_blank">工程合同文档</a><br/>
</body>
</html>

Since this page involves downloading files, you needto put the material folderguide.rar Copied to the root directory of mysite_3.

Title: Download document details page

Technical Documentation, Download: Secondary Title

Icon: title.jpg, left aligned

Horizontal dividing line: gray

Image: doc.jpg, aligned to the left, the image prompt information is "Technical Document Download", set a hyperlink for the image, click the image to download the guide.rar file

Red font size is 5, rest gray font size is 3

Click "Download" to download the guide.rar file

Create an email link for "Meijia Decoration Download Zone": [email protected]

Click "Back to Top" to jump to the top of the page

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>下载文档详细页面</title>
</head>

<body>
	<a name="top"></a>
	<img src="images/title.jpg" align="left">
	<h2>&nbsp;&nbsp;技术文档</h2>
	<hr color="#999999"/>
	<a href="guide.rar" title="技术文档下载"><img src="images/doc.jpg" align="left"></a>
	<p><font size="5" color="#FF0000">&nbsp;&nbsp;&nbsp;&nbsp;家装技术文档</font></p>
	<p>&nbsp;&nbsp;&nbsp;&nbsp;下载次数：<font size="3" color="#999999">20</font></p>
	<p>&nbsp;&nbsp;&nbsp;&nbsp;文件大小：<font size="3" color="#999999">19.33k</font></p>
	<p>&nbsp;&nbsp;&nbsp;&nbsp;添加时间：<font size="3" color="#999999">2017-07-12</font></p><br/><br/><br/><br/>
	<img src="images/title.jpg" align="left">
	<h3>&nbsp;&nbsp;下载</h3>
	<hr color="#999999">
	<font size="3" color="#999999">文件名称：家装技术文档 文件大小：19.22KB</font> &nbsp;&nbsp;<a href="guide.rar">下载</a><br/><br/>
和我联系：<a href="mailto:[email protected]">美家装饰下载专区</a> <a href="#top">返回页顶</a>
</body>
</html>

Page title:Bookmark linked to the same page

Set corresponding hyperlinks for "Dreamweaver MX [same page], Flash MX [same page], and Fireworks MX [same page]" respectively to link to the bookmarks set for the corresponding content of this web page.

Set the corresponding hyperlink for "EditPlus[different page]" to link to the "3-9-1.html" web page corresponding to the content of EditPlus.

<!-- edu_5_3_2.html -->
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
	<title>链接到同一页面的书签</title>
</head>
<body>
	<h3><a name="software">主流的网页设计软件</a></h3>
	<ul>
	     <li><a href="#dw">Dreamweaver MX[同页]</a></li>
	     <li><a href="#fl">Flash MX[同页]</a></li>
	     <li><a href="#fw">Fireworks MX[同页]</a></li>
	     <li><a href="3-9-1.html#EditPlus">EditPlus[异页]</a></li>
	</ul>
	<h2><a name="dw">Dreamweaver MX</a></h2>
	<p>&nbsp;&nbsp;&nbsp;&nbsp;Dreamweaver是美国Macromedia公司（现已被Adobe公司收购，成为Adobe Dreamweaver）开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。</p>
   <h4 align="right"><a href="#software">返回</a></h4>
	<h2><a name="fl">Flash MX</a></h2>
	<p>&nbsp;&nbsp;&nbsp;&nbsp;Flash是美国Macromedia公司所设计的二维动画软件，全称Macromedia Flash（被Adobe公司收购后称为Adobe Flash），主要用于设计和编辑Flash文档。附带的Macromedia Flash Player，用于播放Flash文档。
现在，Flash已经被Adobe公司购买，最新版本为：Adobe Flash CS6 Professional，播放器也更名为Adobe Flash Player。</p>
<h4 align="right"><a href="#software">返回</a></h4>
	<h2><a name="fw">Fireworks MX</a></h2>
	<p>&nbsp;&nbsp;&nbsp;&nbsp;Adobe Fireworks可以加速 Web 设计与开发，是一款创建与优化 Web 图像和快速构建网站与 Web 界面原型的理想工具。Fireworks不仅具备编辑矢量图形与位图图像的灵活性，还提供了一个预先构建资源的公用库，并可与 Adobe Photoshop、Adobe Illustrator、Adobe Dreamweaver和Adobe Flash软件进行集成。在Fireworks 中将设计迅速转变为模型，或利用来自 Illustrator、Photoshop 和 Flash 的其它资源。然后直接置入Dreamweaver 中轻松地进行开发与部署。</p>
	<h4 align="right"><a href="#software">返回</a></h4>
</body>
</html>

The specific requirements for webpage "3-9-1.html" are as follows:

Web page title:Bookmark links between different pages

Set a hyperlink for all "return to home page" text on the page, linking to the top of the web page "3-9.html"

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>不同页面之间的书签链接 </title>
</head>
 <body>
    <h2><a name="dw">Dreamweaver MX</a></h2>
	<p>&nbsp;&nbsp;&nbsp;&nbsp;Dreamweaver是美国Macromedia公司（现已被Adobe公司收购，成为Adobe Dreamweaver）开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。</p>
    <h4 align="right"><a href="3-9.html#software">返回首页</a></h4>
	<h2><a name="fl">Flash MX</a></h2>
	<p>&nbsp;&nbsp;&nbsp;&nbsp;Flash是美国Macromedia公司所设计的二维动画软件，全称Macromedia Flash（被Adobe公司收购后称为Adobe Flash），主要用于设计和编辑Flash文档。附带的Macromedia Flash Player，用于播放Flash文档。
现在，Flash已经被Adobe公司购买，最新版本为：Adobe Flash CS6 Professional，播放器也更名为Adobe Flash Player。</p>
    <h4 align="right"><a href="3-9.html#software">返回首页</a></h4>
	<h2><a name="fw">Fireworks MX</a></h2>
	<p>&nbsp;&nbsp;&nbsp;&nbsp;Adobe Fireworks可以加速 Web 设计与开发，是一款创建与优化 Web 图像和快速构建网站与 Web 界面原型的理想工具。Fireworks不仅具备编辑矢量图形与位图图像的灵活性，还提供了一个预先构建资源的公用库，并可与 Adobe Photoshop、Adobe Illustrator、Adobe Dreamweaver和Adobe Flash软件进行集成。在Fireworks 中将设计迅速转变为模型，或利用来自 Illustrator、Photoshop 和 Flash 的其它资源。然后直接置入Dreamweaver 中轻松地进行开发与部署。</p>
	<h4 align="right"><a href="3-9.html#software">返回首页</a></h4>
    <h2><a name="EditPlus">EditPlus</a></h2>
    <p>&nbsp;&nbsp;&nbsp;&nbsp;EditPlus(文字编辑器)汉化版一套功能强大，可取代记事本的文字编辑器，EditPlus拥有无限制的撤消与重做、英文拼字检查、自动换行、列数标记、搜寻取代、同时编辑多文件、全屏幕浏览功能。而它还有一个好用的功能，就是它有监视剪贴板的功能，能够同步于剪贴板自动将文字粘贴进 EditPlus 的编辑窗口中，让你省去粘贴的步骤。另外它也是一个非常好用的 HTML 编辑器，它除了支持颜色标记、HTML 标记，同时支持 C、C++、Perl、Java，另外，它还内建完整的HTML & CSS1 指令功能，对于习惯用记事本编辑网页的朋友，它可帮你节省一半以上的网页制作时间，若你有安装 IE 3.0 以上版本，它还会结合IE 浏览器于 EditPlus 窗口中，让你可以直接预览编辑好的网页(若没安装IE，也可指定浏览器路径)。 
	</p>
	<h4 align="right"><a href="3-9.html#software">返回首页</a></h4>
 </body>
</html>

Summarize

Formalized characters and paragraph tags：Click title character tags, font tags, text modification tags and paragraph matching tags.
1.标题标签<h1>-<h6>
2 .Paragraph marker<p>
3.Horizontal line markerblockquote<ruby>pinyin or sound tag annotation8.><缩标签7. <pre>Kakuru kaku style6.<font>Font tag5.>br<标签4.>hr<

Introduced5 typesHTML lists, respectively Areunordered lists, ordered lists, definition lists, menu lists, and directory lists. But there are only 3 types of commonly used lists, namely unordered lists, ordered lists, and definition lists. Menu lists and directory lists can be considered special cases of unordered lists.

Lists can be nested, but not cross-nested, otherwise a syntax error will occur. Lists can be composed of unordered lists and multi-layered sub-lists of ordered lists, making the presentation of web content more hierarchical and beautiful.

The list items of the unordered list have bullets (3 types), and the list items of the ordered list have item numbers (5 species), before defining list items There is neither number nor symbol.

I hope you are happy, I hope you are healthy, I hope you are happy, I hope you like it!

Finally, follow meow, follow meow, follow meow, you will see more interesting blogs! ! !

Meow meow meow, you are really important to me!

serial number	Website name	URL
1	Baidu	http://www.baidu.com/
2	Sina	http://www.sina.com.cn/
3	Tencent	http://www.qq.com/
4	Sohu	http://www.sohu.com/
5	Netease	http://www.163.com/
6	valley song	http://www.google.com.hk/

[HTML] Web front-end development technology 2 (HTML5, CSS3, JavaScript) formatted text markup, definition list,

Preface

Format text and paragraphs

WebPrinciples of page design

Add text information to web pages

Formatted text markup

title word tag

Add spaces and special symbols

Text modification tags (important)

Computer Output Markup (Comprehension)

Quote and term marking (comprehension)

fontfontlabel (important)

Paragraph and formatting marks

Paragraph mark<p>

揢行标记<br>

Horizontal dividing line mark<hr> (Important)

pinyin/sound annotationruby sound annotation a>rt/rp label

Paragraph 缩进标记<blockquote>

list

unordered list

ordered list

List nesting

definition list

After-school exercises

Familiar with the application of ul elements in unordered lists

Familiar with the application of ol elements in ordered lists.

ExercisesDefinition listsThe use of nesting.

ExercisesUnordered, ordered, definition listsMixed use of nesting.

Summarize

Guess you like