html学习第二天

HTML头部

<title> - 定义了HTML文档的标题

使用 <title> 标签定义HTML文档的标题 标签定义HTML文档的标题

<base> - 定义了所有链接的URL

使用 <base> 定义页面中所有链接默认的链接目标地址。

<meta> - 提供了HTML文档的meta标记

使用 <meta> 元素来描述HTML文档的描述,关键词,作者,字符集等


HTML <title> 元素

<title> 标签定义了不同文档的标题。

<title> 在 HTML/XHTML 文档中是必须的。

<title> 元素:

                1, 定义了浏览器工具栏的标题

                2, 当网页添加到收藏夹时,显示在收藏夹中的标题

                3, 显示在搜索引擎结果页面的标题


HTML <base> 元素

<base> 标签描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接:

<head>

<base href="http://www.runoob.com/images/" target="_blank">

</head>


HTML <link> 元素

<link> 标签定义了文档与外部资源之间的关系。

<link> 标签通常用于链接到样式表:

<head>

<link rel="stylesheet" type="text/css" href="mystyle.css">

</head>


HTML <style> 元素

<style> 标签定义了HTML文档的样式文件引用地址.

在<style> 元素中你也可以直接添加样式来渲染 HTML 文档:

<head>

<style 

type="text/css">body {background-color:yellow}p {color:blue}

</style>

</head>


HTML <meta> 元素

meta标签描述了一些基本的元数据。

<meta> 标签提供了元数据.元数据也不显示在页面上,但会被浏览器解析。

META 元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据。

元数据可以使用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他Web服务。

<meta> 一般放置于 <head> 区域

<meta> 标签- 使用实例

为搜索引擎定义关键词:

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

为网页定义描述内容:

<meta name="description" content="免费 Web & 编程 教程">

定义网页作者:

<meta name="author" content="Runoob">

每30秒钟刷新当前页面:

<meta http-equiv="refresh" content="30">

HTML <script> 元素

<script>标签用于加载脚本文件,如: JavaScript。

HTML head 元素

<head>                                    定义了文档的信息

<title>                                        定义了文档的标题

<base>                                    定义了页面链接标签的默认链接地址

<link>                                        定义了一个文档和外部资源之间的关系

<meta>                                        定义了HTML文档中的元数据

<script>                                        定义了客户端的脚本文件

<style>                                            定义了HTML文档的样式文件

HTML 样式- CSS

如何使用CSS

CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.

CSS 可以通过以下方式添加到HTML中:

                内联样式- 在HTML元素中使用"style" 属性

                内部样式表 -在HTML文档头部 区域使用 元素 来包含CSS

                外部引用 - 使用外部 CSS 文件

最好的方式是通过外部引用CSS文件.

内联样式

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

<p style="color:blue;margin-left:20px;">这是一个段落。</p>

内部样式表

当单个文件需要特别样式时,就可以使用内部样式表。你可以在<head> 部分通过 <style>标签定义内部样式表:

<head>

<style type="text/css">body {background-color:yellow;}p {color:blue;}

</style>

</head>

外部样式表

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

<head>

<link rel="stylesheet" type="text/css" href="mystyle.css">

</head>

已弃用的标签和属性

在HTML 4, 原来支持定义HTML元素样式的标签和属性已被弃用。这些标签将不支持新版本的HTML标签。

不建议使用的标签有: <font>, <center>, <strike>

不建议使用的属性: color 和 bgcolor.


HTML 图像

在 HTML 中,图像由<img> 标签定义。

<img> 是空标签,意思是说,它只包含属性,并且没有闭合标签。

要在页面上显示图像,你需要使用源属性(src)。src 指 "source"。源属性的值是图像的 URL 地址。

定义图像的语法是:

<img src="url" alt="some_text">

HTML 图像- Alt属性

alt 属性用来为图像定义一串预备的可替换的文本。

替换文本属性的值是用户定义的。

<img src="boat.gif" alt="Big Boat">

在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。此时,浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯,这样有助于更好的显示信息,并且对于那些使用纯文本浏览器的人来说是非常有用的。

HTML 图像- 设置图像的高度与宽度

height(高度) 与 width(宽度)属性用于设置图像的高度与宽度。

属性值默认单位为像素:

<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

提示: 指定图像的高度和宽度是一个很好的习惯。如果图像指定了高度宽度,页面加载时就会保留指定的尺寸。如果没有指定图片的大小,加载页面时有可能会破坏HTML页面的整体布局。

