html 基础2

html 基础二

HTMLCSS基础2

一、HTML中的标签

1.1标签的特点

给文本加上含有语义的标签

应该学习更多具体语义标签

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

2.1 更多的标签

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

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

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

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

 

2.1.2 p标签(Paragraph):段落标签

给页面的上一段文字加上段落的语义

 

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

<p>这是段落</p>

2.1.3 hr标签(Horizontal Rule)

作用:在页面显示一条横线(没有自己的语义)。

<hr />

 

 

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

作用:

b:加粗    语义:没有语义

u: 下划线

i:  倾斜

s: 删除线                                                        

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

作用:

strong:加粗   语义:加强语气

ins:下划线

em:倾斜

del:删除线

可以使用

2.1.5 img标签(image)

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

特点:就是显示图片

<img src=”图片的路径” />

 

src

图片显示的路径

alt

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

title

介绍这张图片

 

2.1.6 a标签(Anchor):锚

a标签的其它名称:

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

代码:

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

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

a标签的其它用法:

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

2. 可以跳转到另外的页面。

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

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

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

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

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

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

a标签的属性:

href

a标签跳转的目标地址

target

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

_self:在当前页面进行跳转

base

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

 

2.1.7 Html标签

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

2.1.8 Head标签

作用:用于存放:title,meta,base,style,script,link

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

 

2.1.9 Body标签

作用:用于存放所有的html的结构标签:p,h,a,b,u,i,s,em,del,ins,strong,ul,li,ol

2.1.10 Title标签

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

 

2.1.11 meta 标签

常用用法:

  1. Description:可以描述页面,可以用来使用百度程序(网络爬虫)来收录关键信息,以此提高页面的排名。
  2. Keywords:关键词,可以用来提高页。面的关健词的比重(前升排名的一种方式。)
  3. 字符集(编码格式):

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

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

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

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

      gb2313---->gbk;

      国标2313---->国标扩

 

所有一般看到乱码的原因是因为查找的字典不对:

我们做了一个小的例子:文档的内容用的是utf-8格式,而我们的存放文档的这个文件的格式是gbk,

2.2 编码

2.21 gbk,utf-8之间的区别:

相同点:都是字符的编码格式。

区别:

utf-8:收录是全世界所有的语言中的文字。

gbk:收录了汉字,片假名。

大小:

utf-8>gbk

性能:

uft-8<gbk

约定:将来我们在整个学习过程中都用utf-8;

utf-8存储一个汉字占3个字节,

gbk存储一个汉字上2个字节

2.3 标签分类

双标签:有开始有结束,开始和结束之间是存在内容

开头也尖括号包含的内容开头,以尖括号加/包含内容结尾。

<h1></h1>,<p></p>

 

单标签:只有一个标签,自己闭合自己。

只有一个尖括号包含的内容加上斜线结尾。

<hr /> ,<br />

 

 

2.4 标签与标签之间的关系

嵌套关系:一个标签包含另外一个标签,他们之间构造父子关系。

 

并列关系:两个标签并列,他们构造兄弟关系。

 

注意:将来在书写代码的时候如果两个标签之间的关系是嵌套关系,最好通过代码直接反映出来(子元素相对于父元素有一个缩进)。如果是并列关系,最好要有对齐。

 

 

 

 

 

二、当前主流文档类型

文档类型

分类

备注

HTML

HTML Strict DTD

请求比较严格的html类型

HTML Transitional DTD

相对而言比较规范不太严禁

Frameset DTD

 

框架级的类型

xHTML

HTML Strict DTD

请求比较严格的html类型

HTML Transitional DTD

相对而言比较规范不太严禁

Frameset DTD

 

框架级的类型

 

 

xHtml(html2.0版本(是一种相对html语法更加严谨的hmtl)

 

注意:将来在使用DOCTYPE的时候建议使用html5的类型。每个页面都要设置一个doctype,如果不设置,浏览器会默认开启quirks mode(怪异模式)解析(quirks mode(怪异模式)是浏览器为了兼容很早之前针对旧版本浏览器设计、并未严格遵循 W3C 标准的网页而产生的一种页面渲染模式)。

 

 

 

 

三、 开发工具选择之sublime

3.1 特点

dreamwaver:偏向设计

sublime:(轻量级)自带功能不太全,但是插件十分丰富。

webstrom:(重量级)自带功能比较全面。

 

侧边栏

查看-->侧边栏

    新建文件

文件--->新建文件(ctrl+n)

    生成结构代码

html:xt+(ctrl+E)

    快速复制一整行

Ctrl + shift + d

    快速删除一整行

Ctrl + shift + k

    向上移动一整行

Ctrl + shift + ↑

    向下移动一整行

Ctrl + shift + ↓

 

小功能:

a.在浏览器中查看

b.打开所在文件夹

c.复制文件路径

 

3.2 使用sublime

a.打开sublime,ctrl+n新建一个文件

 

b.保存后缀为.html

生成结构代码:输入html:xt + (ctrl+e)

 

 

四、 标签属性

<img src=”a.jpg” />

属性为 HTML 元素提供附加信息,img标签中的src就是img标签的一个属性。

 

五、 路径问题

第一种:绝对路径

带有盘符的路径:C:上课内容上课视频1html第一天4-源代码1.jpg.

缺点:可移植性不强,一般情况下不直接使用绝对路径。

第二种:相对路径

由页面是一个文件,图片 也是一个文件,而现在需要在页面上输出图片,所以需要得到图片相对于文件的路径.

 a.如果页面与图片在同一目录下面:

 

<img src=”2.jpg” />

 b.如果页面在图片一上级目录:

 

  <img src=”image/1.jpg” />

 c.如果图片在页面的上一级目录:     


                                     <img src=”../2.jpg” />

 

注意:在实际开发中大部分情况下只要不出意外我们都是使用相对路径,因为相对路径的可移植性要强。

 

相关内容推荐