HTML&CSS设计与构建网络学习笔记（一）

 

 

第一章 初识HTML

HTML全称HyperText Markup Language（超文本标记语言），HTML页面是文本文档，使用标签为包含在其中的内容提供结构信息。

标签通常成对出现，如<p></p>表示段落的开始与结束。其中起始标签可以附带特性，如<p lang="en-us">In Engnish</p>,lang特性用来说明元素中使用的语言。

第二章 文本

标题与段落

<h1>.. </h1>

...

<h6></h6>一共6级标题

<p>..</p>表示段落

粗体、斜体、强调

<b>..</b>文字显示为粗体

<i>..</i>文字显示为斜体

^..上标

_..下标

当浏览器遇到两个或者两个以上的空格&换行时，只会将其看做一个空格，这一特性称为白色空间折叠

<br />换行符

<hr />插入水平线

<strong>..</strong>强调作用（阅读时会加强语气，浏览器中显示加粗）

<em>..</em>强调作用（细微改变语句的含义，浏览器中显示为斜体）

结构化标记与语义化标记

<blockquote cite="http://www.edu*****.cn"> <p>...</p> </blockquote>用于标记整段文字的引用

<q>..</q>用于标记较短的引用

<abbr title="Professor">Prof</abbr>缩写词，并用title特性指定相应词汇的完整形式

<cite>..</cite>表示引用的来源，浏览器中内容显示为斜体

<dfn>..</dfn>表示新术语的定义，浏览器中内容显示为斜体

<address>..</address>浏览器中内容显示为斜体

<ins>..</ins>显示已经插入到文档的内容，并通常带有下划线           <del>..</del>显示已经从文档中删除的内容，并通常带有删除线

<s>..</s>表示不准确或者不相关却不应当予以删除的内容，通常带有从内容中穿过的线条

第三章 列表

有序列表

<ol>

    <li>...</li>

    <li>...</li>

</ol>

无序列表

<ul>

    <li>...</li>

    <li>...</li>

</ul>

自定义列表

<dl>

    <dt>...</dt>用来包含被定义的术语

    <dd>...</dd>用来包含定义

    <dt>...</dt>

    <dt>...</dt>

    <dd>...</dd>

</dl>

列表可以嵌套使用

第四章 链接

<a href="http://www.baidu.com">链接文本</a>

1. 指向其它网站的链接
   href特性的值必须是另一个网站的完整web地址，即绝对URL
2. 指向同一网站的其他页面的链接
   href特性的值，无需指定域名，可采用相对URL
3. EMAIL链接
   <a href="mailto:yyw@163.com">Email John</a>
   单击链接会启动网站用户计算机上的email程序，并自动添加链接中指定的地址为收件人
4. 在新窗口中打开链接
   <a href="http://www.baidu.com" target="_blank">链接文本</a>
5. 链接到当前页面的某个特定位置
   使用id特性值来标记位置，该特性可以应用在所有HTML元素中，在同一个页面中不允许出现两个相同的id值，使用时href值以#开头
6. 链接到其他页面的某个特定位置
   <a href="http://www.baidu.com/#bottom"

<h1 id="top">Film-Making Terms</h1>
<a href="#arc_shot">Arc Shot</a><br />
<h2 id="arc_shot">Arc Shot</h2>
<p><a href="top">Top</a></p>

第五章 图像

<figure>
<img src="images/otters.jpg" alt="Photograph of two sea otters floating in water" title="The otters" width="60" height="100" align="top">
<br />
<figcaption>Sea otters hold hands when they sleep.</figcaption>给图像添加说明
</figure>
只要图像说明相同，就可以在<figure>中添加多个图像
src表示图片的存储位置
alt对图像进行文本说明，图像无法查看时展示这段说明描述图像
title提供图像的附加说明，光标悬停在图像上时以提示的方式显示该内容
width、height指定图像的大小
align的特性值 水平方向 left\right  垂直方向 top:将周围文本的第一行与图像顶端对齐 middle:将周围文本的第一行与图像中间对齐  bottom将周围文本的第一行与图像底端对齐

第六章 表格

<table width="400" cellpadding="10" cellspacing="5"> 表格宽度、单元格内边距、单元格之间的间隔
  <thead>表格的标题
    <tr>表示表格的行的开始
      <th width="150">A</th>表示行或者列的标题  指定个别单元格的宽度
      <th>B</th>
    </tr>
  </thead>
  <tbody>表格的主体部分
    <tr>
     <th>1</th>
     <td width="150">100</td>单元格内容
    </tr>
  </tbody>
  <tfoot>表格的脚注
...........
  </tfoot>
</table>
当单元格跨2列时，使用 <td colspan="2">100</td>；当单元格跨3行时，使用 <td rowspan="3">100</td>
border特性用于<table>和<td>元素，用于指定边框宽度；bgcolor特性用来为整个表格或单独的单元格指定背景颜色
应该使用CSS来控制表格的外观