快速学会HTML第一天:认识HTML,常用的HTML标记

2017-01-26 23:54 阅读 2,231 次 评论 0 条

快速学会HTML第一天:认识HTML,常用的HTML标记
学会新事物往往都是开始时很好奇,关键在于坚持。就想做网站一样,搭建网站很容易关键是在于怎么把排名做上去,怎么增加浏览量。
一. HTML简介
1. HTML是什么?
HTML指的是超文本标记语言(Hyper Text Markup Language),
HTML 不是一种编程语言,而是一种标记语言,
标记语言是一套标记标签
HTML 使用标记标签来描述网页

2. HTML标签
HTML标签是由尖括号包围,如 HTML 标签通常是成对出现的,也有少数的单标签,如标签对中的第一个标签是开始标签,第二个标签是结束标签,也被称为开放标签和闭合标签 3. HTML文档 HTML 文档描述网页,HTML文档 = 网页 HTML 文档包含 HTML 标记和纯文本 4. HTML历史 HTML 1.0——1993年6月互联网工程工作小组(IETF)发布 HTML 2.0——1995年11月发布 HTML 3.2——1996年1月W3C推荐标准 HTML 4.0——1997年12月W3C推荐标准 HTML 4.01——1999年12月W3C推荐标准 HTML 5.0——2008年8月W3C工作草案推荐标准

5. HTML特点
HTML稳定容易创建,用文本编辑器就可以,(对软件没多高的要求)
HTML文件存储量小,容易传输和显示
HTML的平台无关性,只要一个浏览器就可以阅读
HTML容易学习,不需要很深的编程知识
HTML可扩展性强
二. HTML的基本标记
1. HTML文档基础3元素
元素定义文档信息 定义各项申明和文档头部信息
定义文档主体
2. HTML头部标记head
语法:......
说明:元素中可以有元信息定义、文档样式定义、文档脚本定义等信息,定义在头部标记中的内容往往不会在网页上直接显示
3. 标题标记title
语法:......
说明:页面的标题只有一个,它位于页面的头部标记内
4. 元信息标记:
1) 页面文字和语言
语法:
说明:http-equiv用于传送HTTP协议的标头,而在content中是具体的属性值,charset用来设置网页的内码语系,也就是字符集的类型。
2) 关键词
语法:
说明:设置页面的关键词,如果多个关键词,就用半角逗号隔开
关键词选择技巧:(这个很重要,先记忆,以后再理解)
选择与网站或页面主题相关的的关键词;
选择细分的关键词,不要用行业或笼统的词汇;
根据用户搜索习惯制定关键词;
如果是网站首页页面,设置1-3个关键词,栏目页可选择长尾词做关键词等。
3) 页面描述
语法:
说明:设置页面的说明,一般带有关键词、公司名称,保持语句通顺,和主题的相关性。
4) 作者设置
语法:
说明:设置网页作者信息
5) 页面定时跳转
语法:
说明:在我们预览网页的时候经常会遇到一些欢迎信息的页面,然后过一段时间会跳转到目标页面,上面的数字20是跳转的时间,单位秒,url后的地址就是我们跳转的页面地址。
6) 调用文档样式表
语法: 说明:用来调用文档外部样式表,href定义的是样式表的地址和名称
7) 调用脚本样式
语法:
说明:用于调用外部的脚本,src定义脚本的地址和名称

5. HTML主体标记body
语法:...内容...
网页的主体部分包括浏览器中显示处理的所有的信息。
主体标记中包括了很多属性值,如网页背景设置、文字设置、链接设置等等。
在这里我就不做更多的介绍了,因为现在很多的网页工程师都是把属性设置在css样式中!
6. HTML页面注释标记
语法:
注释是在HTML代码中插入的描述文本,用来解释该代码或提示其他信息
注释只出现在代码中,不会显示在浏览器中
对于日后的维护和修改有很大的好处,再者,其他设计者很容易的读懂我们编写的内容。
注意:在编辑代码的过程中,多做注释是很要必要的,这是一个好的习惯。
7. DOCTYPE声明是HTML文档必不可少元素
在HTML文档中声明是很有必要的,这样的话我们就告诉了浏览器当前浏览的文档是什么类型的,声明必须放在HTML文档的第一行,当浏览器检测到DOCTYPE后就会转换到标准模式。
而不同版本的HTML文档,对声明的要求也略显不同,下面我们就做个HTML4.01和5.0的比较,而老的版本我们完全可以用4.01的声明方式。
HTML4.01的声明方式:

HTML5的声明方式:
<!doctype html>
显然HTML5的声明简单了很多,而目前大部分的浏览器都已经支持了HTML5文档的解析、读取。
我们也可以在Dreamweaver中新建HTML文档时选择版本而看一下各版本之间的DOCTYPE声明的不同。

三. 文字标记
1. 标题标记
包括:

语法:<h?>......
主要是突出标题的重要性,其中

最高,其表现的字体也最大,而

