HTML5基础（三）零基础入门 备份

最新推荐文章于 2022-10-24 17:44:56 发布
最新推荐文章于 2022-10-24 17:44:56 发布
阅读量892 收藏 4
点赞数
分类专栏： h5 零基础学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/flyToSky_L/article/details/70284311
版权

上一篇我的笔记记录的是：文本元素 ： http://blog.csdn.net/flytosky_l/article/details/70225280

这里，接着做HTML5的基础知识-超链接，(新建一个文件名为index3.html，在文件目录 code下)

超链接<a>,属于文本元素，有一些私有属性（或称之为局部属性），不理解的可以略过，相对应的还有通用属性（或称之为全局属性），这个我看到时是似懂非懂，暂时略过

超链接的属性：

属性名称：href ,说明： 指定<a>元素所指资源的URL

属性名称：hreflang ,说明：指向资源所使用的语言

属性名称：media ,说明：说明所连接的资源属于哪种设备

属性名称：rel ,说明：说明文档与所链接资源的关系类型

属性名称：target ,说明：指定用以打开链接资源的浏览器环境

属性名称：type ,说明：说明所链接资源的MIME类型（比如 text/heml）

以上有不理解的就暂时略过，这个我看资料的一贯偷懒方法，等用到的时候，发现不明白再去查阅资料。

以上属性，较为常用 href 和 target 。

href 属性 为必须属性 ，如果属性值是http://开头的URL，意味着跳转到指定的外部网站。

代码：

<a href="http://www.baidu.com">百度的链接</a>

界面：

target 属性 ，告诉浏览器希望将链接的资源显示在哪里。

属性名称  ： _blank   说明 ： 在新窗口或是标签中打开文档，相当于新建一个窗口

属性名称  ： _parent   说明 ：在父窗框组（frameset）中打开文档，基于框架页面的

属性名称  ： _self   说明 ：在当前窗口打开文档，默认的

属性名称  ： _blank   说明 ：在顶层窗口打开文档，基于框架页面的

代码：

<a href="http://www.haosou.com" target="_blank">好搜的链接</a>

界面如图：

点击百度链接，百度的网页显示在当前的窗口，点击好搜的链接，好搜的网页将显示在新的界面。

相对路径和绝对路径

相对路径

相对于当前文档，链接页面的所纸箱资源文档的路径。

条件：必须文件都在一个磁盘或是目录下，如果在同一目录下，直接属性值就是被链接文件名.后缀名。如果在同一主目录下，有多个子层目录，那就需要使用目录结构语法。

代码：（此时新建index.html 路径在code文件夹下，和index3.html同处一个文件夹）

<a href="./index.html">相对路径1 index.html</a>
<br>
<a href="index.html">相对路径2 index.html</a>

绝对路径

从file:///磁盘符开始的完整路径。代码：

<a href="/Users/zzcz/Documents/HTML/code/index.html">绝对路径 index.html</a>

目录结构语法：

文档在同一个目录：index.html 或是 ./index.html

文档在子目录： xxx/index.html

文档在子目录的下一级目录： xxx/xxx/index.html

文档在父目录： ../index.html

文档在父目录的下一级目录： ../../index.html
相对路径的代码示例：

新建文件夹命名为child在code文件夹下，新建index1.html界面在child文件夹

新建index2.html界面在code文件夹的父级目录下（和code在同一级文件夹），

目录结构：

index.html代码：

<!DOCTYPE>
<html lang="ch-zn">
<head>
	<meta charset="utf-8">
	<title>超链接</title>
</head>
<body>
超链接学习
<br>
这个是 index.html
<br>
我是在同级目录下
</body>
</html>

index1.html代码：

<!DOCTYPE>
<html lang="ch-zn">
<head>
	<meta charset="utf-8">
	<title>超链接</title>
</head>
<body>
超链接学习
<br>
这个是 index1.html
<br>
我是在code文件夹的子级目录下
</body>
</html>

index2.html代码：

<!DOCTYPE>
<html lang="ch-zn">
<head>
	<meta charset="utf-8">
	<title>超链接</title>
</head>
<body>
超链接学习
<br>
这个是 index2.html
<br>
我是在code文件夹的父级目录下
</body>
</html>

index3.html代码：

<!DOCTYPE>
<html lang="ch-zn">
<head>
	<meta charset="utf-8">
	<title>超链接</title>
