DAY_02 HTML小白学习笔记
2017-04-17 03:08
465 查看
一、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 >标签开始。<
4000
br />
<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:在页面内只能出现一次。
相关文章推荐
- DAY_03 HTML小白学习笔记
- JavaWeb自学之html学习笔记 Day-2
- 编程小白的第一本 python 入门书 学习笔记02 第三章 变量与字符串
- JavaWeb自学之html学习笔记 Day-1
- Html之JavaScript学习笔记02
- 前端学习笔记,HTML常用标签02
- (X)HTML学习笔记02_基本(X)HTML的格式化
- 前端开发学习笔记02----HTML基础
- Spring4.x 学习笔记day 02
- 《30天自制操作系统》02_day_学习笔记
- 【JAVAWEB学习笔记】02_HTML&CSS
- 数据结构习题学习笔记(The Fourth Day)
- CSS学习笔记-附加篇( CSS+JS实现的选项卡效果(html组件))
- asp.net 学习笔记[02] 便捷数据邦定
- HTML学习笔记:链接标记
- HtmlTextWriter学习笔记
- html学习笔记2
- HTML学习笔记:图像标记
- HTML基础学习笔记
- HTML学习笔记:表单标记