前端小白学习路线之HTML超文本标记语言

学习一门技术先得了解编辑器,新手推荐使用sublime/VS code (属于轻量级编辑开发工具,插件丰富)。当然你要是选择记事本,我也不拦你。


Html:超级文本标记语言(HyperText Markup Language),在浏览器上运行的一种标记语言

结构(固定的结构):

<html>

<head>

<title>

</title>

</head>

<body>

</body>

</html>

Html中的标签:

标签:用<>”包起来的内容。

Html标签:<html></html>

由于现在学习的html页面还是很简单的,为了能够让页面更加的“充实”我们要学习更多的标签。

 h系列的标签(Header)h1,h2,h3,h4,h5,h6

作用:把页面上的文字加上标题的语义。

代码:

h1,h2,h3,h4,h5,h6:将文字放大,加粗.并且逐渐变小。(h1标签是最大的。)

注意:一个页面只能有一个h1标签。

p标签(Paragraph):段落标签

作用:给页面的上一段文字加上段落的说语义

代码:

<p>这是段落</p>

特点:页面上的一个段落,单独占一行,并且与上下内容之间存在距离。

hr标签(Horizontal Rule)

作用:在页面显示一条横线。

代码:

<hr />

特点:在页面显示一条横线,默认占整行。

br标签(break)

作用:换行。

代码:

<br />

特点:换行。

b(Bold),u(Underlined),i(Italic),s(Strikethrough),strong,em,del,ins

作用:

b:加粗

u: 下划线

i:  倾斜

s: 删除线  

建议不要使用,因为这些标签没有语义。

作用:

strong:加粗

ins:下划线

em:倾斜

del:删除线

可以使用

 img标签(image)

作用:在页面显示一张图片。

代码:

<img src=图片的路径 />

   特点:就是显示图片.

   属性:

alt:如果图片加载不出来会显示这个属性中的文字

title: 介绍这张图片

a标签(Anchor):锚

a标签的其它名称:

超级链接,超链接,锚链接。

作用:可以在一个页面跳转到另一个页面。

代码

<a href=页面的路径></a>

注意:在a标签之内必须要写上文字,如果没有,那么这个标签在页面上找不到。

a标签的其它用法

1.0可以不跳转(跳转到当前页面)href=”#”

2.0可以跳转到另外的页面。

3.0可以在当前页面进行定位。

A.设置a标签的href属性为“#id名”,

B.在页面的指定位置加入一个目标标签(可以是任意标签)

C.必须给这个标签设置一个id名:<p id=”mubiao”>这是目标</p>

 4.0在跳转的页面进行定位。

 5.0可以进行下载。(强烈不推荐使用

a标签的属性

target:

_blank:保留原始页面,再进行跳转

_self:在当前页面进行跳转

base:

为页面上所有的a标签设置跳转的方式(base标签一般放在titile标签下面)

Html标签:

作用所有html中标签的一个根节点。

Head标签:

作用:用于存放:

title,meta,base,style,script,link

注意:每个head标签中都必须有一个有title标签,其它的可选。

Body标签:

作用:用于存放所有的html的结构标签:

p,h,a,b,u,i,s,em,del,ins,strong,ul,li,ol,

Title标签:

作用:让页面拥有一个属于自己的标题。

meta 标签:

常用用法:

1. Description可以描述页面,可以用来使用百度程序(网络爬虫)来收录关键信息,以此提高页面的排名。

2. Keywords:关键词,可以用来提高页。面的关健词的比重(前升排名的一种方式。)

3. 字符集(编码格式):

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

Charset(字符集的格式):UTF-8.

注意:字符集(文字在电脑是存储的字典):

电脑是不能直接存储文字的,一般情况下电脑存储的是这个文字在“字典”里对应的位置。

      gb2313---->gbk;

      国标2313---->国标扩

这些标签分为:块(占一整行、通过样式可改变大小)、行内块(只占据自身内容大小,通过样式可改变大小)、行内(大小根据内容而定)、双标签和单标签(以有无 结尾来区分)


推荐使用W3Cschool文档。里边有详细的HTML标签说明。



猜你喜欢

转载自blog.csdn.net/iconhot/article/details/71249379