</head>
<body>
超链接学习
<br>
<a href="http://www.baidu.com">百度的链接</a>
<br>
<a href="http://www.haosou.com" target="_blank">好搜的链接</a>
</body>
<br>
绝对路径 和 相对路径
<br>
<a href="/Users/zzcz/Documents/HTML/code/index.html">绝对路径 index.html</a>
<br>
<a href="./index.html">相对路径1 index.html</a>
<br>
<a href="index.html">相对路径2 index.html</a>
<br>
相对路径的代码示例：
<br>
<a href="index.html">指向同级目录的文件 index.html</a>
<br>
<a href="child/index1.html">指向子级目录的文件 index1.html</a>
<br>
<a href="../index2.html">指向父级目录的文件 index2.html</a>


</html>

运行index3.html，如图：

点击超链接文本标签，跳转到指定界面。

锚点学习

超链接也可以用来将同一个文档中的另一个元素移入视野，通过 id 或是 name 实现锚点定位。

链接代码：

<a href="#1">属性名称：href </a>

锚点代码：标记使用 id 或是 name

<a name="1">href</a>

<a id="3">media</a>
示例：先新建立一个命名为index4.html的文档，代码： 

<!DOCTYPE>
<html lang="ch-zn">
<head>
	<meta charset="utf-8">
	<title>锚点学习</title>
</head>
<body>
锚点学习
<br>
超链接的属性：
<a href="#1">属性名称：href </a> <a href="#2">属性名称：hreflang </a> <a href="#3">属性名称：media </a>
<a href="#4">属性名称：rel </a>
 

<a name="1">href</a>
<br>
属性名称：href ,说明： 指定<a>元素所指资源的URL<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a name="2">hreflang</a>
<br>
属性名称：hreflang ,说明：指向资源所使用的语言
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<a id="3">media</a>
<br>
属性名称：media ,说明：说明所连接的资源属于哪种设备
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a id="4">rel</a>
<br>
属性名称：rel ,说明：说明文档与所链接资源的关系类型
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

属性名称：target ,说明：指定用以打开链接资源的浏览器环境
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

属性名称：type ,说明：说明所链接资源的MIME类型（比如 text/heml）
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

</body>
</html>
上文中代码（换行符用于占位，显示效果），有锚点标记，可以快速跳到标记位置，没有标记的内容，通过滑动界面，也可以查看到。


