您的位置：首页 > Web前端 > HTML5

HTML5样式、链接、表格

2016-09-08 15:31 323 查看
HTML样式使用

1、标签

<style>:样式定义

<link>:资源引用(一般在head中写)

2、属性：

rel="stylesheet":外部样式表

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

margin-left:边框

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

外部样式表：

<link rel="stylesheet" type="text/css" href="my style.css">

测试代码如下：

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就会设置为红色。

内部样式表

<style type = "text/css">

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>


内联样式表

<p style="color:red">

代码如下：

<!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>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航