文章目录
学完html基本以后,现在对html知识做以下总结:
以下内容来源于bilibiliup狂神说
在知识体系本身的角度,如有遗漏,错误,或者逻辑上的矛盾,欢迎各位指正.
以下涉及的全部代码可以访问我的码云仓库,地址:
https://gitee.com/zht1702/my-notes/tree/master/codes/MyCodes/HTML/com.zht.html/com.zht.html.pratice
初识html以及w3c
html
html,即超文本标记语言(Hyper Text Markup Language)
作为"超文本",其中可以包括:文字,图片,音频,视频,动画等…
目前html最新版本为html5.0
w3c
World Wide Web Consortuim(世界万维网联盟)
w3c成立于1994年,是web计数领域最具权威和最有影响力的中立性技术标准机构
w3c标准包括:
- 结构化标准语言(html,xml)
- 表现标准语言(css)
- 行为标准语言(DOM,ECMAScript)
网页基本标签
网页基本标签
网页基本标签可以分为以下几类:
- 标题标签
- 段落标签
- 换行标签
- 水平线标签
- 字体样式标签
- 注释和特殊符号
<!--网页基本标签
以下依次是:
1. 标题标签
2. 段落标签
3. 换行标签
4. 水平线线标签
5. 字体样式标签
6. 注释和特殊符号
-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h6>六级标题</h6>
<br/>
<p>这是一个段落</p>
<br/>
这里有一个换行标签-->><br><<--这里有一个换行标签
<br>
下面是水平线
<hr/>
<br/>
<strong>This is BOLD FACE.(to use "strong" label)</strong>
<br/>
<em>This is italic face.(to use "em" label)</em>
<!--这是注释标记-->
<!--特殊符号
以下主要介绍的特殊符号:
1. 空格
2. 大于/小于号
3. 版权符号
-->
<br/>
This is a "space"--->> <<---This is a "space" (to use "   " with a ";" after it)
<br/>
Greater than sign: > (to use & and"gt;")
<br/>
Less than sign: < (to use & and "lt;")
开放标签和闭合标签
标签大致可以分为这两类:开放和闭合标签
开放标签是成对出现的,通过前后两个标签用来标记一个内容,后一个标签内的"单词"前面要加一个斜杠表示后标签,例如:
<head> (这个地方可以写内容) </head>
闭合标签,只有一个标签,所有的内容写在标签内部,为工整和保险起见,建议所有闭合标签后面>前面加一个斜杠表示标签结束
<meta ...(属性内容) />
网页的基本信息
基本信息也是通过标签表示的:
1. <DOCTYPE>标签
用于告诉浏览器以下代码使用的是什么规范
2. <html></html>标签
用于标记整个html文件范围
3. <head></head>标签
用于表示网页头部
4. <title></title>标签
表示网页名
5. <body></body>标签
表示网页主体
6. <meta>标签
用于描述网页信息,这个标签一般也在<head>标签之下,是闭合标签
这里对meta标签做一些补充:
目前见到的meta的三种属性:charset;keyword;description
<!-- charset表示网页使用的字符集,推荐(也是默认)为:UTF-8 默认包含(指idea创建新的html文件的时候) -->
<meta charset = "UTF-8">
<!-- keyword 用于表示网页的keyword信息 默认不包含 -->
<meta name = "keyword" content = "This is the keyword info of this web">
<!-- descripton 用于表示网页的描述信息 默认不包含 -->
<meta name = "description" charset = "This is description info of this web.">
图像,超链接和网页布局
图像
绝对路径和相对路径:
用
../
可以在相对路径中表示上一级目录
插入图像的标签:
<img src = "这里是图片的路径" alt = "如果图片加载失败,就会显示这里的字">
下面是实例:
<img src = "../../resources/image/img1.jpg" alt = "如果图片加载失败就会显示这几个字" width="633" height="421">
超链接
超链接的分类
超链接有三种:
- 页面间链接(从一个页面到另一个页面)
- 锚链接(链接到一个预先定好的锚点)
- 功能性链接
链接
不论是上面的哪一种链接,链接的标签是一定的:
<a href = "path or URL">text to show to the user.</a>
页面间链接
页面间链接是用来跳转到页面的,所以只要在上面的标签中的属性href下赋值为某个网址或者同项目下另外一个网页的相对路径即可,通过点击展示文字来达到跳网页的作用,比如:
<!--这样写可以跳到百度-->
<a href = "https://www.baidu.com">click me to Baidu search.</a>
或者:
<!--这样写可以跳到同文件夹下的summaryDemo.html的页面-->
<a href = "summaryDemo.html">text to show to the user.</a>
锚链接
锚链接可以理解成是链接和链接之间的跳转,也就是把链接当作锚点:
比如:
在summary页面下的第一行有如下链接:
<a href = "" id="anchor"> 这是一个用来做锚的超链接,用来给锚链接做标记</a>
而在summary页面底端有这样一个链接:
<!--这样写可以返回定位在该页面页首的锚点,anchor是目标节点的id(或者name),注意在id前面的井号-->
<a href = "#anchor">返回页首的锚节点</a>
当点击这个链接时,会直接跳转到页首
再如:
在summaryDemo页面中有这么一行:
<a href = "" id="anchor" > 这是一个用来做锚的超链接,用来给锚链接做标记</a>
而在summary中有这么一行:
<!--这样写可以返回到辅助页面的锚节点-->
<a href = "summaryDemo.html#anchor">前往辅助页的锚节点</a>
点击这个链接,则会进入到辅助页面的锚节点
功能性链接
功能性链接暂时学了两种:
第一种是邮件链接,在href中添加mailto标记,并写上目标邮箱即可
<a href = "mailto:2797425014@qq.com
最低0.47元/天 解锁文章
6522
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
