HTML学习笔记(二)

一:HTML 的 style 属性

style属性的作用:提供了一种改变所有 HTML 元素的样式的通用方法。

样式是 HTML 4 引入的,它是一种新的首选的改变HTML 元素样式的方式。通过 HTML 样式,能够通过使用style 属性直接将样式添加到 HTML 元素,或者间接地在独立的样式表中(CSS 文件)进行定义。

HTML 样式实例:

background-color 属性为元素定义了背景颜色;

font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸;

text-align 属性规定了元素中文本的水平对齐方式;

二:HTML CSS

通过使用 HTML4.0,所有的格式化代码均可移出 HTML 文档,然后移入一个独立的样式表。

如何使用样式

当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表:

外部样式表

当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。

内部样式表

当单个文件需要特别样式时,就可以使用内部样式表。你可以在 head 部分通过

内联样式

当特殊的样式需要应用到个别元素时,就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

三:HTML链接

HTML超链接(链接)超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手。

我们通过使用<a>标签在 HTML 中创建链接。有两种使用<a>标签的方式:

1,通过使用 href 属性 - 创建指向另一个文档的链接

2,通过使用 name 属性 - 创建文档内的书签

提示:"链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。

HTML 链接 - target 属性:使用 Target 属性,你可以定义被链接的文档在何处显示。

HTML 链接 - name 属性:name 属性规定锚(anchor)的名称。

您可以使用 name 属性创建 HTML 页面中的书签。 书签不会以任何特殊方式显示,它对读者是不可见的。

当使用命名锚(named anchors)时,我们可以创建直接跳至该命名锚(比如页面中某个小节)的链接,这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

四:HTML图像


图像标签(<img>)和源属性(Src)在 HTML 中,图像由<img>标签定义。<img>是空标签,意思是说,它只包含属性,并且没有闭合标签。要在页面上显示图像,你需要使用源属性(src)。src 指 "source"。源属性的值是图像的 URL 地址。

定义图像的语法是:<img src="url" alt="Big Boat">

URL指存储图像的位置。如果名为 "boat.gif" 的图像位于www.w3school.com.cn的 images 目录中,那么其URL为http://www.w3school.com.cn/images/boat.gif。替换文本属性(Alt)alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。Big Boat在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。此时,浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯,这样有助于更好的显示信息,并且对于那些使用纯文本浏览器的人来说是非常有用的.

五:HTML表格

表格由<table>标签来定义;边框用(border)属性。每个表格均有若干行(由<tr>  标签定义),每行被分割为若干单元格(由<td>标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

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

表格中的空单元格在一些浏览器中,没有内容的表格单元显示得不太好。如果某个单元格是空的(没有内容),浏览器可能无法显示出这个单元格的边框。为了避免这种情况,在空单元格中添加一个空格占位符 ,就可以将边框显示出来。

表格标题用<caption>

跨行在<th>中用(powspan)属性;跨列在<th>中用(clospan)属性;框架用(frame)属性;单元格边距(cell padding);单元格间距(cell spacing)

六:HTML列表HTML 支持有序、无序和定义列表

无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记,即type属性:disc、circle、square。

无序列表始于<ul>标签。每个列表项始于<li>。

有序列表

同样,有序列表也是一列项目,列表项目使用数字进行标记。

有序列表始于<ol>标签。每个列表项始于<li>标签。

定义列表

自定义列表不仅仅是一列项目,而是项目及其注释的组合。自定义列表以<dl>标签开始。每个自定义列表项以<dt>开始。每个自定义列表项的定义以<dd>开始。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,080评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,422评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,630评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,554评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,662评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,856评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,014评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,752评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,212评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,541评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,687评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,347评论 4 331
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,973评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,777评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,006评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,406评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,576评论 2 349

推荐阅读更多精彩内容

  • HTML引用 元素定义短的引用,浏览器通常会为 元素包围引号。 元素定义被引用的节,浏览器通常会对 元素进...
    做有趣的恶魔阅读 609评论 0 1
  • HTML学习笔记(二) 使用列表 使用表格 使用表单 添加多媒体 <a name="1">使用列表</a> ...
    寒桥阅读 685评论 0 1
  • 本系列适合作为HTML的复习文档。 本章为body标签下的各种内容,主要参考来源: 绿叶学习网 - HTML入门教...
    琉木_阅读 897评论 0 0
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,229评论 1 41
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,737评论 1 92