Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

Home > Web Front-end > H5 Tutorial > body text

HTML5 study notes (4) - list, block and layout code examples

黄舟

Release： 2017-03-16 15:41:48

Original

1211 people have browsed it

HTML list

List tag

tag	Description
	Define an ordered list.
	Define an unordered list.
	Define list items.
<dl>	Definition definition list.
	Definition definition project.
	Definition Description of the definition.
<dir>	is obsolete. Use instead.
	is obsolete. Use instead.

##Commonly used lists

1. Unordered list

Use tags:

Attributes: disc, circle, square

Example:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>聊表</title></head><body>
    <!--无序列表, 列表项为li-->
    <!--disc 实心圆, circle 空心圆, square 实行正方形, 依次更改运行看下--><ul type="disc">
    <li>apple</li>
    <li>orange</li>
    <li>bananer</li>
    <li>Berry</li></ul></body></html>

Copy after login

2. Ordered list

Use tags

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>列表</title></head><body><!--有序列表, 列表项为li--><!--A: 以A,B,C...排序
    a: 以a,b,c...排序
    I: 以I, II, III...排序
    i: 以i,ii,iii...排序
    start: 自己定义排序的第一个--><ol type="i">
    <li>iOS</li>
    <li>Android</li>
    <li>Java</li>
    <li>Swift</li>
    <li>Objective-C</li></ol></body></html>

Copy after login

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>列表</title></head><body><!----><ul type="square">
    <li>iOS</li>
        <ul>
            <li>iPhone</li>
            <li>iWatch</li>
            <li>iPod</li>
            <li>iPad</li>
        </ul>
    <li>Android</li>
        <ul>
            <li>Any Call</li>
            <li>Oppo</li>
            <li>Vivio</li>
            <li>Huawei</li>
        </ul>
    <li>Objective-C</li></ul></body></html>

Copy after login

4. Customize the list

Use the tags

, < dd>
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>自定义列表</title></head><body><dl>  <dt>cast:</dt>  <dd>vi. 1投掷扔抛, 2丢弃, 抛弃 3把...投向, 抛射, 4分派..., 扮演角色 5铸造, 浇铸 n. 全体演员</dd> <dt>forecast:</dt> <dd>v. 预测, 预报, /dd> <dd>n. 预测, 预报<</dd> <dt>insight:</dt> <dd>n. 洞察力, 领悟 v. 洞悉, 了解</dd></dl></body></html>
Copy after login
HTML block
##　
1. HTML block element When block elements are displayed, they usually start with a new line
For example:
,
,
2. HTML
Inline elements
Inline elements usually do not start with a new line
For example: , ,
3. HTML
element
The
element is also called a block element, which is mainly a container that combines HTML
4. HTML element
The span element is an inline element and can be used as a container for text
Example: You can paste and run it to see the effect (development tool IntelliJ IDEA)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>块元素</title>  <style type="text/css"> #wraper p{ color: blueviolet; } #span span{ color: indianred; } </style></head><body><h1>visual:</h1><p>视力的, 视觉的</p> <b>vision:</b><a>1视力, 2眼光,远见, 洞察力 3幻想 4设想, 念头</a> <p id="wraper"> <p>prospective</p> <a>1可能的,有望的 2未来的, 即将发生的</a></p><p id="span"> <p>respective: <span>分别的,</span> 各自的</p></p></body></html>
Copy after login
HTMLLayout
Two methods are recommended:
1. Use
element layout
Example: In fact, there is no need to add p in the css code, and usually there is no need to add
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>p布局</title> <style type="text/css"> body{margin: 0px} p#container{ /*可以充满全屏*/ width: 100%; height: 950px; background-color: darkgray; } p#heading{ width: 100%; height: 10%; background-color: aqua; } p#menu{ width: 30%; height: 80%; background-color: darkorange; float: left; } p#mainbody{ width: 70%; height: 80%; background-color: brown; float: left; } p#footing{ width: 100%; height: 10%; background-color: cornflowerblue; clear: both; } </style></head><body><p id="container"> <p id="heading">头部</p> <p id="menu">内容菜单</p> <p id="mainbody">内容主体</p> <p id="footing">底部</p></p></body></html>
Copy after login
2. Use
element layout
Example:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>table布局</title></head><body marginheight="0px" marginwidth="0px"> <table width="100%" height="950" style="background-color: darkgray"> <tr> <td colspan="3" width="100%" height="10%" style="background-color: aqua"> 头部 </td> </tr> <tr> <td width="20%" height="80%" style="background-color: cornflowerblue"> <ul> <li>diktatet</li> <li>diktator</li> <li>diktation</li> </ul> </td> <td width="60%" height="80%" style="background-color: cadetblue">中间部分</td> <td width="20%" height="80%" style="background-color: crimson">右菜单</td> </tr> <tr> <td width="100%" height="10%" colspan="3" style="background-color: coral">底部</td> </tr></table></body></html>
Copy after login
The above is the detailed content of HTML5 study notes (4) - list, block and layout code examples. For more information, please follow other related articles on the PHP Chinese website!

Related labels：
HTML5，布局，列表

source：php.cn

Previous article：HTML5 Study Notes (3) - Detailed explanation of HTML5 styles, connections and table codes Next article：Detailed explanation of HTML5 predictions that it will be possible to replace local apps

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

Latest Articles by Author

Video material on building your own PHP framework from scratch

