HTML简介
HTML(Hyper Text Mark-up Language 超文本标记语言)的缩写,标记:就是用来描述网页内容的一些特定符号。HTML不是编程语言,而是一种描述性的标记语言,用于描述网页中内容的显示方式,比如文字以什么颜色、什么大小来显示,这些都是利用HTML标记来实现。
使用Sublime Text编写;学习别人写的模板。
HTML标记的语法:
<标记符>内容</标记符>
单标记:
<标记名称 />
,单一型,无属性值。如<br/>
<标记名称 属性="属性值" />
,单一型,有属性值。 如<hr width="80%" />
双标记:
<标记名称>...</标记名称>
,没有属性值。
<标记名称 属性="属性值">...</标记名称>
,有属性值。
HTML文档结构
通常由四对标记来构成,文档的骨架,四对基本骨架:
<html>
<head>
<title>
标题
</title>
</head>
<body>
正文
</body>
</html>
解释:
<html>......</html>
标识网页文件的开始与结束,所有的html元素都要放在这对标记中。<head>......</head>
标识网页文件的头部信息,如标题、搜索引擎关键字等(头部信息主要给搜索引擎看的或用于网站优化)。<title>......</title>
标识网页文件的标题(标题很重要,因为搜索引擎抓取的第一个就是标题)。<body>......</body>
标识网页文件的主体部分(body主要是针对用户看的)。
Meta标记
meta标记用于定义文件信息,对网页文件进行说明,便于搜索引擎查找。放置<head></head>
之间。
设置关键字:<meta name="keywords" content="value">
多个关键字内容之间可以用,
分隔(value等于你想设置的关键字,如将value替换成“网页设计”),如<meta name="keywords" content="网页设计培训,编程培训">
设置描述:<meta name="description" content="value">,是对关键字进行描述或者对网页的内容进行描述,也是给浏览器或搜索引擎看的。如:<meta name="description" content="北京网页设计培训最便宜的地方,零基础也能当网页设计师">
设置作者:<meta name="author" content="作者名"> 如:<meta name="author" content="传智播客网页设计培训">
设置字符集:<meta http-equiv="content-type" content="text/html;charset=utf-8">
解释:
- http-equiv主要针对http协议的。
- 服务器通过content-type响应头,控制浏览器以哪种方式处理数据。对于以上的设置浏览器将服务器会送过来的数据作为html文档处理。
- charset就是字符集,中文网页国内一般用GBK(GBK是GB2312的一个升级)[国内常用,显示的汉字是2个字节],UTF-8[国标码,国际上常用,显示的汉字是3个字节,会多占一些地方]。
设置页面定时跳转:<meta http-equiv="refresh" content="2;URL=http://www.itcast.cn"/>(2指的是秒数2秒)
网页主体标记body
注释:<!-- 注释内容 -->
body属性:
<body bgcolor="背景颜色" background="背景图片" text="文本颜色" link="连接文本颜色" vlink="访问过的链接文本颜色" alink="激活的链接文本颜色" leftmargin="左边界" rightmargin="右边界" topmargin="上边界" bottommargin="下边界">
示例:
<html>
<head>
<title>网页标题</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
</head>
<body bgcolor="gray" text="white">
<!-- 这是网页主体的开始 -->
轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html轻松学习html
<!-- 这是网页主体的开始 -->
</body>
</html>
字体修饰
<font>
标记语法:<font color="文本颜色" size="字号" face="字体">文本</font>
注意:网页中的文本字体、字号一般通过CSS修饰。
字符格式:
段落控制标记:<p align="对齐方式">...</p>
段落标题:<hx align="对齐方式">...</hx>, x取值[1~6],hx内的文本会自动加粗显示。hx针对的对象是段落,而font针对的对象是任意的文本。
换行:<br/>
水平直线:<hr/>
特殊标记:定义一个块引用,使用文本缩进 <blockquote>......</blockquote>,如<blockquote cite="http://www.flashdream.net"> 1TB以上硬盘容量笔记本 500GB硬盘容量笔记本 相关产品排行 笔记本配件排行 笔记本电池排行 内存排行 无线上网卡排行 台式电脑排行 上网本排行 笔记本电脑新品推荐 惠普15... </blockquote>
居中标记:<center>...</center>,此标记是被废弃的标记。
预格式化:<pre>......</pre>显示已经格式化好的文字。不加此标记的话,HTML浏览器会忽略所有空格和制表符。
特殊字符:
列表标记
无序列表 :
<ul type="项目符号类型">
<li type="项目符号类型">内容1</li>
<li>内容2</li>
...
</ul>
type属性有以下取值
有序列表 :
<ol start="列表起点" type="项目符号类型">
<li>内容1</li>
<li>内容2</li>
...
</ol>
定义列表:
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dd>内容2</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
<dl></dl>
定义列表。 <dt></dt>
表示一个项目。 <dd></dd>
表示一个项目下的更详细的内容的解释。
图片
Web上支持的图片格式:
- GIF(图形交换格式):GIF格式文件最多只能保存256种颜色。该格式支持透明颜色,支持动画效果。
- JPEG(联合图像专家组):该格式不支持透明颜色及动画,颜色可达1670万种。
- PNG(网络可移植格式):该格式支持透明颜色,但不支持动画,颜色从几种至1670万种。
<img src="图片的路径" />
图片路径分为:
绝对路径:提供目标文档的完整主机名称、路径信息及文档全称。
相对路径:从当前文档开始的路径。
根相对路径:从站点根目录开始的路径,以“/”开头。
图片标记属性: