HTML基本概念学习

参考链接：

w3cschool学习链接：http://www.w3cschool.cn/

一、HTML的概念

HTML是超文本（文本、图片、链接、音乐及程序等网页元素）标记语言，用于创建网页。

二、HTML发展史

Web技术领域的权威：W3C(万维网联盟)

HTML 2.0——1995年11月，RFC 1866发布

HTML 3.2——1997年1月14日，W3C发布推荐标准

HTML 4.0——1997年12月18日，W3C发布推荐标准

HTML 4.01——1999年12月24日，W3C发布推荐标准

HTML 5——2014年10月28日，W3C发布推荐标准

三、HTML结构

<head>标题、关键词、描述说明</head> 头部标记：不作内容显示，影响显示效果。

<body>正文内容</body> 正文标记（实体标记）：网页实际显示的内容。

<head>开始标签（开放标签）（opening tag）

</head>结束标签（闭合标签）（closing tag）

四、HTML注释

注释是关于HTML元素的有用信息。注释使HTML文档更易读和可理解。

HTML注释的内容。

结尾。

五、HTML元素

I like <code>web</code> and CSS.

起始标记为：<code>;

结束标记为：</code>;

标签之间是元素的内容：web;

1、什么是元素？

标签和内容一起形成代码元素；所以我们可以说：元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

元素结构：<开始标签>元素内容</结束标签>

2、元素注意事项

1、元素名称不区分大小写；一般来说，使用小写字符。

2、<code>web</code>，code是代码标签，是语义元素的示例。

3、什么是空元素？

空元素（void element）的定义：有一些元素必须使用单个标签表示，这些被称为空元素。

语义元素允许我们定义内容的意义以及内容的不同部分之间的关系。

例如，我们常用的<hr>标签，是一个分组元素，用于表示一个段落级别的内容。

代码如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>空元素</title>
 6 </head>
 7 <body>
 8     I like html.
 9     <hr>
10     I like Css
11 </body>
12 </html>

View Code

浏览器上显示效果如下：

1、理解&lthr&gt和&lthr/&gt的差别？

Q：由上图我们会疑问，标签<hr>和<hr/>有什么差别？

A：在早期发布的html规范中， <hr><img>等标记元素是无需“封闭

自身”的，这就造成了html规范本身的不严谨，所以后来参考了更规范的XML语言的语法推出了xhtml。

在xhml中所有空元素都需要自行封闭，例如 。从逻辑上讲， = ...。这样做的目的是为了尽量减少网页的代码量，同时保持逻辑严谨。

4、何为分组元素？

分组元素特点：文本都会换行显示，与其他文本分开，这就是所谓分组的含义。

5、分组元素解析

1、span标签

①内联元素；②宽度是自适应；（注意：直接设置width宽度是不起作用的。）

代码片段如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>span标签:内联元素</title>
 6 </head>
 7 <body>
 8     <span>scolia<span>scolia</span></span>
 9     <span>scolia</span>
10     <span>scolia</span>
11 </body>
12 </html>

View Code

显示效果：

小结：第一行嵌套或是没嵌套，我们可以从显示效果发现两个元素的文本内容是无缝连接的。

第二行，第三行的元素的文本是跟第一行代码同行显示，不过三个元素之间用空格隔开。

如果要指定span的宽度，那就需要将span设成display:block。

如果给span设置position:absolute或是float，那span的display属性就自动变成block状态。当然，就可以指定width宽度了。

如果css里面absolute/float和display:block同时出现，那display:block就是多余的css代码了。

2、div标签

代码片段如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>div标签:块元素</title>
 6 </head>
 7 <body>
 8     <div>scolia<div>scolia</div></div>
 9     <div>scolia</div>
10     <div>scolia</div>
11 </body>
12 </html>

View Code

显示效果：

小结：由代码显示的效果可以看出，不论是嵌套还是独立，元素的文本内容都是换行显示，与其他的文本分开，这就是分组标签的状态。

3、常用分组标签分类

那么，我们来看一看，常用的分组标签有哪些呢？

4、分组标签解析

1、建立段落
代码片段：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>p标签</title>
 6 </head>
 7 <body>
 8     <p>这是一个段落</p>
 9     <p>这又是一个段落</p>
10 </body>
11 </html>

View Code

解释：元素的实际作用就是将内部包含的文本形成一个段落，而段落和段落之间保持一定量的空隙。

2、<div>通用分组

代码片段

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>div标签</title>
 6 </head>
 7 <body>
 8     <div>这是一个div块</div>
 9     <div>这又是一个div块</div>
10 </body>
11 </html>

View Code

显示效果：

解析：通过div这种一般性分组元素进行布局。和段落的区别就是，两段文本的上下空隙是没有的，空隙间隔和 换行一样。

3、<blockquote>引用大段内容

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>blockqu</title>
 6 </head>
 7 <body>
 8     <blockquote>这是一大段引用内容</blockquote>
 9     <blockquote>这又是一大段引用内容</blockquote>
10 </body>
11 </html>

View Code

解析：<blockquote>元素实际作用除了和元素一样，有段落空隙的功能，不包含了首尾缩进的功能。语义上表示，大段的引用他出内容。

4、<pre>展现格式化内容

代码片段：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>pre标签</title>
 6 </head>
 7 <body>
 8     <pre>
 9         ######
10             ######
11                 ######
12             ######
13         ######
14     </pre>
15 </body>
16 </html>

View Code

解析：<pre>元素实际作用就是编辑器怎么排版的，浏览器就原封不动的展现出来。当然，这种只适合简单的排版，复杂的排版就无法满足需求了。

5、<hr>添加分隔线

