html5初级入门-第二章

* 转载请注明出处 *

本章目录

• html基本标签
• 代码注释和特殊字符
• html图像标签
• html超链接

正文

html基本标签

    主要学习以下几个标签:

1.标题标签
2.段落和换行标签
3.水平线标签
4.斜体标签
5.字体加粗

以下标签初学者在使用的时候切记要闭合。

例如:
<标签A>

标题标签

<h1>一级标题:最大</h1>
<h2>二级标题:递减</h2>
<h3>三级标题:递减</h3>
<h4>四级标题:递减</h4>
<h5>五级标题:递减</h5>
<h6>六级标题:最小</h6>

此标签我们可以在新闻标题,副标题等需要让用户第一时间看到的地方去使用。

段落和换行标签

<p>床前明月光<br/>
   疑是地上霜<br/>
   举头望明月<br>
   低头思故乡
</p>

此标签通常是用来描述一段话,像是课文中的段落一样，如果我们需要在段落中主动换行。可以和
标签一起来使用。

水平线标签

<hr/>

水平线标签的效果会在浏览器产生一条灰色的横线。我们一般可以在正文和内容之间使用水平线标签进行分隔。

斜体

<em>需要变成斜体的文字<em>

当我们想要对文字的字体需要修改为斜体是我们便可以使用<em></em>将需要修改的文字包裹起来。当然也可以将段落标签以及下面的加粗标签嵌套起来进行使用。

字体加粗

<strong>需要加粗的文字</strong>

此标签和上面提到过的em标签效果相似,只不过此标签是用来对文字进行加粗。如果掌握了em的用法strong标签的使用可以照猫画虎。

代码注释

  代码注释的作用主要是用来将自己的接下来要写的代码简单的描述出来。因为项目是需要迭代开发，我们可能会去修改别人的代码,别人也可能会来修改我们的代码。在这个时候,如果被修改的代码具有代码注释,那对于新接手这个代码的程序员来说无益于是最好的.其对代码的掌握进度也会加快。

简单来说就是方便阅读代码

浏览器会自动忽略掉注释内容

<!-- 注释内容 -->

特殊字符

  在html中由于< >是用来将标签包裹起来。所以我们在想要使用的时候为了避免冲突,通常会使用转义符来代替。下面我们来看看常用的一些转义符:

    原符号| 转义符
-------|----------
> | > 
< |  &lt;
@ | &copy;
" | &quot;
空格| &nbsp;

在此将空格简单说一下,在html文档中多个空格解析时只会有一个。所以如果有多个空格我们可以使用 来代替。

html图像标签

  图片等格式一般分为jpg,gif,png,jpeg,bmp等。这几种图片格式的优势我们简单的来说一下

• jpg :有损压缩,不支持透明,不支持动画
• jpeg :有损压缩,不支持透明,不支持动画。相较于jpg图片较大
• gif :有损压缩,不支持透明,支持动画。
• png :网页开发常用的一种图片格式。支持透明。因为相较于jpg如果色彩复杂大小是jpg的5至6倍之多.所以我们一般用于网页图标的设计。
• bmp:windows系统下标准的图片格式。图片未经压缩,图片所占容量较大。最大的好处是能够被绝大多数软件所识别。

  在html中,我们如果想要将以上格式的图片显示出来。在这里我们需要借助<img>来显示图片。

<img src="图片路径" alt="替换文本" width="图片宽度" height="图片高度">

图片路径在这里可以写相对路径或者是绝对路径

绝对路径:
    本地图片可以写磁盘路径

    网络图片可以写url

相对路径:相对位置值得是img标签所在html文件。以此为开始位置,写的路径都在此位置基础上去找。

html超链接

    跳转到页面不同的地方，或者跳转到不同的页面，或者跳转到不同的网站。

<a href=“url”>提示文字</a>

在上述代码片段中：当我们用鼠标点击提示文字时。浏览器将href属性中的url拿出来进行访问。

    除了可以在href属性写url之外我们还可以进行以下两种形式的访问。

锚链接

    我们在日常生活中有时候会在网络上去查找一些文档。这些文档通常都写在一个html文档中,这样就导致文档非常长。我们如果要一个个找就会非常麻烦。所以通常文档都会在左侧或者上部提供一个目录供我们更佳快捷的使用。在这个时候我们就用到了超链接中的锚链接。

锚链接有两种用法:

    跳转本页面

    跳转其他页面

跳转本页面

test1.html

<a href="#bottom">去底部</a>
<h1>一级标题:最大</h1>
<h2>二级标题:递减</h2>
<h3>三级标题:递减</h3>
<h4>四级标题:递减</h4>
<h5>五级标题:递减</h5>
<h6>六级标题:最小</h6>
<a name="bottom">这是底部</a>

当我们点击去底部时,会将href中的值获取到。这时候浏览器获取到#bottom。当浏览器碰到#号时会将后面的值拿到去当前页面找一个name为bottom的a标签并自动定位到a标签的位置。

跳转其他页面

test1.html

<a href="test2.html#bottom">去test2.html的底部</a>
<a href="test2.html#center">去test2.html的中间</a>
<h1>一级标题:最大</h1>
<h2>二级标题:递减</h2>
<h3>三级标题:递减</h3>
<h4>四级标题:递减</h4>
<h5>五级标题:递减</h5>
<h6>六级标题:最小</h6>

test2.html

<h1>一级标题:最大</h1>
<h2>二级标题:递减</h2>
<h3>三级标题:递减</h3>
<h4>四级标题:递减</h4>
<h5>五级标题:递减</h5>
<h6>六级标题:最小</h6>
<a name="center">中间</a>
<h1>一级标题:最大</h1>
<h2>二级标题:递减</h2>
<h3>三级标题:递减</h3>
<h4>四级标题:递减</h4>
<h5>五级标题:递减</h5>
<h6>六级标题:最小</h6>
<a name="bottom">这是底部</a>

当我们去点击test1.html中的去中间时。会获取到href属性中的值，href属性中我们首先写了一个资源文件的路径,那浏览器便会先去这个资源文件。那么当前页面便是test2.html,接着后吧后面的#center拿出来去执行。执行的结果和本页面的猫链接一样。
当然点击去底部也是一样的效果。

功能性链接

    可以去指定的qq和邮箱等。

以邮箱举例

<a href="mailto:xxxxx@qq.com">给它发邮件</a>
<a href="mailto:xxxxx@qq.com?subject=你好&body=这是一个阳光明媚的日子&cc=904650977@qq.com">给它发邮件2</a>

mailto:调用默认的邮箱服务
xxxx@qq.com：发送给的人
subject:主题
body:内容
cc:抄送
bcc:密件抄送地址

本章的内容到这里结束,祝大家学习愉快