HTML和CSS初学—01"/>
HTML和CSS初学—01
HTML初学
- sublime
- HTML标签
- 标题标签
- 段落标签
- 水平线标签
- 换行标签
- div span标签（重点）
- 文本格式化标签
- 图像标签img（重点）
- 链接标签（重点）
- 锚点定位（难点）
- base标签
- 特殊字符
- 注释标签
- 路径（重点、难点）
- 相对路径
- 绝对路径
- 无序列表（ul标签）（重点）
- 有序列表（ol标签）
- 自定义列表
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=“” target="_blank">百度</a>
注意：
1.外部链接：需要添加
2.内部链接：直接链接内部页面名称即可 比如<a href=“index.html”>首页</a>
3.如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”（即href=“#”），表示该链接暂时为一个空链接。
4.不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。
锚点定位（难点）
通过创建锚点链接，用户能够快速定位到目标内容
创建锚点链接分为两步：
- 使用<a href="#id名">链接文本</a> 创建链接文本。
- 使用相应的id名标注跳转目标的位置。
base标签
base标签可以设置整体链接的打开状态
<base target="_blank"/>
如果存在例外，在某一个特殊打开方式的标签中单独定义。
特殊字符
| 特殊字符 | 描述 | 字符的代码(每一个后面都有分号) |
|---|---|---|
| 空格 |   | |
| < | 小于 | < |
| > | 大于 | > |
| & | 和号 | & |
| ¥ | 人民币 | ¥ |
| © | 版权 | © |
| ® | 注册商标 | ® |
| ° | 摄氏度 | ° |
| ± | 正负号 | ± |
| × | 乘号 | × |
| ÷ | 除号 | ÷ |
| ² | 平方2（上标2） | ² |
| ³ | 平方3（上标3） | ³ |
注释标签
如果需要在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=“.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>
更多推荐
HTML和CSS初学—01
发布评论