HTML之class属性、table元素、块级和内联元素

一:网页的组成部分:

1.结构:HTML

2.样式:CSS

3.行为:Javascript

二:介绍新的属性:class(类),直接用例子来解释该属性的用法:

给一个标签确定样式的三种方法(按样式表的位置区分):

1.行间样式表:在<body>内直接添加样式,如:

< p class="box" style="color:blue">测试文字</p>

2.内部样式表:

1)在<body>内需要添加样式的属性处输入,如:

<p class="box">测试文字</p>

2)在<head>内具体描述box这个属性类,如:

<style type="text/css">       //type后的值固定,虽然我也不知道是什么意思
    .box{color:blue}
</style>

3.外部样式表:

1)在DW中新建一个CSS文件

2)在HTML文件中的<body>内需要添加样式处输入,如:

<p class="box">测试文字</p>

3)在新建好的CSS文件中添加属性类的样式:

@charset "utf-8";
/* CSS Document */

.box{color:blue;}

4)在HTML文件中<head>内添加:

<link type="text/css" href="css/style.css" rel="stylesheet" />

其中,href链接的为新建的CSS文件对于当前HTML文件的相对路径,其余均为固定值

三.表格:table

在DW中,表格的创建有两种方式:

1.用<table>表格内容</table>元素创建:

1)表格中用到的标签:

<table定义表格

<th>定义表格的表头

<tr>定义表格的行

<td>定义表格单元

<caption>定义表格标题

2)表格的属性

a.表格边框属性border,其值代表边框的粗细,单位px

b.表格边框间距属性:cellspacing

c.表格内边距属性:cellpadding

图示b、c代表的几何意义:绿色箭头表示的距离就是b,红色箭头表示的距离就是c

d.表格位置属性:align

补:将align加到<table>中时,确定表格在页面中的位置;将align加到<tr>中时,确定表格中的内容在表格中的位置

e.表格背景色:bgcolor

f.表格背景添加图片:background="<img href="图片路径"/> "

其他关于边框的属性请点这里 、 更详细的点这里

3)表格单元<td>的属性:

a.横向合并单元格colspan,如:

<tr colspan="2">表格内容</tr>
//横向合并两个单元格

b.纵向合并单元格rowspan,如:

<tr rowspan="2">表格内容</tr>
//纵向合并两个单元格

注:若表格中未设定值时,默认值为&nbsp

eg:创建一个表头为”heading“的2*2的表格,边框粗细为1px

<table border="1">
<tr>
<th>Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

2.由于创建表格的代码大量重复且繁琐,故在DW中,可以通过点击插入-表格的方式来直接创建表格。也可通过选择单元格并单右选择合并单元格的方式来合并单元格。

注:合并表格边框:table{border-collapse:collapse}此语句应该放入新建的CSS文件中

下示代码中包含了大多数上述的功能:

HTML文件:

CSS文件:

上段代码的效果如下图:

四.块级元素和内联元素(HTML中元素大多数都是“块级”元素或行内元素):

1.块级元素:

1)概念:概念:块级元素占据其父元素(容器)的整个空间,因此创建了一个“块”。

2)特点:独占一行;支持所有样式;不设置宽度时宽度为父元素宽度;换行符不解析;

3)块级元素示例:

HTML文件:

<p>
This paragraph is a block-level element; its background has been colored to display the paragraph‘s parent element.
</p>

CSS文件:

p { background-color: #8ABB55; }

4)用法:块级元素只能出现在 <body> 元素内。

5)常用块级元素列表:

<address>联系方式信息。

<article>文章内容。

<aside> 伴随内容。

<audio>音频播放。

<blockquote>块引用。

<canvas> 绘制图形。

<dd>定义列表中定义条目描述。

<div>文档分区。

<dl> 定义列表。

<fieldset>表单元素分组。

<figcaption> 图文信息组标题

<figure> 图文信息组

<footer> 区段尾或页尾。

<form>表单。

<h1>, <h2>, <h3>, <h4>, <h5>, <h6> 标题级别 1-6.

<header>区段头或页头。

<hgroup> 标题组。

<hr>水平分割线。

<noscript> 不支持脚本或禁用脚本时显示的内容。

<ol>有序列表。

<output> 表单输出。

<p>行。

<pre>预格式化文本。

<section> 一个页面区段。

<table> 表格。

<tfoot>表脚注。

<video> 视频。

<ul>无序列表。

注:<ul>是无序列表 (列表一般都配合<li>标签使用)

用法示例:

<ul>
   <li>111</li>
   <li>222</li>
   <li>333</li>
   <li>444</li>
</ul>

生成的列表效果图:

此外,<ol>和<dl>是有序列表,用法以示例给出:

