HTML学习10－列表标签层标签 DIV标签／SPAN标签

来源：互联网发布：zepto.js tap事件编辑：程序博客网时间：2024/06/07 15:24

HTML 块元素

大多数HTML元素被定义为块级元素或内联元素。

块级元素在浏览器中显示时，通常会以新行来开始（和结束）。

例子：<h1>,<p>,<ul>,<table>

HTML 内联元素

内联元素在显示时通常不会以新行开始。

例子：<b>,<td>,<a>,<img>

HTML <div>元素

HTML <div>元素是块级元素，它是可用于组合其他的HTML元素的容器。

<div>元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

如果与CSS一同使用，<div>元素可用于对大的内容设置样式属性。

<div>元素的另一个常见用途是文档布局。他取代了使用表格定义布局的老式方法。使用<table>元素进行文档布局不是表格的正确方法。<table> 元素的作用是显示表格化的数据。

<div style="color: cadetblue">    <h3>this is a header</h3>    <p>this is a paragraph</p></div>

在浏览器中显示的是；

浏览器支持

所有主流浏览器都支持<div>标签。

HTML 与 XHTML 之间的差异

在HTML 4.01中，div元素的“align”属性不被赞成使用。

在XHTML 1.0 Strict DTD中，div元素的“align”属性不被支持。

实例：

<html><head lang="en">    <meta charset="UTF-8">    <title>NEWS</title>    <style>        .news1        {            color: darkgreen;            font-size: 18px;        }        .news2        {            color: darkred;            font-size: 18px;        }    </style></head><body><h1>NEWS WEBSITE</h1><p>some text.some text.some text</p>...<!-- onclick点击事件，alert弹框--><div class="news1" onclick="javascript:alert('Im minmin')">    <h2>News headline 1</h2>    <p>some text.some text,some text</p>    ...</div><div class="news2">    <h2>News headline 2</h2>    <p>some text,some text,some text</p>    ...</div></body></html>

HTML <span> 元素

HTML <span>元素，内联元素，可用作文本的容器。

<span> 元素也没有特定的含义。

当与CSS一同使用时，<span>元素可用于部分文本设置样式属性。

实例：

<p><span>some text,</span>some text,</p>

例子解释：如果不对span应用样式，那么span元素中的文本与其他文本不会有任何视觉上的差异。尽管如此，上例中的span元素仍然为p元素增加了额外的结构。

可以对同一个<span>元素应用class 或者 id 属性，但是更常见的情况是只应用其中一种，这两者的主要差异是：

class 用于元素组（类似的元素，或者可以理解为某一类元素，而id用于标示单独的唯一的元素）。

HTML:

<html><head lang="en">    <meta charset="UTF-8">    <title>NEWS</title>    <link href="test03.css" type="text/css" rel="stylesheet"></head><body><p class="tip"><span>some text,</span>some text,</p></body></html>

CSS

p.tip span{    font-weight: bold;    color: blue;}

在浏览器显示的效果是：

0 0