HTML+CSS学习笔记（3）- 认识标签（2）_html/css_WEB-ITnose
1、使用ul，添加新闻信息列表
在浏览网页时，你会发现网页上有很多信息的列表，如新闻列表、图片列表，这些列表就可以使用ul-li标签来完成。ul-li是没有前后顺序的信息列表。
语法：
<ul> <li>信息</li> <li>信息</li> ......</ul>
举例：
<ul> <li>精彩少年</li> <li>美丽突然出现</li> <li>触动心灵的旋律</li></ul>
ul-li在网页中显示的默认样式一般为：每项li前都自带一个圆点.
2、使用ol，添加图书销售排行榜
如果想在网页中展示有前后顺序的信息列表，怎么办呢？如，当当网上的书籍热卖排行榜，这类信息展示就可以使用
- 标签来制作有序列表来展示。语法：
- 前都自带一个序号，序号默认从1开始，
3、认识div在排版中的作用
在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个
标签中，这个标签的作用就相当于一个容器。语法：
<div>…</div>
Copy after login确定逻辑部分：什么是逻辑部分？它是页面上相互关联的一组元素。如网页中的独立的栏目版块，就是一个典型的逻辑部分。
4、给div命名，使逻辑更加清晰
在上一小节中，我们把一些标签放进
里，划分出一个独立的逻辑部分。为了使逻辑更加清晰，我们可以为这一个独立的逻辑部分设置一个名称，用id属性来为提供唯一的名称，这个就像我们每个人都有一个身份证号，这个身份证号是唯一标识我们的身份的，也是必须唯一的。语法：<div id="版块名称">…</div>
Copy after logintable标签，认识网页上的表格
创建表格的四个元素：
table、tbody、tr、th、td
1、
…
：整个表格以标记开始、
标记结束。2、
…：当表格内容非常多时，表格会下载一点显示一点，但如果加上标签后，这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。3、
… ：表格的一行，所以有几对tr 表格就有几行。4、
… ：表格的一个单元格，一行中包含几对... ，说明一行中就有几列。5、
… ：表格的头部的一个单元格，表格表头。6、表格中列的个数，取决于一行中数据单元格的个数。总结：
1、table表格在没有添加css样式之前，在浏览器中显示是没有表格线的
2、表头，也就是th标签中的文本默认为粗体并且居中显示
6、用css样式，为表格加入边框
Table 表格在没有添加 css 样式之前，是没有边框的。这样不便于我们后期合并单元格知识点的讲解，所以在这一节中我们为表格添加一些样式，为它添加边框。
在右侧代码编辑器中添加如下代码：
<style type="text/css">table tr td,th{border:1px solid #000;}</style>Copy after login上述代码是用 css 样式代码，为th，td单元格添加粗细为一个像素的黑色边框。
7、caption标签，为表格添加标题和摘要
摘要
摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。
语法：<table summary="表格简介文本">
Copy after login标题
用以描述表格内容，标题的显示位置：表格上方。
语法：
<table> <caption>标题文本</caption> <tr> <td>…</td> <td>…</td> … </tr>…</table>
Copy after login
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 DDDWhere to find the Crane Control Keycard in Atomfall3 weeks ago By DDDAssassin's Creed Shadows - How To Find The Blacksmith And Unlock Weapon And Armour Customisation1 months 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
1387
52
See all articles
Is HTML easy to learn for beginners?
Apr 07, 2025 am 12:11 AM
HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.
What is the purpose of the <progress> element?
Mar 21, 2025 pm 12:34 PM
The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati
The Roles of HTML, CSS, and JavaScript: Core Responsibilities
Apr 08, 2025 pm 07:05 PM
HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.
What is the purpose of the <datalist> element?
Mar 21, 2025 pm 12:33 PM
The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159
What is the purpose of the <meter> element?
Mar 21, 2025 pm 12:35 PM
The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex
What is an example of a starting tag in HTML?
Apr 06, 2025 am 12:04 AM
AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.
Understanding HTML, CSS, and JavaScript: A Beginner's Guide
Apr 12, 2025 am 12:02 AM
WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.
Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors?
Apr 04, 2025 pm 11:54 PM
GiteePages static website deployment failed: 404 error troubleshooting and resolution when using Gitee...
<ol> <li>信息</li> <li>信息</li> ......</ol>
举例：
下面是一个热点课程下载排行榜：
<ol> <li>前端开发面试心法 </li> <li>零基础学习html</li> <li>JavaScript全攻略</li></ol>
- 在网页中显示的默认样式一般为：每项
