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:\上课内容\上课视频\01html第一天\4-源代码\1.jpg.

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

第二种：相对路径

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

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

 

<img src=”2.jpg” />

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

 

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

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

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

 

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