关闭

HTML5中 HTML格式化/HTML样式/链表/表格-样式 韩俊强的博客

标签: HTML格式化HTML样式HTML链表HTML表格韩俊强的博客
3127人阅读 评论(0) 收藏 举报
分类:

HTML5学习从简单到复杂,循环渐进!

每日更新关注:http://weibo.com/hanjunqiang  新浪微博!

1.HTML格式化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <b>小韩哥博客更新了!hanjunqiang</b>
    <br/>
    <big>欢迎来到小韩哥的博客</big>
    <br/>
    <em>欢迎来到小韩哥的博客</em>
    <br/>
    <i>黄莺</i>
    <small>你好啊!!!哈哈哈哈</small>
    <br/>
    <strong>你好啊你哈皮</strong>
    <br/>
    大家好<sup>小韩哥</sup>很好
    <br/>
    大家好<sup>小韩哥</sup>很好
    <br/>
    <ins>大家好啊</ins>
    <br/>
    <del>你好才是真的好!</del>
</body>
</html>

效果如下:


2.HTML样式


创建一个css样式文件:mystyle.css

h1{
color: red;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css样式引入方式</title>
    <link rel="stylesheet" type="text/css" href="mystyle.css”>//1外部引入样式表
    <style type="text/css”>// 2内部样式表
        p{
            color: indianred;
        }
    </style>
</head>
<body>
   <h1>标题h1</h1>
   <p>欢迎来到小韩哥的博客</p>
   <a href="http://www.baidu.com" style="color: blue" >点击我跳转到小韩哥的博客</a>  // 3内联样式表
</body>
</html>
效果如下:

每日更新关注:http://weibo.com/hanjunqiang  新浪微博!


3.HTML链接



1.就不多说了 文字链接,图片链接
2.属性看代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接</title>
</head>
<body>
    <a href="http://www.baidu.com">点击我</a>
    <a href="http://www.baidu.com">
        <img src="1.jpg" width="100px" height="100px" alt="html5logo">
    </a>
    <br/>
    <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/>
    <a href="#tips">跳转到hello</a>
</body>
</html>

3.文档内的链接 name属性

4.HTML表格


简单介绍:相对容易写一些:

<p>表格</p>
 <table border="2">
     <caption>重要表格</caption>
     <tr>
         <th>单元格表头</th>
         <th>单元格表头</th>
         <th>单元格表头</th>
         <th>单元格表头</th>
         <th>单元格表头</th>
     </tr>
     <tr>
         <td>单元格1</td>
         <td>单元格2</td>
         <td></td>
         <td>单元格4</td>
         <td>单元格5</td>
     </tr>
     <tr>
         <td>单元格1</td>
         <td>单元格2</td>
         <td>单元格3</td>
         <td>单元格4</td>
         <td>单元格5</td>
     </tr>
</table>
效果如下:

<table border="2">
    <tr>
        <td>表格1
        </td>
        <td>表格2
        </td>
    </tr>
    <tr>
        <td>
            <ul>
                <li>苹果</li>
                <li>香蕉</li>
                <li>菠萝</li>
            </ul>
        </td>
        <td>我想吃了
        </td>
    </tr>
</table>
效果如下:

<table border="2">
<tr>
<td>单元1</td>
<td>单元2</td>
<td>单元3</td>
</tr>
<tr>
<td>单元4</td>
<td>单元5</td>
<td>单元6</td>
</tr>
</table>
<br/>
<table border="2" cellpadding="10" bgcolor="#f5f5dc">
<tr>
<td>单元1</td>
<td>单元2</td>
<td>单元3</td>
</tr>
<tr>
<td>单元4</td>
<td>单元5</td>
<td>单元6</td>
</tr>
</table>
效果如下:

每日更新关注:http://weibo.com/hanjunqiang  新浪微博!

iOS开发者/HTML5交流QQ群: 446310206  欢迎加入!


1
0
查看评论

H5表格的属性

这是一片关于html表格制的文章!
  • zhaolimulin
  • zhaolimulin
  • 2017-03-20 07:51
  • 1753

H5-表格的基本样式

1.选择器 类选择器:通过给标签元素起一个classname类名 的方式,在编写样式的时候,用类名来获取该元素 .div1{ width:200px; height:200px; background-color:blue; } id选择器: 给元素起一个i...
  • chenzhaoxiong123
  • chenzhaoxiong123
  • 2017-11-01 20:22
  • 425

[H5]HTML5样式、链接和表格

[H5]HTML5样式、链接和表格 <!-- 一、HTML样式 1.标签 :样式定义 通过style来定义一些样式 :资源引用 通过link来引用一些css样式进入到页面效果当中 2.属性 rel="stylesheet" ...
  • u012881779
  • u012881779
  • 2017-01-28 20:49
  • 2385

精通CSS.DIV网页样式与布局(五) ——设置表格与表单样式

表格和表单是网页中非常重要的两个元素,我们这次来说说CSS如何设置表格和表单样式。我们先来看看CSS如何控制表格。 首先表格中的标记:我们看一下代码: 年度收入 <!-- table{ caption-side:bottom; } --> 年度收...
  • yi_zz
  • yi_zz
  • 2012-10-02 10:38
  • 80429

四个好看的CSS样式表格

1. 单像素边框CSS表格 这是一个很常用的表格样式。 源代码: table.gridtable { font-family: verdana,arial,sans-serif; font-size:11px; color:#333333; border-width: 1px;...
  • nightelve
  • nightelve
  • 2012-09-08 12:51
  • 412495

h5中的表格

表格 行 列.. :  注意:每一行里td的个数一样。 表格中的 属性: <table border="5px" width="500px" height="100px" ...
  • Onlyjr123
  • Onlyjr123
  • 2017-05-04 13:48
  • 3750

HTML5学习03-HTML5样式 链接和表格

题外话:由于本人也是从零开始学习,所以做的笔记都是最简单的,会根据之后的学习慢慢补充里面的知识。一、三种常用样式案例: 1、外联的样式,myyangshiss.css h1{ color: red; }2、代码内容 <!DOCTYPE html> <html lang=...
  • bobo89455100
  • bobo89455100
  • 2017-07-03 17:00
  • 296

HTML学习笔记(五)表格

表格 表格由 标签来定义。每个表格均有若干行(由 标签定义),每行被分割为若干单元格(由 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
  • SGZ_06_666666
  • SGZ_06_666666
  • 2016-03-30 16:51
  • 4039

html表格样式

本文导读:CSS表格与表单是网页上最常见的元素,表格除了显示数据外,还常常被用来排版。CSS表格作为传统的HTML元素,一直受到网页设计者们的青睐。使用CSS表格来表示数据、制作调查表等在网络中屡见不鲜。同时因为CSS表格框架的简单、明了,使用没有边框的表格来排版,也受到很多设计者的喜爱。下面介绍C...
  • flyyhz
  • flyyhz
  • 2016-07-28 16:56
  • 2225

轻松解决HTML + CSS各种表格问题

表格那些事:简单复杂的表格样式,高度固定表头固定,横向滚动条等。
  • shenmill
  • shenmill
  • 2016-08-07 21:27
  • 711
    个人资料
    • 访问:595718次
    • 积分:7037
    • 等级:
    • 排名:第3886名
    • 原创:240篇
    • 转载:10篇
    • 译文:1篇
    • 评论:214条
    我的微信公众号

    iOS开发者交流群: 官方付费群
    ①群:446310206
    ②群:426087546


    QQ: 点击这里给我发消息


    关注我的技术公众号,每天都有优质技术文章推送。
    微信关注我的公众号
    关注我的微博
    博客专栏
    我的小仓鼠

    有空帮我喂下仓鼠,谢谢!