(X)HTML学习笔记01_(X)HTML代码的结构

最新推荐文章于 2021-06-09 17:55:08 发布

KingsleyAdam

最新推荐文章于 2021-06-09 17:55:08 发布

阅读量597

点赞数 1

分类专栏： HTML/XHTML-HTML5-CSS

本文链接：https://blog.csdn.net/qq_19851167/article/details/50544564

版权

HTML/XHTML-HTML5-CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

小渣深感自己的能力有限，在学校感觉和同学们的差距越来越大，因此，寒假回了家，决定好好学习，努力充实自己，起码让自己看起来不那么渣，下学期的大作业组队不能给室友拖后腿！！加油！

(X)HTML学习笔记——01

HTML&XHTML的联系与区别

我总结一下我理解的：

1.HTML比XHTML更宽容，格式没有要求那么严格，所以HTML能够编起来更随意些。XHML完全可以替代HTML，因为他基本上就算是HTML的规范化(HTML5是规范及拓展)

2.编写HTML文件的时候尽量按照严格规范的标准来，这样可以使编码清晰，便于学习者学习，便于他人读懂，使维护人员便于维护。

下面进入主题，开始进入本笔记的干货：

1.首先是网页的开头

在页面的开头是要使用DOCTYPE来声明要是用什么风格的HTML或XHTML

DOCTYPE使浏览器知道应该如何处理文档，并且让验证器知道按照什么标准来检查代码的语法。
© 2007/8 HTML XHTML CSS 基础教程（第六版）

编写过渡型HTML4页面的开头的步骤如下：(HTML4.01 Transitional)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

编写严格型HTML4页面的开头的步骤如下：(HTML4.01 Strict)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

编写HTML5页面的开头的步骤如下：

<!doctype html>

编写过渡型XHTML1.0的开头的步骤如下：(XHTML1.0 Transitional)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

编写严格型XHTML1.0页面的开头的步骤如下：(XHTML1.0 Strict)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

编写XHTML1.1页面的开头的步骤如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

编写XHTML Moblie 1.0页面的开头的步骤如下：(移动型XHTML1.0)

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

—————————————————————————————————————————————————————————(这些都是从Dreamweaver上面新建对应的文档一个一个copy/paste来的)

然而，并没有什么卵用，看吧，用Dreamweaver/FrontPage这种估计都会在新建的时候将大体的框架写好哦！

2.然后是接下来

开始要写html标记

<html>

</html>

以上是html系列的写法，xhtml系列的写法如下：

</html>

3.在<html> </html>

这个标记之间还有(X)HTML文档的两个必不可少的标记，才构成了基本结构

①<head>

</head>

在这个标记之间还要有

(除了HTML5是这个<meta charset="utf-8">外，其他文档都是上述格式！)

meta是html语言head区的一个辅助性标签。几乎所有的网页里，我们可以看到类似上面的这段的html代码:点击这里看详解

<title>标题的内容</title>

(虽然在html里面不写head也不会报错，但是写了这个会让这个文档变得明了清晰，命名可以在一定程度上了解该html的内容，而且我之前也说过严格一些规范一些还是好的，再怎么严格要求自己也不为过！！)

②<body>

<body>

(这是网页的主题部分，真是望文便可生义哦)

3.然后

就可以正式在body里面编写我们的html/xhtml文档了

先介绍几个/相关属性之后介绍

1.这六级标题的字体大小会依次减小

<h1> content </h1> 一级标题

<h2> content </h2> 二级标题

<h3>content </h3> 三级标题

<h4>content </h4> 四级标题

<h5>content </h5> 五级标题

<h6>content </h6> 六级标题

2. <p>段落内容</p>

extension：(拓展延伸)

3.<br />

换行的标记因为在html/xhtml中的文本内容回忽略换行/多个空格等字符而默认为只是一个空格，可能会导致网页文本的显示有问题，因此加了这个标记能够显式地表示换行。

还有id class

命名唯一元素：id是用来表明某一个元素的唯一标识，将来便于引用，在格式化或链接的时候标识他。

明明元素组：在元素组中添加calss属性，可以对整组元素同时进行格式化。

4.div标记：<div> </div>将body的各个标记组合一下，划分成区域，在单纯的(x)html中用处不大，但是结合id和class将来在css中有大用处

5.span标记：<span> </span>将文本内容中的某段/某行标记，然后其用法div原理是一样的，只是它是用于文本内容，而div用于将几个标记组合起来，span亦能将来结合id和class将来在css中有大用处。

6.注释

格式：

下面发一段今天大致学的一丢丢代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>我是可爱的小示例</title>
</head>

<body>
<div id = "我是唯一标明一个元素的小id,css我们天天见">

<div>
<h1>我是一级标题</h1>
<p>我是段落1</p>
<p>我是段落2</p>
</div>

<div calss="我是表明这个区域或者这个元素是属于哪个类的">
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>
</div>

<h4 id="hehe">我是四级标题</h4>
<h5 class="xixi">我是五级标题</h5>
<h6>我是六级标题</h6>

</div>
</body>
</html>

KingsleyAdam

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
(X)HTML学习笔记01_(X)HTML代码的结构

小渣深感自己的能力有限，在学校感觉和同学们的差距越来越大，因此，寒假回了家，决定好好学习，努力充实自己，起码让自己看起来不那么渣，下学期的大作业组队不能给室友拖后腿！！加油！(X)HTML学习笔记——01HTML&XHTML的联系与区别我总结一下我理解的：1.HTML比XHTML更宽容，格式没有要求那么严格，所以HTML能够编起来更随意些。XHML完全可以替代HTML，因为
复制链接

扫一扫