美文网首页
html学习第二天

html学习第二天

作者: 罗_c857 | 来源:发表于2019-10-17 15:04 被阅读0次

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>                                    定义自定列表项的描述

    相关文章

    • html学习第二天

      HTML头部 - 定义了HTML文档的标题使用 标签定义HTML文档的标题 标签定义HTML文档的标题 -...

    • html学习第二天

      注释标签: 使用格式: 路径: 路径分为相对路径与绝对路径。 相对路径: 同一级...

    • 2021-08-16(发暗月的计划)

      第一天 HTML基础学习5课 第二天 div+css学习11课 WEB安全03 javascr...

    • 2018-07-21

      暑假学习第二天 HTML再巩固了盒模型 JS今日巩固了map(),filter(),reduce(),apply(...

    • 前端学习路线

      前端学习相关网站 1 、关于HTML的学习 对于HTML的学习分为HTML和HTML5,HTML 指的是 HTML...

    • HTML学习之路-第二天

      1.安装HTML编辑器-WebStorm (1)常用的前端开发工具:Dreamwaver,Sublime,WebS...

    • HTML第二天学习笔记

      1.CSS属性 可继承属性- 父标签的属性值会传递给子标签-一般是文字控制属性 不可继承属性- 父标签的属性值不能...

    • htm练习2 登陆页面

        学习html的第二天,学习了一下css样式表,通过使用css练习实现一个简单的登陆页面,刚开始学习很多地方都不...

    • [前端学习]html部分学习笔记,第二天

    • HTML学习:HTML基础

      一、HTML标题 HTML 标题(Heading)是通过 ~ 标签来定义的。 定义重要等级最高的标题。 定义...

    网友评论

        本文标题:html学习第二天

        本文链接:https://www.haomeiwen.com/subject/cxommctx.html