您的位置：首页 > Web前端 > HTML

HTML快速入门、文本

2016-07-15 23:10 417 查看

1、HTML 入门

1、什么是HTML

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

超文本:

a

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

<a>

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

HTML最终由浏览器负责解释

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

2、标签(标记)

1、标签语法

1、必须使用尖括号扩起来
<a>,<div> ...
<A>,<a>
2、有封闭类型的标签，也有非封闭类型的标签
1、封闭类型
也称作双标记，则必须成对出现
<标记>文本内容</标记>
不同的标记，决定了"文本内容"的不同表现形式
eg:<a></a>,<p></p>,<div></div>
2、非封闭类型
也称作单标记、空标记
<标记>
或者
<标记/>
eg:
<hr>,<br>,<img>
3、元素
标记就是元素，元素也称为标记
4、元素嵌套(标签嵌套)
标签之间相互嵌套，形成复杂的语法结构
<body>
<p>
<a></a>
</p>
</body>
5、属性
属性是出现在开始标记中的内容,作用是修饰元素
<p 属性名="属性值"></p>
<p 属性名='属性值'></p>
<p 属性名=属性值></p>
标准属性:每个元素都会具备的通用属性
id : 定义每个标签的唯一标识
title:提示文本
class:样式相关，类样式
style:样式相关，行内样式
操作1：定义一对p标签，id属性设置为program
<p id="program"></p>
多属性:
<p 属性1="值" 属性2="值"></p>
注意：多属性之间，排名不分先后

3、创建HTML文档

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

EditPlus ：超级记事本

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

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

超文本文件(HTML文档):

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

4、文档结构

1、文档类型声明

声明使用的html版本和风格

<!doctype html>

2、html页面

1、文档根元素

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

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

1、head : 页面的头部内容
定义页面全局信息
包含:
<title></title> : 网页标题
<meta />:声明元数据(编码,关键字,描述)
<style></style>:声明内部样式表
<link />:引入外部样式表
<script></script>:定义或引入脚本文件

2、body : 页面的主体内容
任何一个标签，都可能会出现在body中

3、head元素

1、声明网页标题
<title></title>
2、定义网页文本编码格式

默认:ISO-8859-1,只支持英文以及英文状态下的标点符号
utf-8:支持中英文,标点符号
<meta charset="utf-8" />
3、... ...
4、body元素

属性:
text : 文本的颜色
bgcolor : 背景颜色

5、文本标记

1、特殊的文本

转义字符:

空格:

< : < less than

> : > greater than

版权标识:©

2、文本标记

1、文本样式

<b>...</b> : 加粗文本
<i>...</i> : 斜体文本
<u>...</u> : 下划线
<s>...</s> : 删除线
<sup>...</sup> : 上标
<sub>...</sub> : 下标

2、标题元素

1-6级6个标题
<hn></hn> n:1-6
一级最大
六级最小

3、段落元素

提供了结构化文本的表现方式
语法:<p></p>
注意：
1、每对p标签单独成一个段落
2、段落与其他元素有垂直空白，段落间距
常用属性:
align : 水平对齐方式
取值:left center right

4、换行元素

在代码的任何位置处，实现回车的效果
<br />

5、水平线

又叫分割线
<hr />
属性:
1、size : 水平线的粗细，通常以像素(px)为单位
  2、width: 宽度
  3、align: 水平线的水平对齐方式
  4、color: 颜色

6、分区元素

目的：为元素进行分组，多数用在布局中
块分区元素:<div></div> 层
行内分区元素:<span></span>
注意：
div ：主要用在布局上
span：修改其内部内容的样式

7、预格式化

保留源文档中的空格和回车
<pre>
文本内容
</pre>

3、注释

可以写在html源码中，但不被浏览器解释的文本

语法:



4、行内元素与块级元素

块级元素:默认情况下，块级元素独占一行，元素的前后都会自动换行 div,hn,hr,p

块级元素作用:布局

行内元素:默认情况，多个元素位于同一行，不会换行

span,文本标记... ...

行内元素作用:修改内部内容的样式

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

HTML快速入门 、 文本

HTML快速入门、文本