Web前端（一）

HTML

• Hyper Text Markup Language（超文本标记语言）,超文本指不仅仅是纯文本还包括字体样式颜色大小，和多媒体相关(图片、音频、视频)
• 学习HTML主要学习的就是有哪些标签，标签有哪些属性，标签和标签之间的嵌套关系

body里面常用的标签

文本标签

1. h1-h6 文本标题 align=“left/right/center”
2. p 段落标签
3. hr 水平分割线
4. br 换行

列表标签

1. 无序列表

   <ul type="circle"> <!-- unordered 无序 list列表 -->
       <li>刘备</li><!-- list 列表 item项-->
       <li>貂蝉</li>
       <li>孙尚香</li>
   </ul>
   

2. 有序列表

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

3. 定义列表 dl dt dd

   <dl><!-- definition定义 list 列表 -->
       <dt>凉菜</dt><!-- definition定义 term 标题 -->
       <dd>老醋花生</dd><!-- definition定义 description描述 -->
       <dd>花毛一体</dd>
       <dd>东北大拉皮</dd>
       <dt>炒菜</dt>
       <dd>宫保鸡丁</dd>
       <dd>木须肉</dd>
   </dl>
   

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

分区标签（元素）

• 作用：

• 可以对页面中的元素进行复用

• 可以对页面中的多个元素进行统一管理

• div: 独占一行

• span: 共占一行

• 一般页面开发都会把页面分为三大区：

  <div>头部</div>
  <div>体部</div>
  <div>脚部</div>
  

• h5标准中新增了几个分区元素

  头部

  正文

  脚部

• 分区标签默认没有显示效果，可以理解成是装标签的容器。

标签（元素）分类

1. 块级元素： 独占一行 包括：div，h1-h6，p ，hr
2. 行内元素： 共占一行 包括：span， b和strong，i和em，del和s，u
3. 行内元素的空格折叠现象，只能识别一个空格， 如果需要多个空格 则用 取代空格

图片标签 img

• 常用属性：
• src： 图片的路径
  1. 相对路径：访问站内资源时使用相对路径
     1. 和页面在同一目录：直接写图片名
     2. 在页面的上一级目录：…/图片名
     3. 在页面的下级目录：文件夹名/图片名
  2. 绝对路径：访问站外资源时使用，绝对路径以http开头，称为图片盗链，可以节省自己网站资源，但是存在找不到图片的风险
• alt: 当图片不能正常显示的时候显示的文本
• title： 当鼠标在图片上悬停时显示的文本
• width、height：两种赋值方式：1. 像素 2. 上级元素的百分比
• 支持的图片格式： jpg（jpeg）、png、gif

图像地图map

• map属性：name 用于表示地图唯一性的标识

• map的子元素area标签

• area的属性：shape形状（rect、circle）coords坐标（矩形4个值对角线点的坐标，圆形3个值圆心坐标和半径） href路径：可以指向页面资源，也可以指向文件资源，如果浏览器支持浏览此文件则直接浏览，如果不支持则下载

  <img src="../imgs/h.jpg" width="1000" usemap="#mymap">
  <map name="mymap">
      <area shape="circle" coords="280,330,30" 
      href="http://www.tmooc.cn"> 
      <area shape="circle" coords="365,395,33" 
      href="web01.zip"> 
  </map>
  

超链接 a

• 如果a标签不加href属性 则就是纯文本
• href属性的作用和图像地图里面的作用一样
• target="_blank" 在新的窗口中显示目标页面
• 如果a标签包裹的是文本则是文本超链接 如果是图片则是图片超链接
• 可以通过超链接实现页面内部跳转，如果跳转的目的地是文本没有标签则需要添加一个空的a标签作为锚点，如果目的地有标签则直接在标签中添加id不需要单独添加锚点

表格标签table

• table常用属性：border边框的粗细单位是像素 cellspacing单元格的间距 cellpadding单元格距内容的距离 width align
• 子标签：tr行 td列 属性：跨行rowspan 跨列colspan caption表格标题 th表头字体加粗并居中
• 分组标签： thead 头部 tbody 体部 tfoot 脚部 分组标签没有显示效果，提高代码的可读性，对多行进行统一管理