HTML和CSS初学—01_<div id="login">这是用来干嘛的-优快云博客

sublime

sublime快捷键使用：
自动补全：输入html:5，然后按下Tab键；输入！，然后按下Tab键盘。

HTML标签

标题标签

为了使网页更具有语义化，我们经常会在页面中使用到标题标签，HTML提供了6个等级的标题，即：

<h1> 、<h2> 、<h3> 、<h4> 、<h5> 、 <h6>

标题标签语义：作为标题使用，并且依据重要性递减

其基本语法格式如下：

<hn> 标题文本 </hn>

段落标签

<p> 文本内容 <p>

水平线标签

<hr />

水平线标签是单标签

换行标签

<br />;

换行标签是单标签

div span标签（重点）

div span 是没有语义的，是我们网页布局主要的2个盒子

div就是division的缩写分割，分区的意思，其实有很多div来组合网页。

span：跨度，跨距；范围

语法格式：

<div> 这是头部 </&div> <span>今日价格>

文本格式化标签

标签	显示效果
<strong></strong和><b></b>	文字以粗体方式显示（XHTML推荐使用strong）
<em><em/>和<i></i>	文字以斜体方式显示（XHTML推荐使用em）
<del></del>和<s></s>	文字以加删除线方式显示（XHTML推荐使用del）
<ins></ins>和</ins>	文字以加下划线方式显示（XHTML推荐使用ins）

图像标签img（重点）

该语法中src属性用于指定图像文件的路径和文件名，他是img标签的必需属性

<img src=“图像URL”、>

<img />标记属性

属性	属性值	描述
src	URL	图像的路径
alt	文本	图像不能显示时的替换文本
title	文本	鼠标悬停时显示的内容
width	像素（XHTML不支持页面百分比%）	设置图像的宽度
height	像素（XHTML不支持页面百分比%）	设置图像的高度
border	数字	设置图像边框的宽度

注：一般宽度和高度，给其中一个即可，因为图片会等比例缩放。

链接标签（重点）

在HTML中创建超链接，只需用标签环绕需要被链接的对象即可，其基本语法如下：

<a href=“跳转目标” target=“跳转目标的弹出方式”>文本或图像</a>

href：用于指定链接目标的URL地址，当为标签应用href属性时，它就具有了超链接的功能。
target：用于指定链接页面的打开方式，其取值有self和blank两种，其中self为默认值，blank为在新窗口中打开方式。
举例：

<a href=“http://www.baidu.com” target="_blank">百度</a>
注意：
1.外部链接：需要添加 http://www.baidu.com
2.内部链接：直接链接内部页面名称即可比如<a href=“index.html”>首页</a>
3.如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”（即href=“#”），表示该链接暂时为一个空链接。
4.不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。

锚点定位（难点）

通过创建锚点链接，用户能够快速定位到目标内容
创建锚点链接分为两步：

使用<a href="#id名">链接文本</a> 创建链接文本。
使用相应的id名标注跳转目标的位置。

base标签

base标签可以设置整体链接的打开状态

<base target="_blank"/>

如果存在例外，在某一个特殊打开方式的标签中单独定义。

特殊字符

特殊字符	描述	字符的代码(每一个后面都有分号)
	空格	&nbsp
<	小于	&lt
>	大于	&gt
&	和号	&amp
¥	人民币	&yen
©	版权	&copy
®	注册商标	&reg
°	摄氏度	&deg
±	正负号	&plusmn
×	乘号	&times
÷	除号	&divide
²	平方2（上标2）	&sup2
³	平方3（上标3）	&sup3

注释标签

如果需要在HTML文档中添加一些便于阅读和理解，但又不需要在页面中显示的注释文字，就需要使用注释标签，其基本语法格式如下：

< ! - - 注释语句 - - >

注释内容不会显示在浏览器窗口中，但是作为HTML文档的一部分，也会被下载到用户的计算机上，查看源码时可以看到。

路径（重点、难点）

工作中，通常新建一个文件夹专门用于存放图片文件，这时再插入图像，就需要采用“路径”的方式来指定图片文件的位置。
路径分为相对路径和绝对路径。

相对路径

图片文件和HTML文件位于同一个文件夹：只需要输入图片文件的名称即可。
如：<img src=“login.img”/>
图片文件位于HTML文件的下一级文件夹：输入文件夹名和文件名，中间用“/”隔开。
如：<img src=“img/img01/login.gif” />
图片文件位于HTML文件的上一级文件夹：在文件夹名前面加“…/”，以此类推。
如：<img src="…/login.gif" />

绝对路径

磁盘绝对路径或完整的网络地址：
<img src=“D:\web\img\login.gif” />
<img src=“http://www.youkuaiyun.com/images/login.gif” />

无序列表（ul标签）（重点）

无序列表的各个列表项之间没有顺序级别之分，是并列的，其基本语法格式如下

<ul>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
        …
</ul>

注意事项：

<ul></ul>中只嵌套<li></li>，直接在<ul></ul>中输入其它标签和文字的做法是不允许的。
<li></li>相当于一个容器，可以容纳所有元素。
无序列表会带有自己的样式属性，一般不用，通常采用CSS来改变样式。

有序列表（ol标签）

有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义，有序列表基本语法格式如下：

<ol>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
        …
</ol>

注意事项：

<ol></ol>中只嵌套<li></li>，直接在<ol></ol>中输入其它标签和文字的做法是不允许的。
<li></li>相当于一个容器，可以容纳所有元素。
有序列表会带有自己的样式属性，一般不用，通常采用CSS来改变样式。

自定义列表

自定义列表常用语对术语或名词进行解释或描述，定义列表的列表项前没有任何符号。其基本语法格式如下：

<dl>
        <dt>名词1</dt>
        <dd>名词1解释1</dd>
        <dd>名词1解释2</dd>
        …
        <dt>名词2</dt>
        <dd>名词2解释1</dd>
        <dd>名词2解释2</dd>
        …
</dl>