DAY_02 HTML小白学习笔记

来源：互联网发布：程序员经常去的论坛编辑：程序博客网时间：2024/06/05 23:02

一、HTML链接

1.创建超级链接

<a href="/index.html">本文本</a> ：链接本网站中的一个页面
<a href="http://www.microsoft.com/">本文本</a> ：链接万维网（WWW）上的页面

WWW是环球信息网的缩写，（亦作“Web”、“WWW”、“'W3'”，英文全称为“World Wide Web”），中文名字为“万维网”，"环球网"等，常简称为Web。
分为Web客户端和Web服务器程序。 WWW可以让Web客户端（常用浏览器）访问浏览Web服务器上的页面。
是一个由许多互相链接的超文本组成的系统，通过互联网访问。

2.将图像作为链接

<a href="/example/html/lastpage.html"> <img border="0" src="/i/eg_buttonnext.gif" /> </a>

<a> 标签的href属性：规定链接的目标（指定超链接目标的URL）
<img> 标签的 src 属性：是必需的。它的值是图像文件的 URL，也就是引用该图像的文件的的绝对路径或相对路径。
<img> 标签的 border 属性：规定图像周围边框的宽度（已经不推荐使用，用CSS来代替。CSS 语法：<img style="border:5px solid black">）
<a> 标签中必须提供 href 属性或 name 属性。
URL：统一资源定位符，是互联网上标准资源的地址。

3.HTML链接语法

·有两种使用 <a> 标签的方式：

通过使用 href 属性 - 创建指向另一个文档的链接
通过使用 name 属性 - 创建文档内的书签 <a name="label">锚（显示在页面上的文本）</a>

使用 Target 属性，你可以定义被链接的文档在何处显示。
把链接的 target 属性设置为target= "_blank"，该链接会在新窗口中打开。
target="_top"，跳出框架（页面变换）。
在 HTML 文档中对锚进行命名（创建一个书签）： <a name="tips">基本的注意事项 - 有用的提示</a>
在同一个文档中创建指向该锚的链接： <a href="#tips">有用的提示</a>
（将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个命名锚了。）

<a href="#C4">查看 Chapter 4。</a>与<a name="C4">Chapter 4</a>配套使用，实现链接到同一页面不同位置

二、HTML图像

<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。
浏览器将图像显示在文档中图像标签出现的地方。
alt 属性用来为图像定义一串预备的可替换的文本。（值是用户定义的）
eg: <img src="boat.gif" alt="Big Boat">
在浏览器无法载入图像时，浏览器将显示这个替代性的文本而不是图像。

用图像来做背景：
<body background="/i/eg_background.jpg"></body>如果图像小于页面，图像会进行重复。
通过改变 img 标签的 "height" 和 "width" 属性的值，放大或缩小图像。

对齐方式：<img src="/i/eg_cute.gif" align="bottom">
align="middle" align="top"（bottom 对齐方式是默认的对齐方式）
align ="left"图像将浮动到文本的左侧。
align ="right"图像将浮动到文本的右侧。

<map>标签：定义图像地图。（指带有可点击区域的图像）
eg: <map name="planetmap" id="planetmap">
<area>标签：定义图像地图中的可点击区域。（area 元素永远嵌套在 map 元素内部。）

eg : <area shape="circle" coords="180,139,14" href ="/example/html/venus.html" target ="_blank" alt="Venus" />

(coords 属性与 shape 属性配合，可以规定 object 或 img 元素中链接的尺寸、形状和位置)

三、HTML表格

每个表格由< table> 标签开始。每个表格行由 <tr> 标签开始。每个表格数据由< td >标签开始。

<h4>两行三列：</h4>

<table border="1">

 <tr>   <td>100</td>   <td>200</td>   <td>300</td></tr>

 <tr>   <td>400</td>   <td>500</td>   <td>600</td> </tr>

 </table>

*border属性不写，默认无边框

表格的表头使用 <th> 标签进行定义。大多数浏览器会把表头显示为粗体居中的文本：

eg: <tr> <th>Heading</th> <th>Another Heading</th> </tr>

在一些浏览器中，没有内容的表格单元显示得不太好。
在空单元格中添加一个空格占位符，就可以将边框显示出来。

no-breaking 空格即 eg:<td> </td>

<table>元素中：
<caption>我的标题</caption>：带标题的表格
<th colspan="2">电话</th>：横跨两列的单元格
<th rowspan="2">电话</th>：横跨两行的单元格
<table border="1" cellpadding="10"></table>：设置单元格边距
<table border="1" cellspacing="10"></table>：设置单元格间距
<table border="1" bgcolor="red"></table>：设置背景颜色
<table border="1" background="/i/eg_bg_07.gif"></table>：设置背景图像
<td bgcolor="red">First</td>：设置单元格背景颜色
<td background="/i/eg_bg_07.gif"> Second</td>：设置单元格背景图像

使用align属性：排列单元格内容<th align="left">总计</th>
<th align="right">$1001.50</th> 左、右对齐。
center：居中对齐
框架frame属性：控制围绕表格的边框
<table frame="box"></table>：全边框
frame="above"：上边 frame="below"：下边
frame="hsides"：上下边 frame="vsides"：左右边

<col> 标签为表格中一个或多个列定义属性值。
只能在 table 或 colgroup 元素中使用 <col> 标签。
为表格中的三个列规定了不同的对齐方式

<table border="1">

<col align="left" />

<col align="left" />

<col align="right" />

</table>

四、HTML列表

<ul></ul>：无序列表每个列表项始于 <li>：<li></li>
<ol></ol>：有序列表 <ol start="50">序号从50开始
自定义列表：用于一问一答或解释说明等
<dl></dl>：自定义列表用来定义一个列表
<dt></dt>：自定义列表用来定义项目
<dd></dd>：自定义列表用来定义对项目的描述

<ul>属性type="disc"：实心圆 type="circle"：空心圆 type="square"：方块儿
<ol>属性type默认为：数字（由1开始） type="A" ：大写字母序号 type="a"：小写字母序号
type="I"：大写罗马数字表 type="i"：小写罗马数字表

·无序嵌套列表：实心圆->空心圆->方块儿

五、<div>和<span>标签

大多数 HTML 元素被定义为块级元素或内联元素。

1.“块级元素”译为 block level element，块级元素在浏览器显示时，通常会以新行来开始（和结束）。

eg: <h1>, <p>, <ul>, <table>

2.“内联元素”译为 inline element。内联元素在显示时通常不会以新行开始。

eg: <b>, <td>, <a>, <img>

①<div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。由于它属于块级元素，浏览器会在其前后显示折行。
与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
②<span> 元素是内联元素（行内元素），可用作文本的容器。与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

六、HTML类

对 HTML 进行分类（设置类），使我们能够为元素的类定义 CSS 样式。

（为相同的类设置相同的样式，或者为不同的类设置不同的样式）

类（class）与ID（id）的区别：
class：在同一个html网页页面中可无数次调用相同的class类。（可为多个同名标签设置相同样式css）
id：在页面内只能出现一次。

0 0