最小
2. 文本的基本标记
在HTML4中已不赞成使用,在HTML5中将被淘汰
3. 文本格式化标记
1) 粗体标记
粗体标记:
:粗体效果;如果只是用此标签单纯的改变文字的样式,建议使用css样式表
:除了显示粗体效果,重要的是有强调的作用
语法:需要粗体显示的内容
标签语法同strong标签,不赞成使用)
2) 斜体标记
斜体标记:
文字以斜体呈现在浏览器中
文字以斜体呈现,并有强调的语义
文字以斜体呈现,定义引用的语义
语法:需要斜体显示的内容语法同em标签)
3) 上标标记
上标标记
语法:...
举例:a2+b2=(a+b)2-2ab
4) 下标标记
下标标记
语法:...
举例:H2SO4 硫酸的化学方程式
5) 其他在HTML5中将淘汰的标记,如
大字号标记、小字号标记、下划线标记等标记在HTML5中将相继被淘汰。
四. 段落标记
1. 段落标记
语法:

段落文字

说明:每一个

标记会形成独立的段落。
2. 换行标记
语法:
说明:一个
标记代表一个换行,可以连续多个标记实现多次换行的效果。
3. 水平线


在HTML中不赞成使用,所以不做更多的介绍。
五. 特殊符号
1.插入空格
2.其他特殊符号,可百度查询,不要求记忆,有次概念就好。
六. 图像标记
1. 图像的格式
3种常用网页图像格式:GIF格式、JPEG格式、PNG格式
2. 图像标记img
语法:img src="图片路径" width="宽度" height="高度" alt="图像描述" /
3. 图像的常用属性
src属性:定义图像的地址
图像的宽高:width(图像宽度)、height(图像高度)
图像的alt属性:定义图像的文字描述,一般不显示在网页,只有在加载图片失败的情况下,代替图片位置 (在SEO中这个是很重要的,所以尽量图片都要添加alt属性)
图像的边框border:定义图像边框的大小,不可设置边框颜色,而要设置边框颜色,必须通过css给其定义。
4. 图像的链接
语法:
说明:图像链接和文字链接一样,所以在其他的链接上就不再做任何示范
5. 图像的热区链接
语法:

............

 

 

 

 

 

 

 

说明:
中的 usemap 属性可引用

中的id或name 属性(取决于浏览器),所以我们应同时向

添加 id 和 name 属性

shape的属性值以及对应的coords属性值如下表
shape属性值 coords属性值 描述default 默认值
rect(矩形区域) x1,y1,x2,y2
x1,y1是矩形左上角的坐标,x2,y2是矩形右下角的坐标circle(圆形区域) x,y,z
x,y定义圆心坐标,z定义圆的半径
poly(多边形区域) x1,y1,x2,y2...
Xn,yn x1,y1是多边形第一个角的坐标,以此类推,最后一个坐标应该和第一个坐标一致七. 列表标记
1. 有序列表
语法:

    1. ......
    2. ......

.........

说明:
type的属性值:1(列表项呈现1,2,3...)、a(呈现a,b,c...)、A(呈现A,B,C...)、i(呈现i,ii,iii,iv...)、I(呈现I,II,III,IV...)
start属性值是数字;如是4,type属性值是1,则列表项呈现4,5,6,7...type属性值是a,则呈现d,e,f,g,h...等
2. 无序列表
语法:

    • ......
    • ......
    • ......

..........

说明:
无序列表的type常用属性值:disc(默认值,黑色实心圆点)、circle(空心圆)、square(正方形)等等
3. 定义列表
语法:

定义条件
定义描述

.............

总结:列表标记在网页中应用是很广泛的,但其本身的含义就这么简单,只是我们要学会融会贯通,知道如何搭配、组合的使用。

八. 表格标记
1. 表格的基本语法

..............
..............
.............

..... ......
...... ......

2. 表格的属性
表格的属性很多,但在HTML5中限制了很多表格的属性,因此我们下面都是以HTML5为基础,介绍其属性
1)

:在 HTML5中,不支持标签的任何属性 2):如何使用了这些标记,就必须使用全部的元素,它们内部必须含有标签;HTML5不支持它们任何属性 3)caption:在HTML5中不支持该标签,可用css代替 4):在HTML5中不支持任何属性 5)

:在HTML5中仅支持 标签的colspan、rowspan、scope3个属性
6):在HTML5中仅支持标签的colspan、rowspan2个属性
属性 属性值 描述
colspan 数值 规定此单元格可横跨的列数
rowspan 数值 规定此单元格可横跨的行数
scope col
包含单元格列的其他部分
row 包含单元格行的其他部分

 

 

要想快速学会HTML,不多动手练习是不行,俗话说好记忆,不如烂笔头。对于我网站搭建的SEO网站优化而已,好记忆不如勤动手试着去练习。加油!

下次继续更新第二天常用的HTML标记(二)学习

 

 

 

 

版权声明:本文著作权归原作者所有,欢迎分享本文,谢谢支持!
转载请注明:快速学会HTML第一天:认识HTML,常用的HTML标记 | 淮安SEO杨大伟博客—专注网站搭建SEO网站优化服务互动营销知识

发表评论


表情