前端基础之HTML（1）

2019-01-11 本文已影响0人薛定谔的猫狗

使用HBuilder作为开发工具

HTML

HTML, HyperText Markup Language
超文本标记语言，用于描述网页的格式和内容

HyperText 超文本：最早的互联网只能显示文本，不能显示图片等其他内容
Markup 标记：<body><a><img><button>等等这类标签
Language 语言：这是一种约定的规范，浏览器能够解释并正确的显示

HTML的基本格式

<html>
    <head>...头部信息...</head>
    <body>...主体内容...</body>
</html>

头部：规定网页的辅助信息，如字符编码(通常指定为UTF-8)
主体：规定窗口内显示的内容
如图

<html>
    <head>
        <meta charset="utf-8" />
        <title>MyTest</title>
    </head>
    <body>
        HelloWorld
    </body>
</html>

页面显示为

测试1

可见，头部中的内容不会显示再主体窗口中，而body内的内容会显示

格式规则：

标记一般成对出现，例如<body> </body>
空白字符一般不影响显示，例如，可以随意换行
注释用注释

源码与执行

源码：开发人员在HBuilder里编写网页源码
执行：用户在浏览器里打开网页，查看网页
在这里，浏览器是一个能够解释执行HTML源码的工具

文本与段落

（<hx>、、 的使用）
文章类网页，例如，新闻、博客、在线小说等等，主要使用文本和段落来实现
实现文本和段落HTML中常用的标签有

<h1> header,1级标题 </h1>
<h2> header,2级标题 </h2>
...
<h6> header,6级标签 </h6>
<p> paragraph,段落 </p>
<br> beark,换行

例如如下代码

<html>
    <head>
        <meta charset="utf-8" />
        <title>MyTest</title>
    </head>
    <body>
        <h1> 缅甸帕敢矿区再发山体滑坡   已致至少12人死亡 </h1>
        
        <h6> 2018年05月04日 19:09:51 </h6>
        
        <h6> 来源：央视新闻移动网 </h6>

        <p> 当地时间5月4日凌晨3点半左右，缅甸克钦邦帕敢镇色目乡会卡村一翡翠矿场上的金茂山发生山体滑坡。<br>
            事故发生后，当地公益组织、消防队、警方和政府人员等立即联合开展了救援工作。截至发稿前，<br>
            救援队已经挖出12具遇难者遗体。遇难者基本都是在矿区捡拾翡翠矿石的人。
        </p>
        
        <p>
            近年来，帕敢矿区多次发生山体滑坡导致捡拾翡翠人员伤亡的事件，
            缅甸政府也多次提醒闲杂人员不要进入矿区，但是一直难以完全杜绝。
        </p>
    </body>
</html>

浏览器显示的效果如下图

浏览器显示

注意事项：

一般把文本都放在标签下，不单独出现
有的标签不成对出现，例如
HMTL文本内一般会忽略多余的空格，若想换行，则需使用
标签；使用多余的空格，需使用

插入图片

（<img>的使用）

准备一张图片文件，放在img目录下
添加<img src="img/itelitesicon.png" />
其中，img：image，图片
src：source，图片源地址URL
目录结构

<html>
    <head>
        <meta charset="utf-8" />
        <title>MyTest</title>
    </head>
    <body>
        <img src="img/itelitesicon.png" />
    </body>
</html>

显示效果如下

显示

标签的属性

<img>标签应指定src属性，表示图片的地址
例如：<img src="img/itelitesicon.png" ddd="xxx"/>
规则：

属性的值用单引号或双引号包围
多个属性用空格隔开

注意(记住以下原则)

不能访问项目目录之外的资源，只能使用相对路径
使用相对路径访问

src属性不能使用本地路径，例如：<img src="D:\Demo\MyEclipse_1\free0601\WebRoot\Test0110\img\itelites.png" />
这样的写法在打开浏览器显示时，会报错，会显示一个撕裂的图标，我们可以按F12打开开发者工具观察，会显示报错提示
比如，一个网站，我们访问的应该是它所指定的文件夹里面的内容，不能访问它之外的资源！！！

超链接

（<a>的使用）

为什么要使用超链接？

背景：准备一个诗歌的网站

index.html 显示诗歌的目录
p1.html 显示一首诗的内容
p2.html 显示一首诗的内容

目录

代码分别为
index.html

<html>
    <head>
        <meta charset="utf-8" />
        <title>MyTest</title>
    </head>
    <body>
        <h1>目录</h1>
        新添声杨柳枝词二首<br />
        定风波<br />
    </body>
