HTML5样式、链接、表格-优快云博客

本文链接：https://blog.youkuaiyun.com/u014604726/article/details/52472047

HTML样式使用

1、标签

2、属性：

rel="stylesheet":外部样式表

type = "text/css":引入文档的类型

margin-left:边框

3、三种样式表插入方法：

外部样式表：

测试代码如下：

index.html中代码；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题1</title>
    <link rel="stylesheet" type="text/css" href="mystyle.css">//设置外部样式

</head>
<body>
  <h1>hello</h1>//设置为h1字体
    <p>欢迎开始选</p>//段落
</body>
</html>

文件mystyle.css中代码如下：

h1{
    color: red;
}

这样hello就会设置为红色。

内部样式表

body{background-color:red}

p{margin-left:20px}

</style>

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题1</title>

    <style type="text/css">
        p{
            color: aqua;
        }
    </style>
</head>
<body>
  <h1>hello</h1>
    <p>欢迎开始选</p>
</body>
</html>

内联样式表

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题1</title>
</head>
<body>
  <h1>hello</h1>
    <p style="color: bisque">欢迎开始选</p>
</body>
</html>

HTML链接

1、链接数据

文本链接

图片链接

测试代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a href="http://baidu.com">惦记我</a>
<a href="http://www.taobao.com">
    <img src="http://p3.ifengimg.com/a/2016_37/dd214a624f2dfb4_size149_w800_h492.jpg" width="100px" height="100px" alt="iphone7">
</a>
</body>
</html>

2、属性

href属性：指向另一个文档的链接

name属性：创建文档内的链接（例如百度百科跳转）

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<a name="tips">hello</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <a href="#tips">跳转到hello</a>
</body>
</html>

（点击跳转到hello就可以跳转到hello文字的部分）

3、img标签属性

alt：替换文本属性

width:宽

height:高

代码：

<img src="http://p3.ifengimg.com/a/2016_37/dd214a624f2dfb4_size149_w800_h492.jpg" width="100px" height="100px" alt="iphone7"（如果没有显示出图片，图片上面会表示出iphone7文字）

表格使用

<table> 定义表格

<caption> 定义表格标题

<th> 定义表格头

<tr> 定义表格行

<td> 定义表格单元

<thead> 定义表格页眉

<tbody> 定义表格主体

<tfoot> 定义表格页脚

<col> 定义表格列属性

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<p>tou</p>
    <table border="1" cellpadding="20" bgcolor="#7fffd4" background="http://p3.ifengimg.com/a/2016_37/dd214a624f2dfb4_size149_w800_h492.jpg">
        <caption>moximoxo</caption>
        <tr>
            <th>biaotou</th>
            <th>biaotou</th>
            <th>biaotou</th>
        </tr>
        <tr>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>

        <tr>
            <td>5</td>
            <td>6</td>
            <td>7</td>
        </tr>

        <tr>
            <td>
                <ul>
                    <li>iphone7</li>
                    <li>iphone6</li>
                    <li>iphone5</li>
                    <li>iphone4</li>
                </ul>
            </td>
        </tr>
    </table>
</body>
</html>