2023-03-15 16:54:01

Example analysis of how PHPMailer uses QQ mailbox to complete the email sending function

2023-03-15 12:26:02

Introduction to how to receive emails in IMAP in php

2023-03-14 18:58:01

Example of how to quickly implement array deduplication in PHP

2023-03-14 11:30:01

Summary of the use of all attributes of the tag in html

1970-01-01 08:00:00

Summary of basic knowledge of PHP (necessary for beginners to get started)

2023-03-16 15:20:01

Introduction to the use of typeof in JavaScript

1970-01-01 08:00:00

Introduction to the use of confirm() method in JavaScript

1970-01-01 08:00:00

A detailed introduction to the HTML5 Placeholder attribute

1970-01-01 08:00:00

How to implement single-select, multiple-select and reverse-select in forms in ReactJS

1970-01-01 08:00:00

Latest Issues

Container does not increase its width when Flexbox item wraps in column mode I'm developing a nested Flexbox layout that works as follows: the outermost level (ul#main...

From 2023-10-17 22:05:01

0

2

176

Is it possible to change the layout displayed at smaller resolutions via MediaQueries without changing the default layout? I'm using a "grid template columns" layout on the default resolution so that the...

From 2023-09-16 14:17:29

0

1

521

Real-time map editing: Tips and methods to explore seatchart.js I'm trying to design a venue layout using seatchart.js, is it possible to have live editin...

From 2023-09-16 10:26:07

0

1

218

Mix grid autolayout with fixed column and column positions I have the following HTML with CSS grid<divid="grid"><divclass="ma...

From 2023-09-15 16:01:55

0

1

180

Re-title: fixed div columns and remaining width I'm trying to create a 5 column layout where all columns are the full height of the browse...

From 2023-09-14 17:17:47

0

1

299

Related Topics
More>

What are the production methods of html5 animation production?

The difference between HTML and HTML5

What does terminal equipment mean?

navigator.useragent

How to delete blank pages in word without affecting other formats

How to open rar file

Solution to the problem that win10 download software cannot be installed

Ethereum browser blockchain query

Popular Recommendations

what is h5

How to create an h5 page if you don't understand code? Recommended H5 page production platform

What are the new features of html5

What is h5 page production

What is the difference between h5 and mini program?

Popular Tutorials
More>

Related Tutorials

Popular Recommendations

Latest courses

The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)

1403053

PHP introductory tutorial one: Learn PHP in one week

4230846

JAVA Beginner's Video Tutorial

2418227

Little Turtle's zero-based introduction to learning Python video tutorial

498134

PHP zero-based introductory tutorial

833964

The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)

1403053 times of learning

JAVA Beginner's Video Tutorial

2418227 times of learning

Little Turtle's zero-based introduction to learning Python video tutorial

498134 times of learning

Quick introduction to web front-end development

214170 times of learning

Master PS video tutorials from scratch

858864 times of learning

[Web front-end] Node.js quick start

4671 times of learning

Complete collection of foreign web development full-stack courses

3619 times of learning

Go language practical GraphQL

3108 times of learning

550W fan master learns JavaScript from scratch step by step

559 times of learning

Python master Mosh, a beginner with zero basic knowledge can get started in 6 hours

16077 times of learning

Latest Downloads
More>

Web Effects

Website Source Code

Website Materials

Front End Template

[form button] jQuery enterprise message form contact code

[Player special effects] HTML5 MP3 music box playback effects

[Menu navigation] HTML5 cool particle animation navigation menu special effects

[form button] jQuery visual form drag and drop editing code

[Player special effects] VUE.JS imitation Kugou music player code

[html5 special effects] Classic html5 pushing box game

[Picture special effects] jQuery scrolling to add or reduce image effects

[Photo album effects] CSS3 personal album cover hover zoom effect

[Front-end template] Home Decor Cleaning and Repair Service Company Website Template

[Front-end template] Fresh color personal resume guide page template

[Front-end template] Designer Creative Job Resume Web Template

[Front-end template] Modern engineering construction company website template

[Front-end template] Responsive HTML5 template for educational service institutions

[Front-end template] Online e-book store mall website template

[Front-end template] IT technology solves Internet company website template

[Front-end template] Purple style foreign exchange trading service website template

[PNG material] Cute summer elements vector material (EPS PNG)

[PNG material] Four red 2023 graduation badges vector material (AI EPS PNG)

[banner picture] Singing bird and cart filled with flowers design spring banner vector material (AI EPS)

[PNG material] Golden graduation cap vector material (EPS PNG)

[PNG material] Black and white style mountain icon vector material (EPS PNG)

[PNG material] Superhero silhouette vector material (EPS PNG) with different color cloaks and different poses

[banner picture] Flat style Arbor Day banner vector material (AI+EPS)

[PNG material] Nine comic-style exploding chat bubbles vector material (EPS+PNG)

[Front-end template] Home Decor Cleaning and Repair Service Company Website Template

[Front-end template] Fresh color personal resume guide page template

[Front-end template] Designer Creative Job Resume Web Template

[Front-end template] Modern engineering construction company website template

[Front-end template] Responsive HTML5 template for educational service institutions

[Front-end template] Online e-book store mall website template

[Front-end template] IT technology solves Internet company website template

[Front-end template] Purple style foreign exchange trading service website template

About us Disclaimer Sitemap

php.cn：Public welfare online PHP training，Help PHP learners grow quickly！