HTML笔记

1.WWW全称World Wide Web,中文译名“万维网”,采用超文本 (Hypertext) 方式工作。

网页浏览器(Web Browser) 是在客户端浏览Web服务端的应用程序,其主要作用是显示网页和解释脚本。

2. URL (Universal Resource Locator) 是“统一资源定位器”的英文缩写,URL就是Web地址,俗称“网址”。Internet上的每一个网页都具有一个唯一的名称标识,通常称之为URL地址。这种地址可以是本地磁盘,也可以是局域网上的某一台计算机,更多的是Internet上的站点。

3. URL的基本结构为: 通信协议://服务器名称[:通信端口编号]/文件夹1[/文件夹2···]/文件名

4. 超文本(HyperText)技术是一种把信息根据需要链接起来的信息管理技术。用户可以通过一个文本的链接指针打开另一个相关的文本。

5. Web标准不是某一种标准,而是一系列标准的集合。网页主要由3部分组成:结构(Structure)、表现(Presentation)和行为(Behavior)。对应的Web标准也分为3类:结构化标准语言主要包括XHTML和YL,人现标准语言主要为CSS,行为标准主要包括对象模型W3C DOM、ECMAScript等。

6. <标签 属性1="属性值1” 属性2="属性值2”···>受标签影响的内容</标签>

7. 元素指的是包含标签在内的整体,元素的内容是开始标签与结束标签之间的内容没有内容的HTML元素被称为空元素,空元素是在开始标签中关闭的。

8. 块级元素可以包含行级元素或其他块级元素,但行级元素却不能包含块级元素,它只能包含其它的行级元素。

有几个特殊的块级元素只能包含行级元素,不能再包含块级元素,这几个特殊的标签是: <h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<p>、<dt>。

9. <meta>标签是元信息标签,该标签可重复出现在头部标签中,用来指明本页的作者制作工具、所包含的关键字,以及其他一些描述网页的信息。

语法格式为:<metaname="参数”content="参数值">

name属性主要用于描述网页摘要信息,与之对应的属性值为content,content中的内容主要是便于搜索引擎查找信息和分类信息用的。

name属性主要有以下两个参数: keywords和description。

1. keywords(关键字):keywords用来告诉搜索引擎网页使用的关键字。

2.description(网站内容描述):description用来告诉搜索引擎网站主要的内容

10. link>标签是关联标签,用于定义当前文档与Web集合中其他文档的关系,提供链接该文档的一个路径。

<link rel="stylesheet” href="外部样式表文件名.css”type="text/css">

11. <script>标签是脚本标签,用于为HTML文档定义客户端脚本信息。此标签可在文档中包含一段客户端脚本程序。此标签可以位于文档中任何位置,但常位于<head>标签内以便于维护。

格式如下: <scripttype="text/javascript” src="脚本文件.js"></script>

文本元素

  1. <h#align-"leftlcenterlright">标题文字</h#> (#1-6)

  1. Time标签:定义公历时间或日期,不会在浏览器中呈现任何效果

Datetime:规定日期时间

Pubdate:发布日期

  1. mark标签:高亮引起注意

  1. cite标签:创建引用(斜体效果)

基本排版元素

  1. p 段落标签

  1. <br /> 换行

  1. <pre>标签可定义预格式化的文本。被包围在<pre>标签中的文本通常会保留空格和换行符,而文本也会呈现为等宽字体。<pre>标签的一个常见应用就是用来表示计算机的源代码。

  1. <blockquote>标签可定义一个块引用。<blockquote>与</blockquote>之间的所有文本都会从常规文本中分离出来,经常会在左、右两边进行缩进,而且有时会使用斜体。

  1. <hr /> 水平线可以作为段落与段落之间的分割线,添加一行水平线、

列表元素

1.无序列表: <ul> 格式如下:

<ul>

<li>

<li>

</ul>

2.定义列表:

<d1>

<dt>..·第一个标题项···</dt>

<dd>···对第一个标题项的解释文字·.·</dd>

