PHP全栈开发（四）: HTML 学习（1.基础标签+表格标签）

简单的学习一下HTML

学习HTML采用在www.runoob.com上学习的方法。

而且该网站还提供在线编辑器。

然后HTML编辑器使用Notepad++

记得上Emmet的官网http://emmet.io下载适合Notepad++的Emmet来增加代码编辑速度。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">   <!-- 用来描述HTML页面的编码 -->
<title>文档标题</title>
</head>
<body>
</body>
</html>

这是一个标准的HTML页面模板

头部元素

<base>

base标签可以描述HTML文档中所有链接的默认链接，并且可以指定HTML中所有链接的跳转方式，即target

<head>
<base href="http://www.runoob.com/images/" target="_blank">
</head>

<link>

link标签定义了HTML文档与外部资源之间的关系，比如说链接到哪个CSS样式表。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

<style>

style元素中可以直接添加样式来渲染HTML页面

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

<mate>

mate元素可以指定网页的描述，关键词，修改时间，作者，编码，刷新间隔时间等

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript"> #定义关键词<meta name="description" content="免费 Web & 编程 教程"> #定义描述<meta name="author" content="jack-peng">  #定义作者<meta http-equiv="refresh" content="30">  #每30秒刷新一次页面
<meta charset="utf-8">                    #定义编码

一些常用的标签/元素

超链接<a>：

<a href="http://连接url地址" target="_blank">链接</a>  

<!-- target="_blank" 表示会在新窗口中打开链接 -->
<!-- 假如链接的位置是在框架中，target="_top" 会帮助你跳出框架  target="_blank"也有同样的效果，但是会在新的窗口中打开，原来的窗口不动。-->

图片<img>：

<img src="/images/logo.png" width="258" height="39" border="0"/>

border属性会定义图片的边框

表格<table>：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>


    <table border="1">
      
      <tr>
        <th>账号</th>
        <th>密码</th>
      </tr>
      
      <tr>
      <th rowspan="2">vip</th>
      <td>5768</td>
      </tr>
      
      <tr>
      <td>4567</td>
      </tr>
      
      <tr>
        <td>jack</td>
        <td>123437</td>
      </tr>
      
      <tr>
        <td>alex</td>
        <td>123123</td>
      </tr>
      
       <tr>
        <td>alex</td>
        <td>123123</td>
      </tr>
          
      <tr>
        <td colspan=2 >制表人：XXX</td>
      </tr>
      
  </table>
</body>
</html>

表格使用标签<table>来进行创建，border属性是表格的边框，一般我们不创建边框为0的表格，因为这根本就不是表格了。

<tr>代表表格的每一行，可以理解成table row，一个tr就是表格的一行，每一行有多个列，用td标签来表示列。

不能单独使用<td>标签，<tr>标签是<td>标签的容器。<td>标签实际上是表格里面的单元格更为贴切。

<tr>标签中除了<td>还有<th>，th代表表头，实际上就是<td>的加粗显示，可以作为第一行，也可以作为整个表格的第一列。

跨行和跨列显示，跨行和跨列显示只能在td或者th中去进行设置，因为这是单元格的操作，td和th才是单元格。

tr不是单元格，它是一整个行。

另外还有单元格的间距、边距等都可以设置，这里不再讨论了。

一些常用的空元素

<br> 换行，多个换行符叠加有效
<hr> 水平线

元素/标签的常用属性：

class  为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id     定义元素的唯一id
style  规定元素的行内样式（inline style）
titl   描述了元素的额外信息 (作为工具条使用)

PHP全栈开发（四）: HTML 学习（1.基础标签+表格标签）

猜你喜欢