HTML4(一)

来源：互联网发布：java urlencode解码编辑：程序博客网时间：2024/05/19 07:09

HTML全名：HyperText markup language.中文名叫超文本标记语言。html是由一对一对的标签组成，每一对标签都有他特定的功能，而每一对标签又分头标签的尾标签

<html></html>

例如上边就是一对最简单的标签,又称为html的根标签，就是以后写代码只能在这里面书写，不能写到外面！
在<html></html>标签里面有两个必须有的结构化标签 <head></head>和<body></body>.
其中head区是用来给浏览器看的里面一般加一些配置的标签，body区里面的东西就是用来呈现给用户看的啦~

第一个html小程序

<html>    <head>    </head>    <body>        Life is beautiful!!!    </body></html>

这里只需要将上述代码输入到文本并保存成html格式的文件，然后浏览器打开就可以看到浏览器上会显示出“Life is beautiful!!!”.(当然我们开发一般选择Chrome浏览器)
这里有一个值得注意的事情，当我们在body标签里面写入中文之后再打开浏览器会发现我们写的东西出现了乱码，这是为什么呢？这是因为浏览器不认识中文，这时候需要我们自己设置编码格式让浏览器能够都懂中文。

编码格式

我们可以通过在<head></head>标签里面通过<meta>标签来改变编码当然直接写<meta>是不好用的，我们要在该标签上加一个属性和属性值–><meta charset="utf-8">,最后我们的代码就变成这样了

<html>    <head>        <meta charset="utf-8">    </head>    <body>        Life is 美好的!!!    </body></html>

这回再开启浏览器，中文的部分就不会再出现乱码的情况了。

拓展一下编码格式的知识

gb2312(国标2312)—>定义的是简体中文字符集和部分的亚裔字符集
GBK(国标扩展版本)—>可以识别繁体字
unicode(万国码)—>识别各国字
uft-8(unicode升级版本)—>这个也是我们最最最常用的编码

小知识
1.<title></title>—>当我们打开百度的时候会发现页面有自己的名字，但是我们的页面没有名字，这时我们可以在<head></head>标签里面添加内容，例如 <title>你好前端</title> ,再次刷新页面，发现我们的页面标题变成了“你好前端”。

HTML标签

上面写了一些html简单知识，下面介绍html一些基础的标签
1.<p></p>
<p></p>是段落标签，在标签中写的东西会成段展示，独占一行

2.<h1></h1>.....<h6><h6>
“h”标签是标题标签共有6种，<h1></h1><h2></h2><h3></h3><h4></h4><h5></h5><h6></h6>
作用就是将标签中的文字加粗并放大，并且独占一行，通常标题处用这个标签处理。h1到h6字体大小依次减小，其中<h4></h4>标签中的字体大小和正常的字体大小是一样的。

3.<strong></strong>
这个标签的包裹的字体会有加粗的效果

4.<em></em>
em是强调的意思，em标签包裹的文字会是斜体效果

5.<address></address>
这个标签的作用可以看作是<p></p>和<em></em>标签的组合，就是独占一行加斜体。也就是说 “<address>哈哈</address>” 和 “<p><em>哈哈</em></p>“的效果是一样的。

div和span

这两个标签通常是用来当作容器使用的，通过容器可以让页面更加的整齐，最重要的一点是通过容器我们可以进行集体操作。
例如，现在有想对三个P标签中的文字进行变红处理，需要写如下代码

<html><head>    <meta charset="UTF-8"></head><body>    <p style="color:red;">a</p>    <p style="color:red;">b</p>    <p style="color:red">c</p></body></html>

这样显然很麻烦，但是如果我们将p标签加入到容器中就简单很多了

<html><head>    <meta charset="UTF-8"></head><body>    <div style="color:red;">        <p">a</p>        <p">b</p>        <p">c</p>    </div></body></html>

这样就一起将p标签中的文字都改成红色了是不是很方便！虽然div和span没有什么实质性的作用，但是他可以使我们的代码模块化，更加方便操作
<span></span>
这个标签中的内容是成行显示的，属于行级标签
<div></div>
这个标签中的内容是成块显示的，属于块级标签

0 0