HTML,HyperText Markup Language,超文本标记语言。
CSS,负责页面的装修。
JavaScript,动态的人机交互。
根标签,结构化标签。
每个标签都可以添加属性,属性名不需要添加双引号,但是属性值必须添加双引号,二者采用等号连接;如下面字符集设置;
<head>标签,以人类比,就好比人的思想一样,里面内容是给浏览器看的,如编码字符集等,是用户里面看不到的,设置浏览器等;
<
head
>
<
meta
charset=
"UTF-8"
>
<!--给浏览器设置编码字符集 -->
<
meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
<
meta
http-equiv=
"X-UA-Compatible"
content=
"ie=edge"
>
<
meta
content=
"这是一件你穿了就不想脱的衣服"
name=
"description"
>
<
title
>淘宝网,淘,我喜欢!
</
title
>
<!--设置浏览器标签名称 -->
</
head
>
GB2312,包含中国的字符集,泰国、韩国等亚裔字符集,但是有不足之处,只能识别简体中文字符集,无法识别繁体字符集;
GBK2312,国家编码字符集扩展版本;
真正常用的是如下两个:unicode编码,万国码;utf-8,其是unicode编码的升级版;
专业素养知识:<thml lang = 'en'>这个属性是告诉搜索引擎爬虫,这个网站是关于什么内容的;en代表内容是英文的,中文是zh;
课外知识:百度,根据网站关键字进行搜索、查询、抓取出来显示;关键字协议,一般五个以内;百度采取“竞价排名”的方式,百度的第二页基本没人看,所以也基本不要钱;竞价排名系统的收费范围是1~999元,挣钱就靠700+以上的,高转换率行业给的,医院,如妇产科、男科、整容整形等的竞价排名费是最贵的;同一个时间段内同一个ip地址多次访问,只算一次;百度大脑,生物行为是否是恶意的,不符合正常浏览网页的生物行为,停留、考虑多长时间等;
SEO,周所周知的秘密,lang属性就属于SEO技术中的一部分;再比如,content属性等;
<body>标签里面的东西是展示给用户看的,类似于皮肤,身体一样的东西。
<
html
lang=
"en"
>
<
head
>
<
meta
charset=
"UTF-8"
>
<
meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
<
meta
http-equiv=
"X-UA-Compatible"
content=
"ie=edge"
>
<
meta
content =
"这是一件你穿了就不想脱的衣服"
name =
"description"
>
<
title
>淘宝网,淘,我喜欢!
</
title
>
</
head
>
<
body
>
</
body
>
</
html
>
<p></p>是paragraph标签,是文本成段落先显示;
<h1></h1>到<h6></h6>标签,标题标签;快捷输入方法为h${标题}*6;有三个特征:独成一段;更改字体大小;加粗字体;
<strong></strong>标签,是字体加粗展示;
<em></em>标签,是字体斜体展示;
如何将一段文字又加粗又斜体?
采用标签嵌套的方式来解决,示例源码如下:
<!DOCTYPE html
>
<
html
lang=
"en"
>
<
head
>
<
meta
charset=
"UTF-8"
>
<
meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
<
meta
http-equiv=
"X-UA-Compatible"
content=
"ie=edge"
>
<
meta
content=
"这是一件你穿了就不想脱的衣服"
name=
"description"
>
<
title
>淘宝网,淘,我喜欢!
</
title
>
</
head
>
<
body
>
<
strong
>
<
em
>举个栗子
</
em
>
</
strong
>
</
body
>
</
html
>
<del></del>标签,有中划线的标签,示例源码如下::
<!DOCTYPE html
>
<
html
lang=
"en"
>
<
head
>
<
meta
charset=
"UTF-8"
>
<
meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
<
meta
http-equiv=
"X-UA-Compatible"
content=
"ie=edge"
>
<
meta
content=
"这是一件你穿了就不想脱的衣服"
name=
"description"
>
<
title
>淘宝网,淘,我喜欢!
</
title
>
</
head
>
<
body
>
<
del
style =
"color:#999"
>$50
</
del
>
</
body
>
</
html
>
这里加入了CSS行间样式代码,其实style也是<del>标签的一个属性,其值为“color:#999”;
<address></address>标签,用来填写显示地址信息,显示效果为独立成段落,斜体显示;实际应用中,地址展示也不是这样展示的,基本都是后期采用CSS进行修改。简单应用示例源码如下:
<!DOCTYPE html
>
<
html
lang=
"en"
>
<
head
>
<
meta
charset=
"UTF-8"
>
<
meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
<
meta
http-equiv=
"X-UA-Compatible"
content=
"ie=edge"
>
<
meta
content=
"这是一件你穿了就不想脱的衣服"
name=
"description"
>
<
title
>淘宝网,淘,我喜欢!
</
title
>
</
head
>
<
body
>
<
address
>新疆昌吉市健康西路御景社区,web coffee
</
address
>
</
body
>
</
html
>
该标签在实际企业开发中一个用比较少,原因之一就是可以采用常用标签来模拟表示,示例源码如下:
<!DOCTYPE html
>
<
html
lang=
"en"
>
<
head
>
<
meta
charset=
"UTF-8"
>
<!--给浏览器设置编码字符集 -->
<
meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
<
meta
http-equiv=
"X-UA-Compatible"
content=
"ie=edge"
>
<
meta
content=
"这是一件你穿了就不想脱的衣服"
name=
"description"
>
<
title
>淘宝网,淘,我喜欢!
</
title
>
<!--设置浏览器标签名称 -->
</
head
>
<
body
>
<
p
>
<
em
>新疆昌吉市健康西路御景社区,web coffee
</
em
>
</
p
>
</
body
>
</
html
>
<div></div>与<span></span>标签,最重要的两个标签,这二者的区别仅仅在于<div></div>标签显示文本会独立成段显示,而<span></span>标签不会分段显示;在实际应用编程中,基本上在100行代码中有50行代码都是;这两个标签没有什么具体的作用,但是充当非常好的“容器”作用,这个“容器”有下述作用,1.分块明确,划分功能块,划分区间,页面更加结构化,更方便,更规整化,目的好维护,好管理;2.捆绑操作;
<!DOCTYPE html
>
<
html
lang=
"en"
>
<
head
>
<
meta
charset=
"UTF-8"
>
<
meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
<
meta
http-equiv=
"X-UA-Compatible"
content=
"ie=edge"
>
<
meta
content=
"这是一件你穿了就不想脱的衣服"
name=
"description"
>
<
title
>淘宝网,淘,我喜欢!
</
title
>
</
head
>
<
body
>
<!-- <span style="color:#f40">a</span>
<em style="color:#f40">b</em>
<del style="color:#f40">c</del> -->
<!-- 采用捆绑操作后,可采用如下的方式进行编码: -->
<
div
style=
"color:#f40"
>
<
span
>a
</
span
>
<
em
>b
</
em
>
<
del
>c
</
del
>
</
div
>
</
body
>
</
html
>