html基础用法②——文档声明和META标签

来源：互联网发布：java void 编辑：程序博客网时间：2024/05/21 22:47

我们知道要创建一个网页首先要搭建一个html，但是为了网页中的内容正确在浏览器中显示出来，就要告诉浏览器我们用的是html的哪个版本？所以我们需要提前写一个声明是html哪个版本的DOCTYPE

<!DOCTYPE html>

DOCTYPE必须放在文档首行，而且DOCTYPE不是文档标签

<!DOCTYPE html><html>    <head>        <title>文档生命和META标签</title>    </head>    <body>        <p>文档生命和META标签</p>    </body></html>

我们直接保存文档，打开浏览器运行，可能会出现乱码
这里写图片描述
出现这种现象是因为网页的编码问题，如果没有出现则是因为浏览器默认的编码格式正好是你文档的保存格式。
我们没出现不能保证别人不出现，所以，为了以防万一，就需要通过<head></head> 中间添加一个meta声明来声明文档类型

<!DOCTYPE html><html>    <head>        <title>文档生命和META标签</title>        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">    </head>    <body>        <p>文档生命和META标签</p>    </body></html>

国内用的比较多的是utf-8 和gb2312，两种编码格式。

虽然我们在body当中可以直接写入内容，就可以在网页中展现出来，不过咱先出来的太过死板，直接用html没办法改变，为了让html文本更加多样化，我们可以用更多的Html标签。

首先我们介绍一下标题标签

h1标签

h2标签

h3标签

h4标签

h5标签

h6标签

代码如下

<h1>h1标签</h1><h2>h2标签</h2><h3>h3标签</h3><h4>h4标签</h4><h5>h5标签</h5><h6>h6标签</h6>

段落这是用标签展示
p标签内所有的文字都代表是一段文字。

    <p>国际程序员节定在每年的第256（十六进制为0×100，或28）天，也就是平年的9月13日或闰年的9月12日。在俄罗斯，这是一个官方节日。2002年，俄罗斯程序员Valentin Balt收集签名，向俄罗斯联邦政府请愿将9月13日设定为程序员节。2009年9月11日，俄罗斯总统梅德韦杰夫在节日安排方案上签了名，“程序员节”从此成为了俄罗斯的一个正式节日。为什么会选9月13日呢？因为它是每年的第256天（闰年就是9月12日）。256这个数字对程序员来说有着特别的意义，1个字节（等于8位元）最多能表示256个数值。</p>    <p>国际程序员节定在每年的第256（十六进制为0×100，或28）天，也就是平年的9月13日或闰年的9月12日。在俄罗斯，这是一个官方节日。2002年，俄罗斯程序员Valentin Balt收集签名，向俄罗斯联邦政府请愿将9月13日设定为程序员节。2009年9月11日，俄罗斯总统梅德韦杰夫在节日安排方案上签了名，“程序员节”从此成为了俄罗斯的一个正式节日。为什么会选9月13日呢？因为它是每年的第256天（闰年就是9月12日）。256这个数字对程序员来说有着特别的意义，1个字节（等于8位元）最多能表示256个数值。</p>

这里写图片描述

上面就是用P标签所分隔的两段文字，我们最直观的感受就是两段文字之间有一行空格。

段落标签中有一个align的对齐属性（  为换行）：

left 左对齐
right 右对齐
center 居中对齐
justify 对行进行伸展保证每行相同长度对齐

<!DOCTYPE html><html>    <head>        <title>文档生命和META标签</title>    </head>    <body>    <p align = "left">国际程序员节定在每年的第256（十六进制为0×100，或28）天<br />，也就是平年的9月13日或闰年的9月12日。</p>    <p align = "right">        国际程序员节定在每年的第256（十六进制为0×100，或28）天<br />，也就是平年的9月13日或闰年的9月12日。</p>    <p align = "center">国际程序员节定在每年的第256（十六进制为0×100，或28）天<br />，也就是平年的9月13日或闰年的9月12日。</p>    <p align = "justify">国际程序员节定在每年的第256（十六进制为0×100，或28）天<br />，也就是平年的9月13日或闰年的9月12日。</p>    </body>    </body></html>

这里写图片描述

按照我们的书写习惯，我们喜欢第一行空两个空格，例如上面的第二个段落例子，但我们实际保存页面的时候空格并没有被现实出来，被Html过滤掉了。如果想让空格起作用，我们就需要输入 
我们还可以通过预格式标签<pre> 来保留我们的格式操作：

    <pre>国际程序员节   定在每年的第256    （十六进制为0×100，或28）天  ，也就是平年的    9月13日或闰年的9月12日。</pre>

这里写图片描述

水平线<hr />
hr是个单标签，是添加一个如下的水平线

水平线可以设置如下属性
设置水平线宽度<hr width ="20" />

设置水平线高度<hr color="#666666"/>

设置水平线位置<hr width = "20" align="center" />

设置水平线<hr noshade="20" />

文字标签

文字斜体


加粗


下标_
上标^
删除线~~<del></del>~~

阅读全文

0 0