课程介绍

13天 web前端 8天 数据库

Web前端课程介绍

1. HTML：搭建页面结构和内容 盖房子
2. CSS： 用于美化页面 装修
3. JavaScript： 用于给页面添加动态效果或内容
4. JQuery：用于简化JavaScript语言

HTML

• HyperText超文本 Mark标记 Language语言
• 什么是超文本？ 不仅仅是纯文本，除了文本之外还包括字体信息，还包括多媒体信息（图片、音频、视频）
• 和XML的不同点： xml的标签是可以扩展的,html标签是固定的
• 学习HTML主要学习的就是有哪些标签，标签有哪些属性，标签和标签的嵌套关系

创建第一个HTML

常用标签

1. 文本标签
2. 内容标题：h1-h6 属性 align:left/right/center 独占一行 上下留有空白
3. 段落标签： p 独占一行 上下留有空白
4. 水平分割线： hr

5. 换行： br

6. 列表标签

7. 无序列表

   <ul type="square"> <!-- unordered list 无序列表 -->
       <li>貂蝉</li> <!-- list列表 item项 -->
       <li>吕布</li>
       <li>刘备</li>
   </ul>
   

8. 有序列表

   <ol type="1" start="5" reversed="reversed"> <!-- ordered list 有序列表 -->
       <li>打开冰箱门</li>
       <li>把大象装进去</li>
       <li>关上冰箱门</li>
   </ol>
   

9. 定义列表

   <dl><!-- definition list 定义列表 -->
       <dt>凉菜</dt> <!-- definition term 定义列表组 -->
       <dd>拍黄瓜</dd> <!-- definition description 定义描述 -->
       <dd>芥末鸭掌</dd>
       <dd>花毛一体</dd>
       <dt>炒菜</dt>
       <dd>宫保鸡丁</dd>
       <dd>木须肉</dd>
       <dd>水煮肉</dd>
   </dl>
   

10. 列表嵌套 无序列表和有序列表可以任意无限嵌套

课程回顾：

1. 文本标签： 内容标题 h1-h6 align=left/right/center
   段落标签p 水平分割线 hr 换行br
2. 列表标签
3. 无序列表 ul li
4. 有序列表 ol li
5. 定义列表 dl dt dd
6. 列表嵌套 有序无序任意无限嵌套

分区元素

• 分区元素自身没有显示效果用于把页面中的多个元素进行统一管理，类似于一个容器
• 一个页面一般分为三大区：
  头部
  体部
  脚部

• h5标准中新增了几个和div功能一样的分区元素

  头部
  正文

• div和span

• div：独占一行
• span：共占一行

元素的分类

1. 块级元素： 独占一行 包括：h1-h6,p, div , hr
2. 行内元素： 共占一行 包括：span，斜体i和em，加粗b和strong，删除线s和del，下划线u

特殊字符 实体引用

1. 空格折叠现象 通过   替换空格 牛逼是屁
2. 小于号和大于号 < > 老铁干他
3. 换行
   

图片标签

• 常用属性：
• scr：图片的路径 -相对路径：访问站内资源 1. 同级 直接写图片名 2. 上级 ../图片名 3. 下级 文件夹名/图片名 -绝对路径：访问站外资源 ，称为盗链，节省自己网站的资源，但是有可能出现找不到图的情况
• alt：当图片不能正常显示的时候显示的文本
• title：当鼠标悬停时显示的文本
• width：设置宽度 ， 两种赋值方式：1.像素 2.百分比 如果只设置宽度高度会自动等比缩放

• height：设置高度

• 图片支持的格式：jpg/jpeg png gif

图像地图

• 范围 属性：
  1. shape形状(circle/rect)
  2. coords坐标（rect四个值 两个对角线点的坐标，circle三个值 圆心坐标和半径）
  3. href路径 设置点击的行为， 该路径指向的资源如果浏览器能够浏览则直接浏览，如果不能浏览则下载此文件

超链接

• xxx
• href属性和图像地图里面的href一样
• target="_blank" 从新的窗口中显示页面
• a标签可以包裹文本也可以包裹图片

• 锚点的使用：

  <a id="top"></a>   
  <a href="#top">回到顶部</a>
  

课程回顾

1. 文本标签
2. 内容标题 h1-h6 align="left/right/center"
3. 段落 p
4. hr 水平分割线
5. br 换行
6. 列表
7. 无序列表 ul li
8. 有序列表 ol li
9. 定义列表 dl dt dd
10. 列表嵌套 有序无序无限嵌套
11. 分区元素
12. 块级分区 div 独占一行
13. 行内分区 span 共占一行
14. h5新标签
15. 元素分类
16. 块级元素： 独占一行 包括：div h1-h6 p hr
17. 行内元素： 共占一行 包括：span i和em b和strong s和del u
18. 图片标签 img alt：图片不能正常显示显示的文本 src：路径 title：鼠标悬停时显示的文本 width和height
19. 图像地图
20. 超链接 xxx 锚点的使用