<ol>
   <li>111</li>
   <li>222</li>
   <li>333</li>
   <li>444</li>
</ol>

<dl>
   <li>111</li>
   <li>222</li>
   <li>333</li>
   <li>444</li>
</dl>

结果:

2.内联元素:

1)概念:一个行内元素只占据它对应标签的边框所包含的空间。

2)特点:可以在一行显示;不支持宽高,上下margin和padding等样式会有问题;宽度由内容撑开;换行符会被解析(不同浏览器下宽度不一样)

3)举例说明行内元素的作用范围:

HTML:

<p>
  This
    <span>span</span>
  is an inline element; its background has been colored to display both the beginning and end of the inline element‘s influence
</p>

CSS:

span { background-color: #8ABB55; }

4)常用行内元素列表:

b, big, i, small, tt

abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var

a, bdo, br, img, map, object, q, script, span, sub, sup

button, input, label, select, textarea

3 块级元素和行内元素的比较:

1)内容:

一般情况下,内联元素只能包含数据和其他行内元素。

而块级元素可以包含行内元素和其他块级元素。这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构。

2)格式:默认情况下,内联元素不会以新行开始,而块级元素会新起一行。

3)一般情况下,块级元素不允许嵌套;而内联元素可以嵌套

时间: 2024-10-14 14:17:52

HTML之class属性、table元素、块级和内联元素的相关文章

html的块级、内联、内联块级元素基础

概念 块级:block 内联:inline 内联块级:inline-block 在html元素中,元素会有display属性 display属性默认值是block,那么该元素是块级元素. display属性默认值是inline,那么该元素是内联元素. 没有元素的display默认值是inline-block. display属性值可以被设置,比如可以把块级元素div的display的值设成inline,那么它就变成了内联元素,不再独行显示. 特征 1.块级元素 独占一行. 可设置width,he

web兼容学习分析笔记--块级、内联、内联块级元素

一.块级.内联.内联块级元素 (1)块级元素:block **独占一行 **可设置width,height,margin,padding **内部可包含块级或内联元素 (3)内联(行内)元素:inline **和其他inline元素同行显示 **可以设置margin-left,margin-righ,padding-left,padding-right, **无效设置widht,height,margin-top,margin-bottom,padding-top,padding-bottom

顶级、块级、内联,html元素的三大分类

学习html后, 你会了解一些基本的html元素(Element), 如p, h1~h6, br, div, li, ul, img等.如果将这些元素细分, 又可以分别归为顶级(top-level)元素,块级(block-level)元素和内联(inline)元素. 1. Top-level element [顶级元素]:    { html, body, frameset }包括html, body, frameset, 表现如Block-level element, 属于高级块级元素. 2.

块元素(block element)和内联元素

内联元素和块状元素能够用 display :block/inline   相互转换 块状元素变成内联元素的话,他的高就会失效而变为行高: 使用display:inline-block,让行内元素同时具有行内元素特性也能设置宽高 如果display:none的话,该元素就会不见 块状元素   address - 地址 blockquote - 块引用 center - 举中对齐块 dir - 目录列表 div - 常用块级容易,也是CSS layout的主要标签 dl - 定义列表 fieldse

块级标签&amp;内联标签

标签分为两类: 块级标签: 特点:独占一行 如下图,没有加标签的显示在同一行,没有换行,加了<h1>标签的换行了,显示的内容独占了一行 内联标签: 特点:按内容占位置 原文地址:https://www.cnblogs.com/Mr-chenshuai/p/9961300.html

块级元素和内联元素的区别与转换

块级元素(block): address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li 总是独占一行. 宽度(width).高度(height).内边距(padding)和外边距(margin)都可控制; 内联元素(i

CSS 中的内联元素、块级元素、display的各个属性的特点

CSS的内联元素和块级元素 块级元素<h1>-<h6>.p.dt是不可以内联块级元素的 1.block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通常被现实为独立的一块,会单独换一行:inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满. 2.大体来说HTML元素各有其自身的布局级别(block元素还是inline元

CSS 中的内联元素、块级元素以及display的各个属性的特点

CSS的内联元素和块级元素 块级元素<h1>-<h6>.p.dt是不可以内联块级元素的 1.block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通常被现实为独立的一块,会单独换一行:inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满. 2.大体来说HTML元素各有其自身的布局级别(block元素还是inline元

CSS块级元素、内联元素概念

CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>,发现里面提到的文档流概念让我很敏感. 可恶的是书中并没有解释文档流是什么东西,或许作者觉得这个太简单了以至于不值一提.但我觉得,这个概念实在太重要了.理解了它,一堆CSS布局的理论都变得易于理解,并且体会到CSS这套设计的合理性所在. 文档流 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即