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 标签
常用用法：
- Description：可以描述页面，可以用来使用百度程序（网络爬虫）来收录关键信息，以此提高页面的排名。
- Keywords：关键词，可以用来提高页。面的关健词的比重（前升排名的一种方式。）
- 字符集（编码格式）：
<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” />
注意:在实际开发中大部分情况下只要不出意外我们都是使用相对路径,因为相对路径的可移植性要强。
