HTML

1. 什么是 HTML？

超文本标记语言：

• 超文本：比普通文本功能更加强大
• 标记语言：使用一组标签对内容进行描述的一门语言， 它不是编程语言！

2.HTML 怎么使用？

1. 文件后缀名以html结束
2. 所有的html标签都是以头部分和体部分组成
3. Html 标签都是由开始标签和结束标签组成
4. Html 标签忽略大小写的， 建议使用小写

3.HTML 相关标签的学习

注释：

<!--这是注释-->
快捷键： ctrl+/

3.1 标题标签

标题标签使用 < hn> < /hn >, n 从 1 到 6 逐渐变小。 超过 6 的按 6 的进行显示

3.2 水平线标签

水平线标签： < hr />

---

3.3 段落标签

段落标签： < p></ p>

3.4 字体标签

• 字体标签使用 必须结合其属性才能具备一定的样式效果。
• 设置颜色： color(可以是英文单词也可以是十六进制)
• 设置字体： face(那些字体必须是你本机已经有的)
• 设置大小： size (从 1 到 7 逐渐变大，超过 7 的部分按照 7来显示)

4.网站图片信息显示页面

4.1.图片标签

图片标签：
图片的位置属性： src
SRC:

• 绝对路径：带有盘符的
• 相对路径：
  - 1. 如果是同级，直接写文件名称或者./文件名称
  - 2. 如果是上一级： …/文件名称(如果是多层，那么多写几个…/)
  - 3. 如果是下一级： 写目录名称/文件名称
• width:设置图片的宽度
• height：设置图片的高度
• alt：当图片无法正常显示的时候给出的提示信息。

5.网站友情链接页面显示

5.1列表标签：

• 有序列表： < ol>< /ol>
  • 属性： type 有 5 个取值 start 其实位置， reverse：倒序
• 无序列表:
  • 属性： type 有 3 个取值

5.2 超链接标签

<a href=”http://www.baidu.com” target=”_self、 _blank”>百度
<a href=”#” target=”_self / _blank”>点我< /a>
#代表页面不发生跳转

6.网站首页显示页面

6.1.表格标签

表格标签使用的是

 <table>
     <tr>
         <td></td>
    </tr>
 </table>

• Table 属性：
• 边框： border
• 宽度： width
• 高度： height
• 背景颜色： bgcolor
• 边框与边框的： cellspacing
• 边框与内容的： cellpadding
• 居中显示： align

7.网站首页案例

7.1.步骤分析

第一步： 将首页所有的内容作为一个大的 table(八行一列的表格)
第二步： 第一行(嵌套一个一行三列的表格，然后分别对每个单元格进行内容的填充)

第三步：第二行(使用字体标签和超链接标签显示导航栏信息)

第四步：第三行(放置轮播图片)

第五步： 第四行(嵌套一个三行七列的表格)

第六步： 第五行(放置一张广告图片)

第七步：第六行(嵌套一个三行七列的表格)

第八步：第七行(放置一张广告图片)

第九步：第八行(放置一些超链接)