夜灵的Html笔记Day02——文本、分区元素、图像、链接、表格

1.文本(重点)
   1.特殊符号
        空格 (默认空格会折叠，文档只解析一个)
     > >大于号
     &lt;  <小于号
     &copy;  @ 版权符号
     @yen; ￥
    2.文本标记
       1.文本样式
          <i>内容</i>   斜体
 <u>内容</u>  下划线
 <s>内容</s>  删除线
 <b>内容</b>   加粗
 ^内容    上标
 _内容    下标


       特点：所有的内容会在一行内显示
       2.标题元素
          以标题的形式显示文本内容(想突出显示标题的时候)
语法：<hn></hn>   n:1-6数字
<h1></h1>   一级标题
....
...
<h6></h6>   6级标题
特点：
   自动换行
   默认加粗
   数字越大，字号越小
        属性：
   1.水平对齐方式
   语法：align
   取值：left/center/right
3.段落标记：你以为段落的形式显示文本
 语法：<p>内容</p>
 特点：独占整行
       文字大小采用默认大小
默认的垂直空白间距
      
         4.换行元素
   语法：<br>或<br/>
   **:针对行内元素
5.分割线元素
  语法：<hr>或<hr/>
  属性：
      color:颜色
      size:取值以px为单位的数值
      width:宽度以px为单位的数值
      height:高
      align:线条的水平对齐方式
6.预格式化：保留源文件中的格式，也会保留换行和空格效果
  语法：<pre></pre>
2.分区元素
   1.块分区
      语法：<div>内容</div>
      特点：独占一行
            无任何文本显示效果
       作用：布局
   2.行分区
     语法：<span></span>
     特点：
         多个span元素会在一行中显示
无任何特殊效果
      作用：处理一行文字的不同效果


3.图像和链接
   1.url  统一资源定位符（定位器），俗称：路径
     uniform resource locator


   2.url表现形式
       1.绝对路径
          一旦知道绝对路径，肯定可以找到你想找的资源，是完整路径的表现形式
 http://z1.dfcfw.com/2017/8/25/201708251445591754443630.jpg
 http://baidu.com
 通信协议+域名(IP)+路径+文件名


 1.网络资源
   通信协议：http:
   主机：域名/IP地址  
   路径、文件名


       2.相对路径
          从当前文件位置处开始，一直查到资源文件所在的位置，
 它所经过的路径就是相对路径.
 1.本机资源访问
    D:\jd\images\index\1.jpg
            a.同目录
      （当前资源和文件在同一目录，直接能资源文件名
       称进行引用）
aa.html
   b.子目录
     先进入子目录，再引用images/1.jpg
   c.父目录
      先返回到父级目录，再引用../2.jpg
 
   3.图像
      1.格式
        jpg(jpeg):  有损压缩，压缩比率大
gif:动画
png: 背景透明
      2.图像元素
         语法：<img>或<img/>将图片添加到网页中
属性：
    src   图片的地址来源
    width 
    height
    title  鼠标移入到元素上时提示的文字
    alt    鼠标移入到元素上，图片出错时，显示的文字
        **:若width和height只设置其中一个属性的话，另外一个将等比缩放
  若用的图片和你需求的不一致，尽量写出宽和高

练习：显示三线不同路径下的图片（同级目录，子级目录，父级目录）
    
 
3.链接
   又称为超链接，在页面中允许被点击的内容，以完成页面间的跳转
    语法：<a>内容</a>    默认不能点击，需配置href属性跳转链接地址
   属性：
       href  链接路径 (url)
       title  鼠标放在链接上时的提示内容
       target  目标，指定打开网页的方式
           取值：_self 在自身的标签页中打开（默认值）
        _blank  在新的标签页中打开
                 _parent.....????


4.链接的表现形式
   1.目标为下载资源
      <a href="*.zip/*.rar">下载</a>
   2.电子邮件
      <a href="mailto:m18697040240@163.com">电子邮件</a>   mailto:加上
   3.返回页面顶部时
      <a href="#">返回页面顶部</a>
   4.链接到js...
      <a href="javascript:;"></a>


5.锚点(Anchor)
   1.什么作用？
      在HTML页面中的某行位置处做一个标记，方便页面能够随时跳转到标记位置处
   2.使用方式？
      1.定义锚点
          1.通过a标记的name属性定义锚点
     <a name="锚点名称"></a>     *：不要中文
 2.通过任意标记的id属性定义锚点
     <any id="锚点名称"></any>
      2.链接到锚点
          1.跳转到本页锚点处
    <a href="#锚点名称"></a>
          2.跳转到其它页面锚点处
    <a href="其它页面URL#锚点名称"></a>


6.表格(Table)
   1.表格的作用？
       按照一定的格式来显示数据
       表格是由单元格组成，按照从左到右，从上到下的顺序排列的
       表格中的数据最终要保存在单元格中
    
   2.使用表格
      1.创建表格
          1.定义表格  <table></table>
 2.创建表行  <tr></tr>
 3.创建单元格 <td></td>
      2.表格的属性？
         1.table的属性
    1.border 边框，指定表格的边框
    2.width  设置表格的宽度
    3.height  设置表格的高度
    4.align   设置表格的水平对齐方式
        取值：left/center/right
             5.bgcolor 设置表格的背景颜色 
    6.cellspacing  设置单元格的外边距（单元格和单元格之间的间距）
    7.cellpadding  设置单元格的内边距（单元格和内容之间的间距）
2.tr的属性
    1.align  设置该行内容的水平对齐方式
    2.valign  设置该行内容的垂直对齐方式
          取值：top/middle/bottom
    3.bgcolor   该行的背景颜色 
3.td的属性
    1.align
    2.valign
    3.width
    4.height
    6.colspan  设置单元格跨列
    7.rowspan  设置单元格跨行
**:1.每行中的指定列的宽度，都是一致，默认情况下以最宽的为主
   2.一行中所有列的高度都是一致的，默认以最高的为主
       3.表格的标题
          语法：<caption>标题</caption>
 **：1.caption必须紧跟在table标记之后
     2.一个表格最多只能有一个标题
       4.th
          行标题或列标题
 特点：字体有加粗效果，放在tr里。
   3.复杂表格的使用
      1.行分组
         可以将表格分成3个部分
 1.表头   <thead></thead>
 2.表主体  <tbody></tbody>
 3.表尾    <tfoot></tfoot>   一般不写
       2.不规则表格
          通过td的colspan（跨列）和rowspan（跨行)属性设置
   1.跨列
      从指定的单元格位置开始，横向向右合并几个单元（包括自己）
      ***：被合并单元格，要删除
      语法：colspan
      取值：数字（合并单元格的个数）
   2.跨行
      从指定的单元格位置开始，纵向向下合并几个单元（包括自己）
      ***：被合并单元格，要删除
      语法：rowspan
      取值：数字（合并单元格的个数）
       3.表格的嵌套
          ***：必须在单元格(td)里嵌套另一个表格
  <table>
      <tr>
         <td></td>
 <td>
     <table>
        <tr>
   <td></td>
   <td></td>
   ....
</tr>
     </table>
 </td>
 <td></td>
 .....
      </tr>
  </table>