1. Use ul to add a news information list
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title> p标签</title> 6 </head> 7 <body> 8 9 10 </body> 11 </html>
When browsing the web, you will find that there are many information lists on the web page, such as news lists , picture list, as shown below.
News list
Picture list
These lists can be created using the ul-li tag Finish. ul-li is a list of information in no order.
Grammar:
<ul> <li>信息</li> <li>信息</li> ...... </ul>
Example:
<ul> <li>精彩少年</li> <li>美丽突然出现</li> <li>触动心灵的旋律</li> </ul>
The default style of ul-li displayed on the web page is generally: each li has a dot in front of it, as shown below Shown:
Let’s try it, enter
- my first list information > on line 8 in the editor ;
li stands for List in English, ol stands for ordered list in English, and ul stands for unordered list in English
2. Use ol to add a book sales ranking list
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title> p标签</title> 6 </head> 7 <body> 8 9 10 </body> 11 </html>
Use ol to add a book sales ranking list
What should you do if you want to display a sequential information list on a web page? ? For example, the book best-selling ranking list on Dangdang.com is
as shown in the figure below. This kind of information display can use the
- tag to create an ordered list for display.
- is preceded by a serial number, and the serial number starts from 1 by default, as shown in the following figure:
Let’s try it, enter
<ol> <li>我的第一个列表信息。</li> <li>我的第一个列表信息。</li> </ol>
on line 8 in the editor. Don’t forget the syntax of the
- tag.
<ol> <li>信息</li> <li>信息</li> ...... </ol> 三、认识p在排版中的作用1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>p标签</title> 6 </head> 7 <body> 8 <h2 id="热门课程排行榜">热门课程排行榜</h2> 9 <ol> 10 <li>前端开发面试心法 </li> 11 <li>零基础学习html</li> 12 <li>javascript全攻略</li> 13 </ol> 14 <h2 id="最新课程排行">最新课程排行</h2> 15 <ol> 16 <li>版本管理工具介绍—Git篇 </li> 17 <li>Canvas绘图详解</li> 18 <li>QQ5.0侧滑菜单</li> 19 </ol> 20 </body> 21 </html>
During the web page creation process , you can divide some independent logical parts and put them in a
tag. This
tag acts like a container.
Grammar:
…
Determine the logical part:
What is the logical part? It is a set of interrelated elements on the page. For example, an independent column section in a web page is a typical logical part.
As shown in the figure below: The part marked with a red border in the figure is a logical part, and the
tag can be used as a container.
Let’s try it: use the p tag to divide the web page into independent sections
Use the p tag in the editor to divide into independent logical parts. (There are many answers, let’s see who is the most concise)
Don’t forget the syntax of the
tag:
…
Reference code : (Just one of them)
<p> <h2 id="热门课程排行榜">热门课程排行榜</h2> <ol> <li>前端开发面试心法 </li> <li>零基础学习html</li> <li>javascript全攻略</li> </ol> </p> <p> <h2 id="最新课程排行">最新课程排行</h2> <ol> <li>版本管理工具介绍—Git篇 </li> <li>Canvas绘图详解</li> <li>QQ5.0侧滑菜单</li> </ol> </p> 一个html页面可以看成一个家，而一个p你们可以看成家的每个小房间，房间有了当然没什么效果， 但是一个家必须分成一个个小房间才能多姿多彩，但每个房间里怎么装饰就得你们自己放东西，当然装饰就得交给css了， 后面讲到<p class>大家就懂了。p标签就是一个框，将里面的东西框起来，然后通过css来使这个框按照所需要的样式显示出来。 <p>就是分类，把一类东西放在一块，另一类东西放另一块。这样一目了然，就是<p>实现的。p(pISION) As the name suggests, it divides the web page into blocks. p and span can be regarded as a container, or a box (Box model) .
is equivalent to placing many containers on the browser screen. In order to look comfortable, each container must of course be arranged neatly and orderly - p positioning issues use CSS position, and FloatThe problem is using CSSfloat and the use of box model layout;
In addition, after placing the container, it is necessary to put the content, such as lists, texts, images Wait, it's just like putting vegetables in a plate container. Of course, more dishes will look better. This is the role of CSS.
We must integrate everything in our studies and learn to be a great Web front-end.
4. Name p to make the logic clearer
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>p标签</title> 6 </head> 7 <body> 8 <p> 9 <h2 id="热门课程排行榜">热门课程排行榜</h2> 10 <ol> 11 <li>前端开发面试心法 </li> 12 <li>零基础学习html</li> 13 <li>javascript全攻略</li> 14 </ol> 15 </p> 16 <p> 17 <h2 id="web前端开发导学课程">web前端开发导学课程</h2> 18 <ul> 19 <li>网页专业名词大扫盲 </li> 20 <li>网站职位定位指南</li> 21 <li>为您解密Yahoo网站制作流程</li> 22 </ul> 23 </p> 24 </body> 25 </html>
We put some tags into
to create an independent logic part. In order to make the logic clearer, we can set a name for this independent logical part,
用id属性来为
提供唯一的名称，这个就像我们每个人都有一个身份证号，这个身份证号是唯一标识我们的身份的，也是必须唯一的。
如下两图进行比较，如果设计师把两个图给你，哪个图你看上去能更快的理解呢？是不是右边的那幅图呢。
语法：
…
任务
来试试给网页的独立的版块添加“标记”
1、在编辑器中的第8行修改
代码为
。
2、在编辑器中的第16行修改
代码为
。
别忘了标记版块名称的语法：
…
p相当于划分成一个个房间，id就是房间号了
p的ID号是为了使用CSS的ID选择器，应用CSS样式，否则毫无意义。
五、table标签，认识网页上的表格
有时候我们需要在网页上展示一些数据，如某公司想在网页上展示公司的库存清单。如下表：
想在网页上展示上述表格效果可以使用以下代码：
创建表格的四个元素：
table、tbody、tr、th、td
1、
…
：整个表格以标记开始、
标记结束。2、
…：当表格内容非常多时，表格会下载一点显示一点，但如果加上标签后，这个表格就要等表格内容全部下载完才会显示。3、
… ：表格的一行，所以有几对tr 表格就有几行。4、
… ：表格的一个单元格，一行中包含几对... ，说明一行中就有几列。5、
… ：表格的头部的一个单元格，表格表头。6、表格中列的个数，取决于一行中数据单元格的个数。
上述代码在浏览器中显示的默认的样式为：
总结：
1、table表格在没有添加css样式之前，在浏览器中显示是没有表格线的
2、表头，也就是th标签中的文本默认为粗体并且居中显示
任务
来试试为数学成绩表添加一行内容
在右部编辑器中的第25-29行输入下列代码：
25.
26.
三班 27.
32 28.
80 29.
结果图：
1、表格的行标签的语法：
… 2、一行中的单元格语法：
<tr> <td>…</td> <td>…</td> … </tr>
tbody 防止那种因网速慢加载一点显示一点的情况，
如果把网页比作一个女士
加载样式的过程是化妆过程
那么tbody就相当于屏蔽了化妆的过程直到
女士化好妆在真正出来见人tr是“table row（表格行）”的缩写，用于表示一行的开始和结束。这也容易理解。
td是“table data（表格数据）”的缩写，用于表示行中各个单元格（cell）的开始和结束。table 创建表格
tbody全显示出来
th表头
tr每一行
td每一个单元格表格标签表格完全下载完后才显示
表格的一行标签 表格的一个单元格，有几个 就有几列。 表格表头标签。 tr是行，td是表头，td是单元格内容；
有几对tr就表示有几行，有几个td表示有几列。六、用css样式，为表格加入边框
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>为表格添加边框</title> 6 <style type="text/css"> 7 table tr td,th{border:1px solid #000;} 8 </style> 9 </head> 10 11 <body> 12 <table summary=""> 13 <tr> 14 <th>班级</th> 15 <th>学生数</th> 16 <th>平均成绩</th> 17 </tr> 18 <tr> 19 <td>一班</td> 20 <td>30</td> 21 <td>89</td> 22 </tr> 23 <tr> 24 <td>二班</td> 25 <td>35</td> 26 <td>85</td> 27 </tr> 28 <tr> 29 <td>三班</td> 30 <td>32</td> 31 <td>80</td> 32 </tr> 33 </table> 34 35 </body> 36 </html>Table 表格在没有添加 css 样式之前，是没有边框的。我们为表格添加一些样式，为它添加边框。
在代码编辑器中添加如下代码：
<style type="text/css"> table tr td,th{border:1px solid #000;} </style>上述代码是用 css 样式代码，为th，td单元格添加粗细为一个像素的黑色边框。
结果窗口显示出结果样式：
表格风格改变代码头尾：
表格四元素：table tr td,th
边框大小与颜色：{border:1px solid #000;}七、caption标签，为表格添加标题和摘要
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>认识table表标签</title> 6 <style type="text/css"> 7 table tr td,th{ 8 border:1px solid #000; 9 } 10 </style> 11 </head> 12 <body> 13 <table> 14 15 <tr> 16 <th>产品名称 </th> 17 <th>品牌 </th> 18 <th>库存量（个） </th> 19 <th>入库时间 </th> 20 </tr> 21 <tr> 22 <td>耳机 </td> 23 <td>联想 </td> 24 <td>500</td> 25 <td>2013-1-2</td> 26 </tr> 27 <tr> 28 <td>U盘 </td> 29 <td>金士顿 </td> 30 <td>120</td> 31 <td>2013-8-10</td> 32 </tr> 33 <tr> 34 <td>U盘 </td> 35 <td>爱国者 </td> 36 <td>133</td> 37 <td>2013-3-25</td> 38 </tr> 39 </table> 40 </body> 41 </html>表格还是需要添加一些标签进行优化，可以添加标题和摘要。代码如下：
摘要
摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。
语法：
简介文本">
标题
用以描述表格内容，标题的显示位置：表格上方。
语法：
<table> <caption>标题文本</caption> <tr> <td>…</td> <td>…</td> … </tr> … </table>来试试，为文章添加标题
1. 在编辑器中为表格添加摘要，摘要的内容为“本表格记录2012年到2013年库存记录，记录包括U盘和耳机库存量”。
2. 在编辑器中为表格添加标题，标题的内容为“2012年到2013年库存记录”。
别忘了caption标签的语法
<caption>...</caption>
标题，肯定在最上面，也不能跑到表外面吧。所以在
下一行的位置写就行。
备注，是这个表的备注，所以，紧跟着table吧。table的summary属性目的是语义化标签，是为了SEO，和完全是两回事，
因为浏览器(除了ie)，百度，谷歌的引擎是不会读你的注释文字的。
【相关推荐】
1. 免费html在线视频教程
2. html开发手册
Grammar:
<ol> <li>信息</li> <li>信息</li> ...... </ol>
Example:
The following is a popular course download ranking:
<ol> <li>前端开发面试心法 </li> <li>零基础学习html</li> <li>JavaScript全攻略</li> </ol>
- The default style displayed on the web page is generally: each item of
The above is the detailed content of Basic HTML Tutorial: Understanding Tags (3). For more information, please follow other related articles on the PHP Chinese website!
HTML vs. CSS and JavaScript: Comparing Web TechnologiesApr 23, 2025 am 12:05 AMHTML, CSS and JavaScript are the core technologies for building modern web pages: 1. HTML defines the web page structure, 2. CSS is responsible for the appearance of the web page, 3. JavaScript provides web page dynamics and interactivity, and they work together to create a website with a good user experience.
HTML as a Markup Language: Its Function and PurposeApr 22, 2025 am 12:02 AMThe function of HTML is to define the structure and content of a web page, and its purpose is to provide a standardized way to display information. 1) HTML organizes various parts of the web page through tags and attributes, such as titles and paragraphs. 2) It supports the separation of content and performance and improves maintenance efficiency. 3) HTML is extensible, allowing custom tags to enhance SEO.
The Future of HTML, CSS, and JavaScript: Web Development TrendsApr 19, 2025 am 12:02 AMThe future trends of HTML are semantics and web components, the future trends of CSS are CSS-in-JS and CSSHoudini, and the future trends of JavaScript are WebAssembly and Serverless. 1. HTML semantics improve accessibility and SEO effects, and Web components improve development efficiency, but attention should be paid to browser compatibility. 2. CSS-in-JS enhances style management flexibility but may increase file size. CSSHoudini allows direct operation of CSS rendering. 3.WebAssembly optimizes browser application performance but has a steep learning curve, and Serverless simplifies development but requires optimization of cold start problems.
HTML: The Structure, CSS: The Style, JavaScript: The BehaviorApr 18, 2025 am 12:09 AMThe roles of HTML, CSS and JavaScript in web development are: 1. HTML defines the web page structure, 2. CSS controls the web page style, and 3. JavaScript adds dynamic behavior. Together, they build the framework, aesthetics and interactivity of modern websites.
The Future of HTML: Evolution and Trends in Web DesignApr 17, 2025 am 12:12 AMThe future of HTML is full of infinite possibilities. 1) New features and standards will include more semantic tags and the popularity of WebComponents. 2) The web design trend will continue to develop towards responsive and accessible design. 3) Performance optimization will improve the user experience through responsive image loading and lazy loading technologies.
HTML vs. CSS vs. JavaScript: A Comparative OverviewApr 16, 2025 am 12:04 AMThe roles of HTML, CSS and JavaScript in web development are: HTML is responsible for content structure, CSS is responsible for style, and JavaScript is responsible for dynamic behavior. 1. HTML defines the web page structure and content through tags to ensure semantics. 2. CSS controls the web page style through selectors and attributes to make it beautiful and easy to read. 3. JavaScript controls web page behavior through scripts to achieve dynamic and interactive functions.
HTML: Is It a Programming Language or Something Else?Apr 15, 2025 am 12:13 AMHTMLisnotaprogramminglanguage;itisamarkuplanguage.1)HTMLstructuresandformatswebcontentusingtags.2)ItworkswithCSSforstylingandJavaScriptforinteractivity,enhancingwebdevelopment.
HTML: Building the Structure of Web PagesApr 14, 2025 am 12:14 AMHTML is the cornerstone of building web page structure. 1. HTML defines the content structure and semantics, and uses, etc. tags. 2. Provide semantic markers, such as, etc., to improve SEO effect. 3. To realize user interaction through tags, pay attention to form verification. 4. Use advanced elements such as, combined with JavaScript to achieve dynamic effects. 5. Common errors include unclosed labels and unquoted attribute values, and verification tools are required. 6. Optimization strategies include reducing HTTP requests, compressing HTML, using semantic tags, etc.
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
Hot Tools
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
SublimeText3 English version
Recommended: Win version, supports code prompts!
WebStorm Mac version
Useful JavaScript development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
SublimeText3 Linux new version
SublimeText3 Linux latest version
