HTML与CSS初体验

HTML

超级文本标记语言(HyperText Makeup Language)

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

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

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

CSS

级联样式表(Cascading Style Sheets)

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

属性:

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

<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>:整块引用且换行


块元素(<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:


<!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           顶层窗口(框架中)


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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值