flyToSky_L
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
2021-07-07课堂笔记
tubulvxing1的博客
07-07 293
7月7 一 HTML文档结构 lang='en’表示英语 lang=‘ch’ ASCII:美国信息交换标注码 Unicode:统一码，万国码 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Tyvkrwoc-1625661558569)(C:\Users\admin\AppData\Roaming\Typora\typora-user-images\image-20210707141712075.png)] 二 HTML标签分类 在HTML页面中，带有“< >”符号
HTML基础常识
Hassder的博客
10-21 648
HTML 初识HTML 什么是HTML ​ Hyper Text Markup Language(超文本标记语言) HTML发展史 HTML5的优势 世界知名浏览器厂商对HTML5的支持 ​ 如:微软,Google,苹果,Opera,Mozilla等 市场的需求 跨平台 W3C标准 W3C World Wide Web Consortium(万维网联盟) 成立于1994年,Web技术领域最权威和最具影响力的国际中立性技术标准机构 http://www.w3.org/ http://ww
HTML基础学习
qq_36159768的博客
04-29 348
DOCTYPE和lang以及字符集 <!DOCTYPE html> 表示当前页面采用html5版本来显示网页 <!DOCTYPE > 不是一个html标签，是一个文档类型声明标签 lang语言种类 <html lang="en">表示页面是英文页面 <html lang="zh-ch">表示页面是中文页面 字符集 <meta charset="UTF-8">表示规定HTML文档应该使用那种字符编码 charset常用的值有：GB2312（
四年开发经验教你使用html的lang属性使用
HWSss的博客
04-15 896
<!DOCTYPE html> <html lang="en"> </html> lang属性的主要的作用是用来表示网页字体是中文还是英文还是其他语言 lang=“en” 表示这个是该网页的字体是英文字体 在中文网页打开会自动弹出显示 是否将英文翻译成中文字体 lang = “ch-zn” 表示这个是中文字体 还有其他的字体 建议百度 ...
HTML基础教程笔记（HTML5与CSS3基础教程书）
weixin_55631415的博客
10-24 1404
7000字！！！HTML基础教程笔记（HTML5与CSS3基础教程书）
HTML5基础入门全套视频课程.rar
09-05
HTML5是构建Web内容的一种语言描述方式。...HTML5在从前HTML4.01的基础上进行了一定的改进，虽然技术人员在开发过程中可能不会将这些新技术投入应用，但是对于该种技术的新特性，网站开发技术人员是必须要有所了解的。
python零基础入门资料 python基础
最新发布
01-08
python零基础入门资料 python基础
HTML5零基础速成入门.rar
08-05
自己学习HTML5时整理的笔记。适合萌新们学习学习。
零基础自学PLC入门.pdf
11-16
零基础自学PLC入门.pdf
零基础入门学习Python_零基础入门学习Python_小甲鱼_
10-02
小甲鱼书籍，零基础入门学习Python，适合新手学习，B站有随书教学视频
html常用标签
m0_37514863的博客
08-10 347
一、概念：最基础的网页开发语言 1、Hyper Text Markup Language 超文本标记语言 2、超文本：用超链接的方法将不同空间的文字信息组织在一起的网状文本 3、标记语言：由标签构成的语言，标记语言不是编程语言 二、语法： 1.html文档后缀名 .html 或者 .htm 2.标签分类： 1）围堵标签：由开始和结束标签组成 例如 <html></html> 2）自闭标签：...
html5学习笔记（四）增强的表单
JOJOY的博客
11-26 2743
3.1 form元素 学习要点：form元素及其属性 form元素 用来定义一个表单，是建立表单的基础元素，（就类似定义表格的table） 表单的其他元素包含在form元素中，其主要子元素有：input/button/select...... form元素的属性 action：指定表单内容的发送到哪里（服务器地址或URL） method:表单数据发送至服务器的方法，默认为get。
html lang=zh-CN 中文标准写法与HTML标准定义
热门推荐
开软古剑楠
10-11 4万+
<html lang="zh-"> 中文标准写法与HTML标准定义 HTML5标准定义： lang作为HTML标签的全局属性，可以帮助定义元素的语言。该属性包含一个“语言标签”，格式为“识别语言的标签（BCP47）”中定义的格式。 <html lang="en"> 向搜索引擎表示该页面是html语言，并且语言为英文网站，其"lang"的意思就是“language”，...
网页头部的声明应该是用 lang="zh" 还是 lang="zh-cn"？
长云的博客
01-05 2万+
语言属性 为什么使用 lang="zh-cmn-Hans" 而不是我们通常写的 lang="zh-CN" 呢? 请参考知乎上的讨论: 网页头部的声明应该是用 lang="zh" 还是 lang="zh-cn"？ html lang="zh-Hans"> <!-- 简体中文 -->html lang="zh-cmn-Hans"> <!-- 繁体中文 -->html la
html标签中的lang属性
Yang'blog
03-13 2万+
写在html标签中的lang属性作用：声明当前页面的语言类型。如： <html lang='en'></html> //英文 <html lang='zh'></html> //中文 <html lang='ja'></html> //日文 <html lang='en-us'></html> //美式英文注意：lang属性中的语言代码不区分大小写 <html lang='en-us'></html
HTML标签lang lang - 指定语言种类
qq_44884287的博客
04-08 3466
HTML标签lang lang - 指定语言种类
HTML基础知识点
qq_44111805的博客
01-14 3593
1、HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言，而是一种标记语言 (markup language) HTML 使用标记标签来描述网页 2、HTML 标记标签通常被称为 HTML 标签 (HTML tag)。 HTML 标签是由尖括号包围的关键词 HTML 标签通常是成对出现的 标签对中的第一个标签是开始标签，第二个标签是结束标签 HTML存在自结束标签，即不写自结束的 / 3、HTML基
HTML5基础（五）零基础入门 （上）
flyToSky_L的博客
04-27 3665
上一篇笔记记录了元素分组，文章链接：http://blog.csdn.net/flytosky_l/article/details/70284311
 这里，接着做HTML5的基础知识-元素表格，(新建一个文件名为index.html，在文件目录 code下)
html5零基础入门教程pdf
04-29
对于零基础入门者来说，HTML5的学习可能会有些吃力，但是只要有一定的学习耐心和认真的态度，就可以逐渐掌握这一技能。 如果你想学习HTML5，入门教材是必不可少的。其中最重要的就是《HTML5零基础入门教程PDF》。这...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值