<dt>·.··第二个标题项···</dt>

<dd>···对第二个标题项的解释文字···</dd>

</ dl>

3.有序列表:<ol>

<ol>

<li>

<li>

</ol>

4.嵌套列表例:

行内元素与块级元素

  1. <div>标签是一个块级元素,用来为HTML文档中大块内容提供结构和背景,且在行与行之间不留空格。(段落<p>行与行之间留有空格)

  1. <span>标签用来定义文档中一行的一部分,是行级元素。行级元素没有固定的宽度根据

<span>元素的内容决定。

超链接元素

  1. 超链接定义:超链接 (hyperlink)是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置。

  1. 分类:页面超链接、锚点超链接、电子邮件超接链

  1. 区分绝对路径、相对路径

  1. 绝对路径是指文件在硬盘上真正存在的位置;

  1. 相对路径:相对于自己的目标文件位置;

举例说明:比如C盘有个文件夹叫ABC,文件夹下有两个文件file1和file2。如果让文件file1说出文件file2的位置(也就是路径),那么它有两种表示方法:

第一种:C:\ABC\file2 这就是绝对路径,指明file2文件在C盘ABC文件下,从最大的目录C盘开始表示出来。

第二种:file2 这就是相对路径,因为file1文件和file2文件都在C:\ABC下,所以它们的路径前面"C:\ABC"都是一样,就不用表示出来了。

  1. <ahref="url(你想要链接到的网址)”title="指向链接显示的文字” target="窗口名称>热点文本(对外展示的文字)</a>

(1).target属性设定链接被单击后所要开始窗口的方式,有以下4种方式。

_blank:在新窗口中打开被链接文档。

_self:默认在相同的框架中打开被链接文档。

_parent:在父框架集中打开被链接文档。

_top:在整个窗口中打开被链接文档。

  1. 书签就是用<a>标签对网页元素作一个记号,其功能类似于用于固定船的锚,所以书签也称锚记或锚点。点击对外展示的文字即可到达标记点。格式如下:

<a href=“#记号名”>热点文本 </a>

<a name=“记号名”>目标文本附近的内容 </a>

图像元素

  1. 网页图像格式:GIF、JPEG和PNG

GIF是LZW压缩,通过压缩相同颜色的色块来减少图像大小,压缩效率高,不造成损失,但只能处理256色

JPEG一般对全彩类的图像进行压缩,用来保存超过256色的图像格式,会造成一些图像数据损失

PNG使用图像文件以最小的方式压缩却又不造成图像失真的技术。

  1. 用<img>标签在网页中添加图像,格式如下:

<img src="图像文件名(图像来源)” alt="替代文字(当图像加载不出来时显示的文字)”title="鼠标款停提示文字” width="图像宽度height="图像高度”border="边框宽度”hspace="水平空白”vspace="乘直空白"align="环绕方式|对齐方式”/>

添加视频时:<videosrc="” >

添加音频时:<audiosrc="” >

1. <article>标签用来定义独立的内容,该标签定义的内容可独立于页面中其他内容

其中<header>为定义页眉,<footer>为页脚,<section>用来定义文档中的节

2.<aside>标签用来表示当前页面或新闻的附属信息部分,<nav>为导航内容,可以在里面用超链接进行内容跳转。

3. 分组元素用于对页面中的内容进行分组,分为figcaptipn元素和hgroup元素

figure元素用于定义独立的流内容(图像、图表、照片、代码等等),一般指一个单独的单元。figcaption元素用于为figure元素组添加标题

hgroup元素用于将多个标题(主标题和副标题或者子标题) 组成一个标题组,通常它与h1~h6元素组合使用。通常,将hgroup元素放在header元素中。

页面交互元素

1.details元素用于描述文档或文档某个部分的细节。summary元素经常与details元素配合使用,作为details元素的第一个子元素,用于为details定义标题。标题是可见的,当用户点击标题时,会显示或隐藏details中的其他内容。

progress进度条表示:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值