HTML5 study notes (4) - list, block and layout code examples
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
|
is obsolete. Use
|
- ,
Attributes: disc, circle, square
Example:2. Ordered listUse tags<!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- , < ;li> Attributes: A, a, I, i, start
- 4. Customize the list Use the tags
<!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- ,
- , < 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 loginHTML block
##1. HTML block element When block elements are displayed, they usually start with a new line
For example:
,
,
2. HTML
Inline elementsInline 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)
Two methods are recommended:<!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元素--><p id="wraper"> <p>prospective</p> <a>1可能的,有望的 2未来的, 即将发生的</a></p><!--span元素: 文本的容器--><p id="span"> <p>respective: <span>分别的,</span> 各自的</p></p></body></html>Copy after login1. 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 login2. 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 loginThe 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!
Statement of this WebsiteThe 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
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Assassin's Creed Shadows: Seashell Riddle Solution3 weeks ago By DDDWhat's New in Windows 11 KB5054979 & How to Fix Update Issues2 weeks ago By DDDAssassin's Creed Shadows - How To Find The Blacksmith And Unlock Weapon And Armour Customisation1 months ago By DDDWhere to find the Crane Control Keycard in Atomfall3 weeks ago By DDDRoblox: Dead Rails - How To Complete Every Challenge3 weeks ago By DDD
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
CakePHP Tutorial
1392
52
nyt mini crossword answers
36
110
See all articles
Table Border in HTML
Sep 04, 2024 pm 04:49 PM
Guide to Table Border in HTML. Here we discuss multiple ways for defining table-border with examples of the Table Border in HTML.
Nested Table in HTML
Sep 04, 2024 pm 04:49 PM
This is a guide to Nested Table in HTML. Here we discuss how to create a table within the table along with the respective examples.
HTML margin-left
Sep 04, 2024 pm 04:48 PM
Guide to HTML margin-left. Here we discuss a brief overview on HTML margin-left and its Examples along with its Code Implementation.
HTML Table Layout
Sep 04, 2024 pm 04:54 PM
Guide to HTML Table Layout. Here we discuss the Values of HTML Table Layout along with the examples and outputs n detail.
HTML Input Placeholder
Sep 04, 2024 pm 04:54 PM
Guide to HTML Input Placeholder. Here we discuss the Examples of HTML Input Placeholder along with the codes and outputs.
Moving Text in HTML
Sep 04, 2024 pm 04:45 PM
Guide to Moving Text in HTML. Here we discuss an introduction, how marquee tag work with syntax and examples to implement.
HTML Ordered List
Sep 04, 2024 pm 04:43 PM
Guide to the HTML Ordered List. Here we also discuss introduction of HTML Ordered list and types along with their example respectively
HTML onclick Button
Sep 04, 2024 pm 04:49 PM
Guide to HTML onclick Button. Here we discuss their introduction, working, examples and onclick Event in various events respectively.
- , < dd>
3. Nested lists (including ordered list nesting and unordered list nesting) Use the 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- ,
- ,
