HTML
目录
实体
图片标签
meta标签
内联框架
超链接
HTML简介
HTML称为超文本标记语言,是一种标识性的语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的网络资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。
超文本是不同于纯文本的一种形式,可以简单的理解为纯文本的一种进阶,可以进行文字,图片,视频的处理,事实上在超文本中的“超”就是指超链接,在今后学详细学到什么是超链接。
HTML的标准结构
<html> <!-- 根标签有且只有一个,所有的网页内容都在htmle标签里面-->
<head> <!--
用来设置网页的头部信息,head标签中的内容不会在网页中直接显示
head标签是用来帮助浏览器解析网页
-->
<title></title>
</head>
<body>
<!--
body标签表示页面的主体,在网页中所有可见的内容都应该写在body标签中
-->
<h1>*****</h1>
</body>
</html>
HTML注释
不同于其他语言的注释风格,在HTML中我们使用“<!-- -->”结构来表示注释,首先在注释中的内容不会在页面中显示,但是可以在源码中显示,因此在编写代码时可以通过注释进行描述,帮助今后的代码维护。
标签的属性
属性: 可以通过属性来设置标签,如果处理标签中的内容可以在开始标签中添加属性 属性实际上就是一个名值对的结构,属性名 =“属性值”,在一个标签中可以同时设置多个属性,属性间需要使用空格隔开。
常用的标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>常用标签</title>
</head>
<body>
<!--
标题标签
-在HTML中,一共有六级标题标签
h1、、、h6
在显示的效果上h1最大,h6最小,但是文字的大小我们可以通过CSS进行设置
使用HTML标签时,关注的是标签的语义,我们使用的标签都是语义化标签
在6级标签中,h1最为重要,用来表示一个网页的主要内容,h2~h6重要性以此降低
对于搜索引擎而言,h1的重要性仅次于title标签,搜索引擎在检索完title标签的内容后,会立即查看h1中的内容
h1标签非常重要,他会影响到页面在搜索引擎中的排名,页面中只能写一个h1
在日常的Web开发中,对于页面标题标签往往只使用h1、h2、h3,而h3以后的基本不再使用
-->
<h1>一级标题</h1>
<h2>一级标题</h2>
<h3>一级标题</h3>
<h4>一级标题</h4>
<h5>一级标题</h5>
<h6>一级标题</h6>
<!--
段落标签,段落标签用于表示内容中的一个自然段
使用p标签来表示一个段落
p标签中的文字,默认会独占一行,并且段与段之间会一个间距
-->
<p>我是一个p标签,我用来表示一个段落</p>
<!--
在 HTML中,字符之间再多的空格,浏览器也会当作一个空格解析,换行也会当成一个空格解析
在页面中可以使用br标签来表示一个换行,br标签是自结束标签
-->
<p>
锄禾日当午,汗滴禾下土。<br/>
谁知盘中餐,粒粒皆辛苦。<br/>
</p>
<!--
hr标签也是一个自结束标签,可以在页面中生成一条水平线
-->
<hr/>
</body>
</html>
实体
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>实体</title>
</head>
<body>
<!--
在HTML有一些符号例如:<,>等特殊字符是不能直接使用的
需要使用一些特殊的符号来表示这些特殊字符,这种特殊符号就是实体,也称为转义字符串
浏览器解析到实体时,会自动将实体转换为对应的字符
实体的语法:
&实体的名字;
< <
> >
空格
版权符号 ©
-->
a<c
<p>©今天天气 好晴朗,处处好风光</p>
</body>
</html>
图片标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>图片标签/相对路径</title>
</head>
<body>
<!--
使用img标签来向网页中引入一个外部图片,
img标签也是一个自结束标签
属性:
src:设置一个外部图片的路径
alt:可以用来设置在图片不能显示时,对图片的描述
搜索引擎可以通过alt属性来识别不同的图片
width:可以用来修改图片的宽度
heigth:可以用来修改图片的高度
宽度和高度两个属性如果只设置一个,另一个也会同时等比例调整大小
如果两个值同时指定则按照你指定的值来设置
一般开发中除了自适应的页面,不建议设置widt和height
-->
<img src="1.gif" alt="这是一个大松树" width="200px" height="200px"/>
<!--
src属性配置的是图片的路径,目前我们所要使用的路径全部是相对路径。
相对路径:
指的是相对于当前资源所在目录的位置
绝对路径:
指的是资源在计算机中的绝对位置
-->
</body>
</html>
图片的格式
JPEG(JPG) -JPEG图片支持的颜色比较多,图片可以压缩,但是不支持透明 -一般使用JPEG来保存图片等颜色丰富的图片
GIF -GIF支持的颜色少,只支持简单的透明,支持动态图 -图片颜色单一或者是动态图时可以使用gif
PNG -PNG支持的颜色多,并且支持复杂的透明 -可以用来显示颜色复杂的透明的图片
图片的使用原则: 效果不一致,使用效果好 效果一致,使用内存小的
meta标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>meta标签</title>
<!--
使用meta标签还可以用来设置网页的关键字
-->
<meta name="keywords" content="HTML5,js,前端">
<!--
还可以用来指定网页的描述
搜索引擎在检索页面时,会同时检索页面中的关键词和描述,但是这两份值不会影响页面在搜索引擎中的排名
-->
<meta name="deaadf" content="发布****">
<!--
使用meta标签可以用来做一个做请求的重定向
-->
<meta http-equiv="refresh" content="5" ;url = "http://www.baidu.com"/>
</head>
<body>
<h1>5秒后跳转页面</h1>
</body>
</html>
内联框架
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>内联框架</title>
</head>
<body>
<!--
使用内联框架可以引入外部的页面
使用iframe来创建一个内联框架
属性:
scr:指向一个外部页面的路径,可以使用相对路径
width:
heigth:
name:可以为内联框架指定一个name属性
在现实开发中并不推荐使用内联框架,因为内联框架中的内容不会被搜索引擎所检索,
如果所开发的项目为内网项目时可以使用,影响不大
-->
</body>
</html>
超链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>超链接</title>
</head>
<body>
<!--
使用超链接可以让我们从一个页面跳转到另一个页面
使用a标签来创建一个超链接
属性:
href:指向链接跳转的目标地址,可以写一个相对路径也可以写一个完整的地址
-->
<a href="********">我是一个超链接</a>
<a href="********">我是一个超链接</a>
<!--
a标签中的target属性可以用来指定打开链接的位置
可选值:
_self:表示在当前窗口中打开(默认值)
_blank:在新的窗口中打开连接
-->
<a href="********">我是一个超链接</a>
<br/>
<iframe src="firstone" frameborder="tom"></iframe>
<!--
在创建超链接时,对于不确定的地址可以用&作为占位符
在连接跳转到id为**的元素位置时,直接在href中写id的值
-->
<!--
如果将链接地址设置为&,则点击链接时会自动跳转到当前页面的顶部
html中有一个属性,每一个元素都可以设置,该属性可以作为标签的唯一标识
这个属性就是id,id属性在同一页面中只能有一个不能重复
-->
</body>
</html>