您的位置: 首页  >  文章  >  HTML与CSS初体验

HTML与CSS初体验

分类: 文章 • 2022-10-23 16:51:48

HTML

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

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

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

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

CSS

级联样式表（Cascading Style Sheets）

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

HTML与CSS初体验

属性：

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

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

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

<style type="text/css">  :  type属性指定使用的样式语言种类，此处是CSS。

书写方式：

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

引用：

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

HTML与CSS初体验

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

空元素：

<br>:插入换行 

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

列表：

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

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

<ul>
  <li>cellphone</li>

  <li>iPod</li>

</ul>

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

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

自定义列表：

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

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

图像：

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文件的开头（过渡版本）

<meta>  --说明内容的类型

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">  --在<head>中

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

严格版本: 

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

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

XHTML:

HTML与CSS初体验

<!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 id="copy">

</div>

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

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

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

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

<table>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</table>

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

单元格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           顶层窗口（框架中）


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

相关推荐