代码片段：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>hr标签</title>
 6 </head>
 7 <body>
 8     Hello
 9     <hr>
10     World
11 </body>
12 </html>

View Code

解析：<hr>元素实际作用就是添加一条分割线，意图呈现上下文主题的分割。

6、<ol><li>有序列表
代码片段：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>ol li有序列表</title>
 6 </head>
 7 <body>
 8     <ol>
 9         <li>张三</li>
10         <li>李四</li>
11         <li>王五</li>
12         <li>赵六</li>
13     </ol>
14 </body>
15 </html>

View Code

显示效果：

解析：<ol>元素表示有序列表，而<li>元素则是内部的列表项。

7、<ol>三种属性状态

<ol>目前支持三种属性。

下面我们一个一个的演示一下：

1、start属性

当设置属性名称start的值的效果：表示从第几个序列开始统计。

代码片段：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>ol li有序列表</title>
 6 </head>
 7 <body>
 8     <ol start="3">
 9         <li>张三</li>
10         <li>李四</li>
11         <li>王五</li>
12         <li>赵六</li>
13     </ol>
14 </body>
15 </html>

View Code

显示效果：

2、reversed属性

作用是：是否倒序排列。

代码片段：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>ol li有序列表</title>
 6 </head>
 7 <body>
 8     <ol reversed="">
 9         <li>张三</li>
10         <li>李四</li>
11         <li>王五</li>
12         <li>赵六</li>
13     </ol>
14 </body>
15 </html>

View Code

显示效果：

3、type属性

type属性：表示列表的编号类型，值分别为：1、a、A、i、I

以下分别演示一下效果：

①当type=1时，代码片段如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>ol li有序列表</title>
 6 </head>
 7 <body>
 8     <ol type="1">
 9         <li>张三</li>
10         <li>李四</li>
11         <li>王五</li>
12         <li>赵六</li>
13     </ol>
14 </body>
15 </html>

View Code

显示效果：

②当type=a时，代码片段如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>ol li有序列表</title>
 6 </head>
 7 <body>
 8     <ol type="a">
 9         <li>张三</li>
10         <li>李四</li>
11         <li>王五</li>
12         <li>赵六</li>
13     </ol>
14 </body>
15 </html>

View Code

显示效果：

③当type=A时，代码片段如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ol li有序列表</title>
</head>
<body>
    <ol type="A">
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
        <li>赵六</li>
    </ol>
</body>
</html>

View Code

显示效果：

④当type=i时，代码片段如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>ol li有序列表</title>
 6 </head>
 7 <body>
 8     <ol type="i">
 9         <li>张三</li>
10         <li>李四</li>
11         <li>王五</li>
12         <li>赵六</li>
13     </ol>
14 </body>
15 </html>

View Code

显示效果：

⑤当type=I时，代码片段如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>ol li有序列表</title>
 6 </head>
 7 <body>
 8     <ol type="I">
 9         <li>张三</li>
10         <li>李四</li>
11         <li>王五</li>
12         <li>赵六</li>
13     </ol>
14 </body>
15 </html>

View Code

显示效果：

8、<li>属性状态

使用value，可以强行设置某个项目的编号。

代码片段：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>ol li有序列表</title>
 6 </head>
 7 <body>
 8     <ol>
 9         <li>张三</li>
10         <li>李四</li>
11         <li>王五</li>
12         <li value="7">赵六</li>
13     </ol>
14 </body>
15 </html>

View Code

小结：由上可以看出，列表项“张六”的值的编号被强行改成了7。

9、<dl><dt><dd>生成说明列表
代码片段：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>dl dt dd说明列表</title>
 6 </head>
 7 <body>
 8     <dl>
 9         <dt>这是一件文件</dt>
10         <dd>这里是这份文件的详细内容 1</dd>
11         <dd>这里是这份文件的详细内容 2</dd>
12     </dl>
13 </body>
14 </html>

View Code

显示效果：

解析：<dl>标签定义了定义列表（definition list）。

<dl> 标签用于结合 <dt> （定义列表中的项目）和 <dd> （描述列表中的项目）。

dl、dt、dd此组合标签，我们也叫表格标签，也叫做dl表格。

需要注意的是，dt、dd是放于dl标签内部的，其中dt、dd是同级标签。

同时，dt、dd不必同时出现，但是一定需要依赖于dl标签。

下面，我们来具体再看一个例子。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>dl dt dd说明列表</title>
 6 </head>
 7 <body>
 8     <h3>一个定义列表</h3>
 9     <dl>
10         <dt>百度</dt>
11         <dd>http://www.baidu.com</dd>
12         <dt>谷歌</dt>
13         <dd>http://www.google.com</dd>
14     </dl>
15 </body>
16 </html>

View Code

显示效果：

10、<figure><figcaption>使用插图
代码片断：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>使用插图</title>
 6 </head>
 7 <body>
 8     <figure>
 9         <figcaption>这是一张图</figcaption>
10         <img src="image/baidu.jpg" alt="">
11     </figure>
12 </body>
13 </html>

View Code

显示效果：

posted @ 2017-09-25 18:05 云帆济海2017 阅读(215) 评论(0) 编辑收藏举报

刷新页面返回顶部

云帆济海2017

千里之行，始于足下！

HTML基本概念学习

一、HTML的概念

二、HTML发展史

三、HTML结构

四、HTML注释

五、HTML元素

1、什么是元素？

2、元素注意事项

3、什么是空元素？

1、理解&lthr&gt和&lthr/&gt的差别？

4、何为分组元素？

5、分组元素解析

1、span标签

2、div标签

3、常用分组标签分类

4、分组标签解析

公告