【web】basic HTML（1）

来源：互联网发布：dijkstra算法求解过程编辑：程序博客网时间：2024/05/17 08:00

1、介绍

HTML、CSS、JavaScript可以说是学习web的三门最基础的语言。是我们进入web世界的初始技能。

下面先分别介绍他们再说说他们之间的关系

1）、什么是HTML

HTML是Hypertext Markup Language超文本标记语言的英文缩写。
HTML 不是一种编程语言，而是一种标记语言 (markup language)。
web开发者使用HTML的一系列标签来描述网页。

2）、什么是CSS

CSS是Cascading Style Sheets指层叠样式表的英文缩写。
web开发者用CSS定义如何显示 HTML 元素。

3）、什么是JavaScript

JavaScript 是世界上最流行的脚本语言。
JavaScript 被设计为向 HTML 页面增加交互性。

4）、联系

总的来说最基本的是HTML，它首先定义了一个网页最基本的东西——网页的结构和内容，相当于一个人的骨架和组成部分；而CSS定义样式，即实现HTML元素的不同的外观，大小等，相当于决定一个人的外貌；JS则是保证了网页的交互性，相当于一个人与外界交际一样。

一般的文件组织形式是，html文件仅仅写最简单的结构和内容元素，元素的所有样式都写在CSS文件文件中。这样做的目的是为了让内容与表现分离，极大提高工作效率。

很明显，CSS和JS是基于HTML的，因此说最基本的是HTML。

本文先讲一讲部分基本的HTML元素,内容可能有点散，请见谅！

2、basic HTML

html语言是一系列标签组成的，他们的基本语法是

<element> content </element>

其中<element>标签标示一个元素的开始，</element>标签标示一个元素的结束。

目前，一般的html文件在首行必须加上<!DOCTYPE html>，代表它兼容HTML5及之前更早的版本

正式的HTML文件的开始是包含在标签<html></html>之中的。

在标签<html></html>之下又有几种标签，一个是<head></head>标签，它表示原信息，即用来说明信息的信息，比如网页的标题。
另一个是<body></ body>标签，网页中可见的部分都是放在<body>标签里面的。
大概如下：

<!DOCTYPE html><html>    <head>        information about the page    </head>    <body>        page contents    </body></html>

1）、关于标签的一些点

（1）、block元素和inline元素

一些标签如<p>、<div>、<ul>等是块级(block)元素，在HTML中，块级元素会占用满至少一行，就算它的内容一行不到。并且两个块级元素之间通常会间隔一空行。

而另一些标签如<br />、<img />、<a>则是inline元素，它可以跟其他元素一起分享同一行，如

<p>this is<br /> some text</p>

当然，inline元素的这个特点也意味着他不能单独出现，他总是伴随着块级元素出现的。

（2）、attributes属性

一些标签可以包括一个或者多个属性attributes：

<element attribute1="value1" attribut2="vaule2">content</element>

（3）、注意

对于inline标签，一个标签的开始必须在前一个标签结束后，不能在一个inline标签结束前开始另一个新的inline标签！

2）、`<title>`标签

<title>顾名思义，定义当前网页的名字。<title>标签放在<head>标签之中。

3）、`<meta>`标签

<meta>元素可提供有关某个 HTML 元素的元信息 (meta-information)，比如描述、针对搜索引擎的关键词以及刷新频率。下面是一个例子

<meta http-equiv="Content-Type" content="text/html; charset=gbk" />

<meta>标签有name、http-equiv、content等属性；
name的值可以是author、description、keywords、generator和revised等内容
http-equiv可以是content-type、有效期expires、刷新频率refresh等
用什么编码的可以写在content中。

4）、`<p>`标签

<p>既是Paragraph的首字母，很明显，是一个文字标签。网页中最基本的段落就是在这里面。

5）、`<h1>, <h2>, …<h5>,<h6>`标签

他们是Headings的缩写，定义6中等级不同的标题（注意是逻辑上的等级大小，而不是外观上的形状大小，虽然1到6的文字大小的确不一样）

6）、`<br />`标签

用于另起一行。

7）、`<hr />`标签

定义一条水平线。

8）、`<a>`标签

<a>标签定义一个连接，如：

<a href=“http://www.baidu.com/”>

a标签是一个inline元素。
href是a标签的一个属性，后面是它的值，使用URL作为它的值，可以使用相对路径或者绝对路径。

9）、`<img>`标签

<img>定义一个图像，如：

<img src="imges.jpg" alt="a imges" />

<img>的两个基本的必要的属性是src和alt，src表明图片的出处；alt是当图片因某些问题加载不出来的时候，会显示alt的值代替img的显示。
<img>是一个inline元素。

10）、`<em>和<strong>`标签

这两个标签出现在<p>标签中，分别用于实现文字的斜体和加粗。

11）、`<ul>, <li>`标签

<ul>, <li>是无序表标签，均为块级元素。
首先，<ul>定义一个无序表，表中的每一项都由<li>定义，如：

<ul>    <li>first</li>    <li>second</li>    <li>third</li></ul>

12）、`<ol>，<li>`标签

<ol>标签定义有序表，用法与ul标签相同，也是块级元素。

13）、``标签

写注释的标签，写在--之间
P.S.列表之中又可以包含列表。

14）、表格标签：

`<table>`

定义整个表格

`<tr>`

定义表格每行的元素

`<caption>`

定义表格的标题

`<th>`

表格属性的说明

`<td>`

表格每行中的每个具体元素

<table>    <caption>new student</caption>    <tr><th>name</th><th>gender</th></tr>    <tr><td>barry</td><td>male</td></tr>    <tr><td>Iris</td><td>female</td></tr></table>

15）、`<dl>, <dt>, <dd>`

<dl>, <dt>, <dd>用于定义定义列表。
<dl>表示定义列表的开始。<dt>表示要定义的名称；<dd>表示对其的定义；
如：

<dl>   <dt>计算机</dt>   <dd>用来计算的仪器 ... ...</dd>   <dt>显示器</dt>   <dd>以视觉方式显示信息的装置 ... ...</dd></dl>

16）、引用标签

`<blockquote>`

用于定义长引用。

`<q>`

inline标签，显示效果是双引号。

17）、如何显示代码

<code>标签和<pre>标签
一般地，<code>标签用于短的代码的显示，<pre>标签用于长的代码的显示。
他们不会忽略多余的空格，而是原原本本地呈现出来，并且每个字母的宽度相同，使得代码可以对齐起来。

0 0

【web】basic HTML（1）

1、介绍

1）、什么是HTML

2）、什么是CSS

3）、什么是JavaScript

4）、联系

2、basic HTML

1）、关于标签的一些点

（1）、block元素和inline元素

（2）、attributes属性

（3）、注意

2）、<title>标签

3）、<meta>标签

4）、<p>标签

5）、<h1>, <h2>, …<h5>,<h6>标签

6）、<br />标签

7）、<hr />标签

8）、<a>标签

9）、<img>标签

10）、<em>和<strong>标签

11）、<ul>, <li>标签

12）、<ol>，<li>标签

13）、标签