html入门（二）

回复

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

学习网页制作，最基础的就是html语言， HTML(Hyper Text Mark-up Language超文本标记语言)，标记就是用来描述网页内容的一些特定符号，HTML不是编程语言，而是一种描述性的标记语言，用于描述网页中内容的显示方式，比如文字以什么颜色、大小来显示，这些都是利用HTML标记来实现的. HTML文档的创建可以手工直接编写(例如记事本)，还可以通过图形化的HTML开发软件Dreamweaver来编写，下面就是我作为一名初学者的的学习记录。

一.HTML 入门

1、什么是HTML

HTML(Hyper Text Markup Language),超级文本标记语言

超文本:

a

标记 : 超文本都是由标记组成的

<a>

语言 : 包含自己独特的语法

HTML最终由浏览器负责解释

HTML总可以嵌入一些脚本语言编写的程序段:Javascript,VBScript

2、标签(标记)

a、标签语法

1、必须使用尖括号扩起来

<a>,<div> ...

<A>,<a>

b、有封闭类型的标签，也有非封闭类型的标签

1、封闭类型

也称作双标记，则必须成对出现

<标记>文本内容</标记>

不同的标记，决定了"文本内容"的不同表现形式

eg:<a></a>,<p></p>,<div></div>

2、非封闭类型

也称作单标记、空标记

<标记>

或者

<标记/>

eg:

c、元素

标记就是元素，元素也称为标记

d、元素嵌套(标签嵌套)

标签之间相互嵌套，形成复杂的语法结构

<body>

<p>

<a></a>

</p>

</body>

e、属性

属性是出现在开始标记中的内容,作用是修饰元素

标准属性:每个元素都会具备的通用属性

id : 定义每个标签的唯一标识

title:提示文本

class:样式相关，类样式

style:样式相关，行内样式

操作1：定义一对p标签，id属性设置为program

多属性:

注意：多属性之间，排名不分先后

二、创建HTML文档

开发工具:任何一个文字编辑软件都可以开发HTML

EditPlus ：超级记事本

运行环境:任何一个浏览器都能运行HTML

Google Chrome,Mozilla Firefox,Microsoft IE,Safari,Opera

超文本文件(HTML文档):

是一个以.html或.htm结尾的文档

三、文档结构

1、文档类型声明

声明使用的html版本和风格

<!doctype html>

2、html页面

a、文档根元素

每个文档有且仅有一对根元素 , html

b、在根元素的内部，包含两对子元素

1、head : 页面的头部内容

定义页面全局信息

包含:

<title></title> : 网页标题

2、body : 页面的主体内容

任何一个标签，都可能会出现在body中

3、head元素

a、声明网页标题

b、定义网页文本编码格式

默认:ISO-8859-1,只支持英文以及英文状态下的标点符号

utf-8:支持中英文,标点符号

c、... ...

4、body元素

属性:

text : 文本的颜色

bgcolor : 背景颜色

文档格式如下：

<!DOCTYPE html>
<html>
<head>
<title> </title>
<meta meta="utf-8"/>
</head>
<body>
</body>
</html>

复制代码

练习1:

1、为body添加两个属性，text，bgcolor

<!DOCTYPE html>
<html>
<head>
<title>标题</title>
<meta charset=”utf-8”/>
</head>
<body text="#ffffff" bgcolor="#000222">
我爱你中国
</body>
</html>

复制代码

file:///C:UsersADMINI~1AppDataLocalTempksohtmlwps58E7.tmp.png

2、文本颜色 : 红色(red)

背景颜色 : 银色(silver)

<!DOCTYPE html>
<html>
<head>
<title>标题</title>
</head>
<body text="#ff0000” bgcolor="#adadad">
我爱你中国
</body>
</html>
file:///C:UsersADMINI~1AppDataLocalTempksohtmlwps58F8.tmp.png 3、在body中随意写上一段文本，观察页面显示效果四、文本标记 1、特殊的文本转义字符:
空格: < : < less than > : > greater than 版权标识:? 2、文本标记 a、文本样式 <b>...</b> : 加粗文本 <i>...</i> : 斜体文本 <u>...</u> : 下划线 <s>...</s> : 删除线 <sup>...</sup> : 上标 <sub>...</sub> : 下标 b、标题元素 1-6级6个标题 <hn></hn> n=1-6 一级最大六级最小 c、段落元素提供了结构化文本的表现方式语法:<p></p> 注意： 1、每对p标签单独成一个段落 2、段落与其他元素有垂直空白，段落间距常用属性: align : 水平对齐方式取值:left center right d、换行元素： <br /> 在代码的任何位置处，实现回车的效果 e、水平线：<hr /> 又叫分割线属性: 1、size : 水平线的粗细，通常以像素(px)为单位 2、width: 宽度 3、align: 水平线的水平对齐方式 4、color: 颜色 f、分区元素目的：为元素进行分组，多数用在布局中块分区元素:<div></div> 层行内分区元素:<span></span>
注意： div ：主要用在布局上 span：修改其内部内容的样式 g、预格式化保留源文档中的空格和回车 <pre> 文本内容 </pre>3、注释可以写在html源码中，但不被浏览器解释的文本语法:  4、行内元素与块级元素块级元素:默认情况下，块级元素独占一行，元素的前后都会自动换行 div,hn,hr,p 块级元素作用:布局
行内元素:默认情况，多个元素位于同一行，不会换行 span,文本标记... ... 行内元素作用:修改内部内容的样式
<!DOCTYPE html>
<html>
<head>
<title>我的第一个HTML网页</title>
<meta charset="utf-8" />
</head>
<body>
这是一段HTML文本...
<p>?2015 by xxx
<hr />
普通文本
<b>粗体</b>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>
上<sup>标</sup>
下<sub>标</sub>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h6>六级标题</h6>
<p>第一个段落</p>
<p align="center">第<br/>二<br>个<br>段<br>落</p>
<hr size="3px" width="50%" color="green" align="center" />
普通文本
<div>div普通文本</div>
普通文本
<span>普通文本</span>
<pre>
这是一段普通的文本
没有空格的内容
</pre>
</body>
</html>