HTML5样式、链接和表格

内容概要

1.HTML样式
2.HTML链接
3.HTML表格

---

1.HTML样式

• 标签
  <style>:样式定义
<link>:资源引用

• 属性
  rel = "stylesheet": 外部样式表
type = "text/css": 引入文档的类型
margin-left: 边距

  三种样式表插入方法
  1.外部样式表：
  <link rel = "stylesheet" type = "text/css href = "mystyle.css"">

  2.内部样式表：
  <style type = "text/css">
  body {
   background-color:red
  }
  p {
   margin-left:20px
  }
  </style>
  
  3.内联样式表：
  <p style = "color:red">
  

例如下图代码片段：

屏幕快照 2017-07-06 下午3.20.01.png 屏幕快照 2017-07-06 下午3.20.11.png 屏幕快照 2017-07-06 下午3.26.46.png
如图的代码片段中，index.html中引入外部文档资源mystyle.css。详细请看代码片段，有详细注释。

2.HTML链接

• 链接数据：
  1.文本链接
  <a href = "http://www.baidu.com"> click me </a>

  2.图片链接
  <a href = "http://www.baidu.com">
   <img src = "html.png" width = "100px" height = "100px alt = "html5logo"">
  </a>
  

• 属性：
  1.href属性：指向另一个文档的链接
  <a href = "http://www.baidu.com" alt = "html5logo"> click me</a>

  2. name属性：创建文档内的链接
  <a name = "tips"> hello </a>
  <a href = "#tips"> jump to hello </a>
  这样点击链接后就会跳转到hello的地方，大家可以试一下。
  

• img标签属性：
  alt：替换文本属性
width： 宽
height： 高

3.HTML表格

<table>定义表格
<caption>定义表格标题
<th>定义表格的表头
<tr>定义表格的行
<td>定义表格的单元
<thead>定义表格的页眉
<tbody>定义表格的主题
<tfoot>定义表格的页脚
<col>定义表格的列属性
代码片段：

<table border = "1">
    <tr>
        <th>我是表头1</th>   
        <th>我是表头2</th>
        <th>我是表头3</th>
    </tr>
    <tr>
        <td>表格1</td>   
        <td>表格2</td>
        <td>表格3</td>
    </tr>
    <tr>
        <td>表格1</td>   
        <td>表格2</td>
        <td>表格3</td>
    </tr>
</table>

结果：

屏幕快照 2017-07-06 下午5.11.50.png

---

今天先学习到这里，明天继续学习，谢谢！