HTML 图像- title属性

title 属性用来为鼠标悬停图像上方提示的文本。

HTML 图像标签

<img>                                    定义图像

<map>                                    定义图像地图

<area>                                    定义图像地图中的可点击区域

HTML 表格

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

表格 <table>

表格的行 <tr></tr>

表格的列 <td></td>

表格的表头列 <th></th> (将tr中的td,替换为th,表示本行的表头)

【table的常用属性】

1、Border: 表格的边框属性;当使用border='1'设置边框时,会所有的td以及table上嵌套边框,当border加大时,只有table最外层框线加粗,td单元格上的框线不会变化。

2、Cellspacing:单元格与单元格之间的间隙。当cellspacomg=0时,单元格之间间隙为0,但边框线并没有合并(边框线还是两条线的宽度)

[合并边框的写法] "style='border-collapse:collapse;"使用边框合并后,无需设置Cellspacing

3、Cellpadding:段远隔内编剧,段远隔中文字与单元格边框之间的距离

4、Width/Height:表格的宽度高度

5、Align: 设置表格在父容其中的对齐方式;left/居左 center/居中 right/居右

【注意】當表格使用align屬性石,相當于使表格浮動,可能會導致表格后面的元素受表格浮動影像,导致布局错乱。

6、Bgcolor: 背景色

Background: 背景图片,后接相对路径。当背景图和背景色同时生效时,背景图覆盖背景色

Bordercolor: 边框颜色

[tr td 属性标签]

当表格属性与行列属性冲突时以行列属性为主

属性设置优先级:td>tr>table

① Width、Height:给单个的行、列,设置宽度高度;

② bgcolor:背景色

③ Align:设置单元格中的文字,在单元格中的水平对其方式 left/ceter/right

④ Valign:设置单元格中的文字,在单元格中的水平对其方式 top/centr/bottom

⑤ Nowrap:nowrap=nowrap 设置单元格文字行末不断行。

1、跨列:colspan,某单元格跨N列,则该单元格右边的N-1个td就不需要了。

2、跨行:rowspan,某段远隔跨N行,则该单元格下边的N-1个td就不需要了。

HTML 表格标签

<table>                                        定义表格

<th>                                            定义表格的表头

<tr>                                                定义表格的行

<td>                                            定义表格单元

<caption>                                    定义表格标题

<colgroup>                                    定义表格列的组

<col>                                                定义用于表格列的属性

<thead>                                        定义表格的页眉

<tbody>                                        定义表格的主体

<tfoot>                                        定义表格的页脚

HTML 列表

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

HTML无序列表

无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。

无序列表使用 <ul> 标签

<ul>

<li>Coffee</li>

<li>Milk</li>

</ul>

  • Coffee
  • Milk
  • HTML 有序列表

    同样,有序列表也是一列项目,列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

    列表项使用数字来标记。

    <ol>

    <li>Coffee</li>

    <li>Milk</li>

    </ol>

    1.Coffee

    2.Milk

    HTML 自定义列表

    自定义列表不仅仅是一列项目,而是项目及其注释的组合。

    自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

    <dl>

    <dt>Coffee</dt>

    <dd>- black hot drink</dd>

    <dt>Milk</dt>

    <dd>- white cold drink</dd>

    </dl>

    Coffee

    - black hot drink

    Milk

    - white cold drink

    HTML 列表标签

    <ol>                                定义有序列表

    <ul>                                  定义无序列表

    <li>                                    定义列表项

    <dl>                                    定义列表

    <dt>                                    自定义列表项目

    <dd>                                    定义自定列表项的描述

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

    推荐阅读更多精彩内容

    • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
      阿啊阿吖丁阅读 3,872评论 0 0
    • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
      米塔塔阅读 3,229评论 1 41
    • 浏览器与服务器的基本概念 浏览器(安装在电脑里面的一个软件) 作用: ①将网页内容渲染呈现给用户查看。 ②让用户通...
      云还灬阅读 1,104评论 0 0
    • HTML HTML简介 1、什么是HTML? HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言...
      小山居阅读 668评论 0 5
    • 一路风景,能使你停驻你又有多少 一路风景,能使你心动的也许没有 一路风景,能使你欢乐的恐怕没有 一路风景,能使你追...
      易聆阅读 139评论 0 0