</html>

p1.html

<html>
    <head>
        <meta charset="UTF-8">
        <title>新添声杨柳枝词二首</title>
    </head>
    <body>
        <h1>新添声杨柳枝词二首</h1>
        一尺深红蒙曲尘，天生旧物不如新。<br />
        合欢桃核终堪恨，里许元来别有人。<br />
        井底点灯深烛伊，共郎长行莫围棋。<br />
        玲珑骰子安红豆，入骨相思知不知？<br />
    </body>
</html>

p2.html

<html>
    <head>
        <meta charset="UTF-8">
        <title>定风波</title>
    </head>
    <body>
        <h1>定风波</h1>
        常羡人间琢玉郎，天应乞与点酥娘。<br />
        尽道清歌传皓齿，风起，雪飞炎海变清凉。<br />
        万里归来颜愈少，微笑，笑时犹带岭梅香。<br />
        试问岭南应不好，却道，此心安处是吾乡。<br />
    </body>
</html>

无超链接

这时，每首诗都有对应的页面，没有什么大问题。可是，怎么进去这些诗对应的页面呢？经常上网的朋友都知道，一般会有对应的按钮来跳转到指定的页面。这个就是超链接，诗网页开发经常使用的一种技术！

超链接<a>：当点击一个超链接对象时，浏览器将打开这个目标网页
示例: <a href="p1.html"> 定风波 </a>
其中，<a> 标签 anchor,表示超链接对象
href 属性，hypertext reference ，目标资源的地址

应该把index.html修改如下

<html>
    <head>
        <meta charset="utf-8" />
        <title>MyTest</title>
    </head>
    <body>
        <h1>目录</h1>
        <a href="p1.html">新添声杨柳枝词二首</a><br />
        <a href="p2.html">定风波</a><br />
    </body>
</html>

此时，浏览器可以进行点击其字段然后跳转。

超链接

超链接的作用

超链接的作用，其实最本质的作用就是，进入网站首页之后，不需要再输入地址，用鼠标点击跳转，就可以浏览全站的资源。

HTML的一些其他标签

前面稍微说了HTML页面常用且较为重要的几种标签，接下来再把一些其他的标签列出来

<body>
在网页上要展示出来的页面内容一定要放在body标签中。并且，基本上所有显示的网页，都应该必须有<body>标签
<head>
与<body>标签类似，都应该在每个HTML网页文件中存在，它描述了文档的各种属性和信息，包括文档的标题等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
<title>
在<title>和</title>标签之间的文字内容是网页的标题信息，它会出现在浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出网页的主题。每个网页的内容都是不同的，每个网页都应该有一个独一无二的title。一般都包含在<head>里面。可见上图。
与
这两个标签均表示强调文字的作用，但两者在强调的语气上有区别:表示强调，表示更强烈的强调。并且在浏览器中默认用斜体表示， 用粗体表示。

此标签是没有语义的，一般与CSS连用，其作用为了设置单独的样式用的，用于修饰某段话或词。
<q>
用于引用某段话，注意要引用的文本不用再加双引号，浏览器会对q标签所引用的内容自动添加双引号。
<blockquote>
其作用也是引用别人的文本。但它是对长文本的引用，浏览器对此标签的解析是缩进样式，并不是加双引号。
<hr>
与 一样，属于空标签(不是成对出现)，主要用于分隔的横线，这样会使文章看起来整齐些。不过一般会与css结合起来修饰。
<address>
一般网页中会有一些网站的联系地址信息需要在网页中展示出来，这些联系地址信息如公司的地址就可以<address>标签。在浏览器上显示的样式为斜体，可与CSS结合。
<code>
在介绍语言技术的网站中，避免不了在网页中显示一些计算机专业的编程代码，当代码为一行代码时，你就可以使用此标签
<pre>
和<code>作用一样，当为多行代码时，可以使用此标签来代替<code>。此标签可以预格式化文本。被包围在 pre 元素中的文本通常会保留空格和换行符。
<ul>与<li>
在浏览网页时，会发现网页上有很多信息的列表，如新闻列表、图片列表等等。这些列表可以使用ul-li标签来完成。ul-li是没有前后顺序的信息列表。
<ol>与<li>
和上一条类似，如果想在网页中展示有前后顺序的信息列表,可以使用<ol>与<li>构造。

更多高级标签(如表格等)，以后再稍加简明。