1.div
定义和用法
<div> 可定义文档中的分区或节(division/section)。
<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。
如果用 id 或 class 来标记 <div>,那么该标签的作用会变得更加有效。
用法
<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上,换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。
不必为每一个 <div> 都加上类或 id,虽然这样做也有一定的好处。
可以对同一个 <div> 元素应用 class 或 id 属性,但是更常见的情况是只应用其中一种。这两者的主要差异是,class 用于元素组(类似的元素,或者可以理解为某一类元素),而 id 用于标识单独的唯一的元素。
- <body>
-
- <h1>NEWSWEBSITE</h1>
- <p>sometext.sometext.sometext...</p>
- ...
-
- <divclass="news">
- <h2>Newsheadline1</h2>
- <p>sometext.sometext.sometext...</p>
- ...
- </div>
-
- <divclass="news">
- <h2>Newsheadline2</h2>
- <p>sometext.sometext.sometext...</p>
- ...
- </div>
-
- ...
- </body>
//以上内容:http://www.w3cschool.cn/tag_div.asp.htm
//div在应用系统网站中,是运用得比较多的html标签之一。
//id属性:作为唯一标识,便于dom操作。 class属性:一般用来引用外部的CCS样式表,渲染表现作用。
2.<ul> 标签定义了无序列表。
- <html>
-
- <body>
-
- <h4>一个无序列表:</h4>
- <ul>
- <li>咖啡</li>
- <li>茶</li>
- <li>牛奶</li>
- </ul>
-
- </body>
- </html>
代码结果:
●咖啡
●茶
●牛奶
其type属性:type="circle" 或type="disc" 或 type="square“
提示:请使用样式来定义列表的类型。
3.table
定义和用法
<table> 标签定义 HTML 表格。
简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
tr 元素定义表格行,th 元素定义表头,td 元素定义表格单元。
更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。
4.span
<span> 标签被用来组合文档中的行内元素。
例子
<p><span>some text.</span>
some other text.</p>
例子解释
如果不对 span 应用样式,那么 span 元素中的文本与其他文本不会任何视觉上的差异。尽管如此,上例中的 span 元素仍然为 p 元素增加了额外的结构。
可以为 span 应用 id 或 class 属性,这样既可以增加适当的语义,又便于对 span 应用样式。
可以对同一个 <span> 元素应用 class 或 id 属性,但是更常见的情况是只应用其中一种。这两者的主要差异是,class 用于元素组(类似的元素,或者可以理解为某一类元素),而 id 用于标识单独的唯一的元素。
提示:事实上,您也许已经注意到了,W3CSchool 站点上有一些文本的样式与其他文本是不同的。比如“提示”使用了粗体的橘红色。尽管实现这种效果的方法非常多,但是我们的做法是:使用“提示”使用 span 元素,然后对这个 span 元素的父元素,即 p 元素应用 class,这样就可以对这个类的子元素 span 应用相应的样式了。
HTML:
- <pclass="tip"><span>提示:</span>.........</p>
CSS:
- p.tipspan{
- font-weight:bold;
- color:#ff9955;
- }
学习查阅网站:http://www.w3cschool.cn/tag_span.asp.htm
分享到:
相关推荐
基于上述两种原因,作者认为需要编写一本能够利用HTML5新技术开发移动Web应用的入门书籍,令广大读者在真正学习到HTML5新技术的同时,也能快速掌握移动Web开发的基础知识。 关于本书 本书不足之处在于,本书并没有...
蝉知企业门户系统是由业内资深开发团队开发的一款专向企业营销使用的企业门户系统,企业使用蝉知系统可以非常方便地搭建一个专业的企业营销网站,进行宣传,开展业务,服务客户。蝉知系统内置了文章、产品、论坛、...
本实验通过对该项目整体结构搭建、主页面、登录页面、个人中心页面、博客详情页面、以及后台管理页面的设计与代码实现,训练学生对网页开发过程中HTML+CSS布局知识点、HTML 常用基础标签的使用以及表单及表单控件等...
企业可以在蝉知基础上开发自己的应用,使之更符合自己的业务逻辑。 一、修改记录 1、每套风格都支持样式自定义 2、样式自定义选项细分 3、区块支持跨行 4、产品增加排序功能 5、整理一键安装包 6、调整各个模板风格...
鉴于市场上用户的手机型号、种类、屏幕分辨率等参差不齐,传统方式根据主流系统分别开发相应的系统耗时又耗力,为了高效开发并节约开发项目成本,本文采用Android+HTML5相结合的方式进行移动端Web系统的设计研发工作...
本源码项目是基于Django3.0和Vue2的移动端旅游网站后端设计,包含1441个文件,主要使用Python、JavaScript、CSS和HTML编程语言。...通过该项目,开发者可以学习...系统界面友好,易于操作,适合用于各类旅游网站开发场景。
蝉知企业门户系统是由业内资深开发团队开发的一款专向企业营销使用的企业门户系统,企业使用蝉知系统可以非常方便地搭建一个专业的企业营销网站,进行宣传,开展业务,服务客户。蝉知系统内置了文章、产品、论坛、...
本源码项目是基于C#的民三三校园交流网站设计,包含221个文件,主要使用C#、CSS、JavaScript和HTML编程语言。该项目是一个校园交流网站,旨在帮助学生更...系统界面友好,易于操作,适合用于各类校园交流网站开发场景。
本羽阐述了Ajax开发技术的方方面面:不仅全面介绍了Ajax的基础知识,更有对令人高山仰止的架构和模式的深刻探讨,也有潺潺流水般细致的实例展示,而且还涵盖了专业Ajax开发必不可少的可用性、安全和性能等主题。...
本源码项目是基于Vue的动漫影视网站设计,包含49个文件,主要使用Vue、...通过该项目,开发者可以学习并实践Vue技术的应用,为后续的Web开发奠定基础。系统界面友好,易于操作,适合用于各类动漫影视发布和播放场景。
项目概述:本项目是一个...项目来源:本项目基于github.com/kinegratii/django-echarts开源项目,后者是一个将Pyecharts与Django成功整合的实例,提供了强大的数据可视化功能,方便用户在此基础上进行拓展和定制开发。
网站信息管理系统模板 - 基于Java开发,包含844个文件,如PNG、JS、GIF、JSP、JAVA、JPG、CSS、SWF、XML和HTML等。该系统主要用于管理网站信息服务,提供了一个基础框架模板,为开发者提供了一个高效、易用的信息...
cmake是kitware公司以及一些开源开发者在开发几个工具套件(VTK)的过程中衍生品,最终形成体系, 成为一个独立的开放源代码项目。项目的诞生时间是2001年。其官方网站是www.cmake.org,可以通 过访问官方网站获得更多...
基 础 知 识. 第1章 asp.net介绍 2 1.1 xhtml语言 2 1.2 静态网页 3 1.3 动态网页 3 1.4 iis的安装和配置 3 1.5 asp.net开发的预备知识 4 1.5.1 asp.net简介 4 1.5.2 在iis上配置asp.net 4 1.5.3 visual ...
本源码为基于SpringBoot的Fastcms前后端分离CMS系统设计,共包含1278个...该系统采用了SpringBoot技术栈,具有插件化架构,提供高扩展性和易维护性,适用于快速搭建网站和微信小程序,是开发微信营销插件的基础平台。
《CSS设计彻底研究》适合需要使用CSS的Web设计人员和开发人员阅读,最好具备一定的HTML和网页设计制作基础。 CSS:像艺术家一样浪漫,像工程师一样严谨; 核心原理、技巧与设计实战; 剖析CSS原理4大核心:盒子...
据我所知,JSP基于Java,因此Java程序员可以轻松开始编码。ASP只是一个一般的引擎,具有支持多种语言的能力,不过默认的并且是最常用的还是VBScript。 mod_perl与Perl一样强大,只是更快一些。 二、PHP入门 PHP...
项目主要以Vue为开发语言,辅以JavaScript、CSS和HTML技术进行页面构建与样式设计。 文件结构:项目包含28个文件,其中Vue组件文件11个,JavaScript脚本文件8个,JSON数据配置文件2个,以及其他配置与资源文件。 ...
本源码项目是基于Python的茶叶信息爬虫设计,包含30个文件,主要使用...通过该项目,开发者可以学习并实践Python技术的应用,为后续的Web开发奠定基础。系统界面友好,易于操作,适合用于各类茶叶信息爬虫开发场景。
新一代的ESPCMS-P8平台,内置一套响应式的模板,具备开发方便,可以通过二次开发,扩展出常见的系统功能。 易思ESPCMS企业建站管理系统 P8.19042801 稳定版 更新日志 [[改进]:增加对PHP5.6,PHP7.0的支持 [改进]...