Web前端（一）

系统管理员 2022-02-17 13:17 244阅读 0赞

### HTML ###

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

### body里面常用的标签 ###

#### 文本标签 ####

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

#### 列表标签 ####

1.  无序列表
    
        <ul type="circle"> 
            <li>刘备</li>
            <li>貂蝉</li>
            <li>孙尚香</li>
        </ul>
2.  有序列表
    
        <ol type="1" start="5" reversed="reversed">
            <li>打开冰箱门</li>
            <li>把大象装进去</li>
            <li>关上冰箱门</li>
        </ol>
3.  定义列表 dl dt dd
    
        <dl>
            <dt>凉菜</dt>
            <dd>老醋花生</dd>
            <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 脚部 分组标签没有显示效果，提高代码的可读性，对多行进行统一管理