`

从头再学html5

 
阅读更多

一 图片相关标签
Img标签和src属性: 在HTML里面,图像是由<img>标签定义的。<img>是空标签,意思是说,它只拥有属性,而没有结束标签。想要在页面上显示一个图像,需要使用src属性。“src”表示“源”的意思。“src”属性的值是所要显示图像的URL。
插入图像的语法:

URL指向图像存储的地址。网站“www.w3schools.com”子目录“images”中的图像“boat.gif”的URL如下: “http://www.w3schools.com/images/boat.gif”。当浏览器在文档中遇到img标签时,就放置一个图像。如果把img标签放在两个段落之间,就会先显示一个段落,然后是这个图像,最后是另外一个段落。

alt属性: alt属性用来给图像显示一个“交互文本”。alt属性的值是由用户定义的。


“alt”属性在浏览器装载图像失败的时候告诉用户所丢失的信息,此时,浏览器显示这个“交互文本”来代替图像。给页面上的图像都加上alt属性是一个好习惯,它有助于更好地显示信息,而且,对纯文本浏览器很有用。
基本注意点——有用的技巧: 如果一个HTML文档包含10个图像,那么为了正确显示这个页面,需要加载11个文件。加载图像是需要时间的,所以请谨慎使用图像。

看个例子吧:


显示如下:

图片的大小事可以自己设定的,一像素为单位,如果不设置大小,则会铺满屏幕。图片地址可以是绝对地址或者相对地址。

二 超链相关标签:

锚标签和href属性:
HTML使用锚标签(<a>)来创建一个连接到其他文件的链接。锚可以指向网络上的任何资源:HTML页面,图像,声音,影片等等。

创建一个锚的语法:

锚可以指向网络上的任何资源:HTML页面,图像,声音,影片等等。标签<a>被用来创建一个链接指向的锚,href属性用来指定连接到的地址,在锚的起始标签<a>和结束标签</a>中间的部分将被显示为超级链接。


这个连接到百度的主页。

target属性:
使用target属性,你可以定义从什么地方打开链接地址。下面这段代码打开一个新的浏览器窗口来打开链接:

锚标签和name属性name属性用来创建一个命名的锚。使用命名锚以后,可以让链接直接跳转到一个页面的某一章节,而不用用户打开那一页,再从上到下慢慢找。下面是命名锚的语法:


你可以为锚随意指定名字,只要你愿意。下面这行代码定义了一个命名锚并指向了一个网页:

基本注意点——有用的技巧:
尽量在子目录路径后面加一个左斜杠。假如你像下面这样写:href="http://www.w3schools.com/html",将会产生向服务器产生两个HTTP请求,因为服务器会在后面追加一个左斜杠,产生一个新的请求,就像这样:href="http://www.w3schools.com/html/"。命名锚通常用来在大型文档的开头创建章节表。这个页面的每个章节被加上一个命名锚,到这些锚的链接被放在页面的顶端。如果浏览器无法找到指定的命名锚,它将转到这个页面的顶部,而不显示任何错误提示。

现在来看个完整的示例吧:

图片如下:


暂时就这么多了,多试试自己写的。

分享到:
评论

相关推荐

    从头学习HTML的宝典笔记

    5. **标题层级**:使用`&lt;h1&gt;`至`&lt;h6&gt;`定义不同级别的标题,`&lt;h1&gt;`是最大标题,`&lt;h6&gt;`是最小标题。 6. **段落与换行**:`&lt;p&gt;`标签用于创建段落,而` `标签则用于在不开始新段落的情况下强制换行。 7. **HTML注释...

    html:从头开始学习html

    12. HTML5新特性:HTML5引入了新的元素,如`&lt;header&gt;`、`&lt;footer&gt;`、`&lt;section&gt;`、`&lt;article&gt;`,以更好地表达网页结构;`&lt;canvas&gt;`和`&lt;svg&gt;`支持图形绘制和矢量图;`&lt;audio&gt;`和`&lt;video&gt;`支持多媒体内容。 在学习...

    从头开始学习Python编程语言课程100节课44小时视频代码项目和聊天组前端后端基础知识AI测试.zip

    【标题】"从头开始学习Python编程语言课程100节课44小时视频代码项目和聊天组前端后端基础知识AI测试.zip" 提供了一个全面的Python学习资源,涵盖了从入门到进阶的完整过程,共计100节课,时长44小时。这表明课程...

    技术基础:从头开始学习 Dojo

    例如,要加载 Dojo 1.5,可以在 HTML 页面中插入如下代码: ```html &lt;script src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js"&gt;&lt;/script&gt; ``` 此外,为了确保在 CDN 失效时仍能正常运行,可以...

    从头开始 系统化的 学习如何写Python爬虫。 Python版本 3.6 .zip

    在这个从头开始的学习过程中,我们将系统化地探索如何利用Python 3.6构建高效的网络爬虫,以获取和处理互联网上的数据。 首先,你需要了解Python的基础知识,包括变量、数据类型(如字符串、列表、元组、字典)、...

    Python-从头开始系统化的学习如何写Python爬虫

    通过结合`requests`库,你可以先获取网页内容,再使用BeautifulSoup解析其中的数据。 对于更复杂的爬虫项目,Scrapy框架是不二之选。Scrapy是一个强大的爬虫框架,它提供了一整套解决方案,包括请求调度、中间件、...

    SheLearnsHTML:她从头开始学习使用HTMl,CSS,Javascript

    《她从头开始学习HTML,CSS,JavaScript》 在当今数字化的世界中,掌握网页开发的基础技能,如HTML、CSS和JavaScript,对个人的职业发展至关重要。本文将深入探讨这些核心技术,帮助初学者理解它们的重要性,以及...

    TheAdventuresOfSC:从头开始制作HTML5游戏

    《The Adventures Of SC:从头开始制作HTML5游戏》是一份深入浅出的教程,旨在引导初学者和有经验的开发者逐步构建一个完整的HTML5游戏。HTML5是现代网页开发的关键技术之一,它极大地扩展了网页的功能性,尤其是...

    gtcoding:从头开始学习编码

    5. **版本控制**:学习使用Git进行版本控制,理解分支和合并的概念,这对于协作开发至关重要。 6. **项目实践**:通过实际的网页设计项目,将理论知识应用于实践中,提高问题解决和调试技能。 7. **代码规范**:理解...

    32套html5响应式模板

    HTML5响应式模板是现代网页设计中的重要工具,它们能够自动适应不同的设备屏幕尺寸,提供一致的用户体验,无论用户是在桌面电脑、平板还是手机上浏览。以下是对这些模板及其相关技术的详细解释: 1. **HTML5**:...

    Sinau-Web:回购从头开始学习网络

    学习网络回购从头开始学习网络

    网页模板——基于HTML5实现的坦克大战网页小游戏源码.zip

    【标题】:“网页模板——基于HTML5实现的坦克大战网页小游戏源码.zip”指的是一个包含HTML5技术实现的坦克大战游戏的源代码文件。这个压缩包可能是为了教学、学习或娱乐目的而创建的,它提供了从头构建此类游戏的...

    webpack-5-fundamentals-course:这是我的《从头开始学习Webpack 5》课程的项目仓库

    在《从头开始学习Webpack 5》课程中,我们将深入理解Webpack的工作原理和核心概念,以便更好地优化前端项目的构建流程。Webpack 5 的发布引入了一些重要的更新和改进,包括对内存和性能的优化,以及对新特性的支持。...

    绝对很好的jsp学习资料,从头看到尾,就可以做web开发,我们的课件

    5. **MVC(Model-View-Controller)模式**:解释在JSP开发中如何应用MVC设计模式,以实现良好的代码结构和可维护性。 6. **JSP与JavaBean**:演示如何使用JavaBean作为业务逻辑组件,以及在JSP中如何调用和管理Bean...

    h5页面模版源码,很不多的例子

    这个标题暗示了我们讨论的主题是关于HTML5页面模板的源代码。HTML5是现代网页开发的基石,它提供了丰富的功能和元素,使得开发者能够创建出更加交互式、动态且响应式的网页。"很不错的例子"意味着这些源码不仅可用,...

    python-book:从头开始学习 Python

    从头开始学习 Python该存储库是一个源代码存储库,用于在线学习网站进行学习。必要的东西要从源代码生成 HTML 页面,您需要以下内容: Python3建造执行以下命令生成 HTML。 $ pip install -r requirements.txt$ ...

    非洲儿童教育类网站模板是一款html5模板,适合儿童学习教育网站模板下载 .rar

    【标题】中的“非洲儿童教育类网站模板”指的是一个专门设计用于儿童教育的网页模板,它基于HTML5技术,能够为创建一个互动性、趣味性强的在线教育平台提供基础。HTML5是现代网页开发的标准语言,它包含了丰富的媒体...

    Teach Yourself HTML5 Mobile Application Development in 24 Hours

    ### 教你自己在24小时内开发HTML5移动应用 #### I. 构建网页与应用程序:开放网络标准 - **改善移动Web应用开发**:HTML5作为一种新兴的标准,提供了诸多新特性来提升移动Web应用的性能和用户体验。本书将介绍如何...

    基于JQuery和html5的拼图游戏类库

    【标题】"基于JQuery和html5的拼图游戏类库"揭示了这个项目的核心技术栈,即JavaScript的两个重要库——JQuery和HTML5的新特性。JQuery是广泛使用的JavaScript库,它简化了DOM操作、事件处理和AJAX交互等任务。而...

Global site tag (gtag.js) - Google Analytics