HTML与CSS初体验

最新推荐文章于 2025-04-11 14:42:04 发布

原创最新推荐文章于 2025-04-11 14:42:04 发布 · 335 阅读

0 ·

CC 4.0 BY-SA版权

HTML

超级文本标记语言（HyperText Makeup Language）

作用：告知浏览器网页的结构。

元素=开始标记+内容+结束标记

例如：<h1>肯德基快餐</h1> -- 这就是一个元素

CSS

级联样式表（Cascading Style Sheets）

作用：告知浏览器网页中的元素应该如何表现

属性：

用来指定元素的附加信息。

<img src="drinks.gif"> ： src属性指定img标记显示的图片文件名。

<a href="directions.html"> ： href属性告诉我们超文本链接的目的地。

书写方式：

<a href="directions.html"> Great Movies</a>

引用：

<q>:在文字流中出现； <blockquote>:整块引用且换行

块元素（<h1><h2><blockquote>）特立独行，内联元素（<q><a><em>）随波逐流。

空元素：

<br>:插入换行

<img>:插入图片（内联元素）

列表：

第一步：标记列表项目（<li></li>）

第二步：决定列表类型（有序 or 无序）（<ul></ul>--无序； <ol></ol>--有序）

<ul>
<li>cellphone</li>

</ul>

<li><ul><ol>--块元素

有序列表、无序列表、还有自定义列表

自定义列表：

<dl>
<dt>haha</dt>
<dd>laugh </dd>
<dt>hehe</dt>
<dd>lanshou</dd>
</dl>

输入实体的时候使用&，当需要在文章中用&的时候才用&来代替。

图像：

JPEG：

可在连续调次图像中获得最好效果；

可以用1600万种不同的颜色显示图像；

有损格式--文件缩小时会丢失部分图像信息；

不支持透明；

GIF：

适合纯色、线条、小段文字组成的图像；

用256种颜色显示图像；

无损格式--压缩文件不会丢失任何信息；

允许把背景颜色设为透明，图像背景可以穿透显示；

块元素：前后有换行和缩进--<h1><hn><p><blockquote>...

内联元素：在文字流中--<a><q><em><img>...

空元素：<img><br>

<img>:

src属性--其后可以加相对路径或者URL；

alt属性：要求一小段描述图像的文字；

width、height属性：宽度和高度；

文件类型定义：告诉浏览器文件的类型。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd"> --写在html文件的开头（过渡版本）

严格HTML4.01嵌套规则：<img>元素必须嵌套在<p>元素中，内联元素不能嵌套在<blockquote>中。

严格版本:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<div> -- 把页面分割成逻辑部分或者组；

text-align :设置文本样式（居中等）；只能作用于块元素，会影响各种内联元素，直接作用于内联元素，如<img>就没有作用了。

</div>

<span class="cd">Buddha Bar</span>

层叠就是浏览器决定采用哪种样式的方法。来自多个样式表的样式可以层叠向下排列在页面中，每个元素应用最具体的样式。

<TABLE>代表表格</TABLE>
<TR>代表表格中的一行</TR>
<TD>代表表格中的一列</TD>

'TR'与'TD'交成一个单元格
<TABLE>...</TABLE>之间有多少个<TR>，就有多少行
<TR>...</TR>之间有多少个<TD>，就有多少列

该例在浏览器中将显示如下：

单元格1	单元格2
单元格3	单元格4

<tr>和<td>有什么区别？

用于创建表格的3个基本元素是：

首标签<table>和尾标签</table>分别表示一个表格的开始与结束。这是不难理解的。
tr是“table row（表格行）”的缩写，用于表示一行的开始和结束。这也容易理解。
td是“table data（表格数据）”的缩写，用于表示行中各个单元格（cell）的开始和结束。这些都是容易理解的。

下面是对例1的详细解释。表格以<table>开始，其后的<tr>表明一个新行的开始，这一行中有两个单元格：<td>单元格1</td>和<td>单元格2</td>。该行以</tr>结束，然后紧接着以<tr>另起一行。该行也包含两个单元格，最后整个表格以</table>结束。

br 是break 的缩写换行的意思

<br/>和<br /> 没有任何区别

因为 html 4.0 他不是一个严谨型语言

语言有点错误对运行结果也不会有很大的影响

href是hypertext reference的缩写 href属性指定了链接的位置,这个位置可以用URI(统一资源标识符)表示.

rel是relationship的英文缩写. rel属性,描述了当前页面与href所指定文档的关系. stylesheet -- 定义一个外部加载的样式表

type -- 包含内容的类型,一般使用type="text/css"
示例
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

target=_blank表示用新窗口打开页面，一般出现在 <a> 标签中，target表示链接在哪里打开，可以为它赋已经存在的窗口名或者一些默认的值，

eg:<td><a href='http://<%#Eval("www.baidu.com")%>' target ="_blank"><%#Eval("百度")%></a></td>,常见的一些默认的值有：

_blank 新窗口
_self 自身
_parent 父窗口
_top 顶层窗口（框架中）

+= :将内容添加到已有变量。