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

最新推荐文章于 2023-05-23 09:07:01 发布
最新推荐文章于 2023-05-23 09:07:01 发布
阅读量5.9k 收藏 1
点赞数 3
分类专栏： Web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wsyx768/article/details/54767388
版权 
[H5]HTML5样式、链接和表格



<!--
一、HTML样式
1.标签
    <style> :样式定义   通过style来定义一些样式
    <link>  :资源引用   通过link来引用一些css样式进入到页面效果当中
2.属性
    rel="stylesheet"    :外部样式表      外部文件来定义css样式，然后通过link方式来给定一个rel属性，通过stylesheet属性把css样式引入到代码当中进行使用
    type="text/css"     :引入文档的类型   可以引入js文件，也可以引入css文件
    margin-left         :边距            定义距离，从而控制文本、图片等数据的位置

3.样式插入方法：
    1.)外部样式表：
    <link rel="stylesheet" type="text/css" href="outside.css">
    2.)内部样式表：
    <style type="text/css">
    body {background-color:red}
    p {margin-left:20px}
    </style>
    3.)内联样式表：
    <p style="color:red">
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式</title>
    <!--外部样式引用-->
    <link rel="stylesheet" type="text/css" href="outside.css">

    <!--内部样式引用-->
    <style type="text/css">
        p{
            color: blue;
        }
    </style>

</head>
<body>
    <h1>外部样式</h1>
    <p>内部样式</p>

    <!--内联样式引用-->
    <a style="color: orange">内联样式</a>
</body>
</html>

outside.css
h1{
    color: red;
}


<!--
二、HTML链接
1.链接数据
    文本链接
    图片链接
2.属性
    href属性  :指向另一个文档的链接
    name属性  :创建文档内的链接
3.img标签属性
    alt     :替换文本属性
    width   :宽
    height  :高
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接</title>
</head>
<body>
    <!--文本链接-->
    <a href="https://www.baidu.com">文本链接</a>

    <!--图片链接-->
    <a href="https://www.baidu.com">
        <!--alt 若前面获取图片失败时，图片位置会提示alt内容-->
        <img src="images/logo_end.png" width="200px" height="200px" alt="百度logo">
    </a>

    <!--文档内链接-->
    <br/>
    <a name="document">文档内链接</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/><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="#document">跳转到文档内链接</a>
</body>
</html>


<!--
三、HTML表格
标签         描述
<table>     定义表格
<caption>   定义表格标题
<th>        定义表格的表头
<tr>        定义表格的行
<td>        定义表格的单元
<thead>     定义表格的页眉
<tbody>     定义表格的主体
<tfoot>     定义表格的页脚
<col>       定义表格的列属性
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>

    <!--1.没有边框的表格-->
        <table>
            <tr>
                <td>第一行第一列的单元格</td>
                <td>第一行第二列的单元格</td>
            </tr>
            <tr>
                <td>第二行第一列的单元格</td>
                <td>第二行第二列的单元格</td>
            </tr>
        </table>
        <br/>

    <!--2.表格中的表头-->
        <table border="1">
            <tr>
                <th>表头1</th>
                <th>表头2</th>
            </tr>
            <tr>
                <td>第一行第一列的单元格</td>
                <td>第一行第二列的单元格</td>
            </tr>
            <tr>
                <td>第二行第一列的单元格</td>
                <td>第二行第二列的单元格</td>
            </tr>
        </table>
        <br/>

    <!--3.空单元格-->
        <table border="1">
            <tr>
                <td>第一行第一列的单元格</td>
                <td></td>
            </tr>
        </table>
        <br/>

    <!--4.带标题的表格-->
        <!--1.)p标签的标题-->
        <p>标题1</p>
        <table border="1">
            <tr>
                <td>第一行第一列的单元格</td>
                <td>第一行第二列的单元格</td>
            </tr>
        </table>
        <!--2.)caption标签的标题-->
        <table border="1">
            <caption>标题2</caption>
            <tr>
                <td>第一行第一列的单元格</td>
                <td>第一行第二列的单元格</td>
            </tr>
        </table>
        <br/>

    <!--5.表格内的标签-->
        <table border="1">
            <tr>
                <td>单元格1</td>
                <td>单元格2</td>
            </tr>
            <tr>
                <td>
                    <!--ul定义一个表格内的列表-->
                    <ul>
                        <!--列表内每一项用li定义-->
                        <li>项目一</li>
                        <li>项目二</li>
                        <li>项目三</li>
                    </ul>
                </td>
                <td>合计</td>
            </tr>
        </table>
        <br/>

    <!--6.单元格边距-->
        <table border="1" cellpadding="10">
            <tr>
                <td>第一行第一列的单元格</td>
                <td>第一行第二列的单元格</td>
            </tr>
            <tr>
                <td>第二行第一列的单元格</td>
                <td>第二行第二列的单元格</td>
            </tr>
        </table>
        <br/>

    <!--7.单元格间距-->
        <table border="1" cellspacing="10">
            <tr>
                <td>第一行第一列的单元格</td>
                <td>第一行第二列的单元格</td>
            </tr>
            <tr>
                <td>第二行第一列的单元格</td>
                <td>第二行第二列的单元格</td>
            </tr>
        </table>
        <br/>

    <!--8.表格内的背景颜色和图像-->
        <!--1.)背景颜色-->
        <table border="1" bgcolor="aqua">
            <tr>
                <td>第一行第一列的单元格</td>
                <td>第一行第二列的单元格</td>
            </tr>
            <tr>
                <td>第二行第一列的单元格</td>
                <td>第二行第二列的单元格</td>
            </tr>
        </table>
        <br/>

    <!--2.)背景图片-->
        <table border="1" background="images/logo_end.png">
                <tr>
                    <td>第一行第一列的单元格</td>
                    <td>第一行第二列的单元格</td>
                </tr>
                <tr>
                    <td>第二行第一列的单元格</td>
                    <td>第二行第二列的单元格</td>
                </tr>
        </table>
        <br/>

</body>
</html>


示意图：
图1



图2


图3








风浅月明
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
H5 表格冻结首行，首列和最后一行
02-20
页面显示表格，表格的首行冻结，首列冻结，最后一行也冻结，实现数据查看和合计查看的效果。DemoDemoDemoDemo
H5初学概念基础常用样式
lvhezhong123的博客
03-23 718
HTML常用基础样式HTML的概念历史HTML5的功能HTML5的特点浏览器选择Html基本格式HTML文档HTML注释文本元素文本元素解析物理样式基于内容的样式标签分类 HTML的概念 HTML是网页的内容和结构 CSS 是网页的表现形式 JavaScript 是网页的控制 www万维网 和 互联网Internet http即超文本传输协议，是TCP/IP协议簇中应用层的一种协议，默认端口号为80。底层采用的是TCP连接。采用的是一种断开式连接的方式，目前有http1.0和http1.1两个版本，http
H5网页的基本构成
weixin_45689945的博客
09-20 1847
网页的组成
HTML5建立链接的7种方式
热门推荐
mafang9601的博客
05-12 1万+
一、建立超链接： 1、超链接：   &lt;a href="链接目标"target="目标窗口的打开方式"&gt;        target参数的取值有四种：①-self 在当前页面中打开链接 ②-blank 在一个全新的空白窗口中打开链接                              ③-top 在顶层框架中打开链接，也可以理解为在根框架中打开链接 ④-parent 在当前框架的上...
HTML5_4. 链接标签
weixin_52073430的博客
07-09 679
超链接的主要作用是 从一个页面链接到另外一个页面. 链接的语法格式: 用<a> 标签包含我们的文字或图像, 一点击这个文字或图像, 就可以跳转到另外一个页面了, 链接中有两个属性需要我们注意: 必须的一个属性叫做href, 只要写了<a>, 就一定要写herf, herf 的意思就是我们的链接目标 的 地址是哪一个. 属性target(打开页面的方式, 有两种>当前窗口和新窗口), 翻译为 目标, 也就是按照什么样的方式来打开我们的网页, 默认是 _self,..
HTML5文件多媒体播放
zhangbin18607544869的博客
09-28 2242
一)HTML5页面中的多媒体 在HTML5中新增了两个新的元素--video元素和audio元素。 video元素专门用来播放网络上的视频或电影 audio元素专门用来播放网络上的音频数据。 这两个元素的使用方法也是非常简单的，只要把播放音频的url指定的该元素的src就可以了。如下： &lt;video src="http://xxxx.mp3"&gt;你的浏览不支持video属性&l...
HTML5超链接和图片基础用法
星如雨落
04-15 7955
超链接可以是一个文本，也可以是一幅图像，您可以点击这些内容来跳转到新的页面或新的文档或者当前文档中的某个部分。
HTML中link标签属性的用法浅谈
xiaoweids的博客
05-23 704
请注意，不同的浏览器对于这些属性和功能的支持程度可能会有所不同。例如，您可以创建专门针对打印的样式表，当用户打印页面时使用。通过为资源提供一个基于内容的哈希值（如SHA-256），您可以确保资源未被篡改。：该属性用于指定链接资源的MIME类型。可以用于提前加载重要的资源，例如字体、图片或脚本。可以为文档提供替代版本，例如不同语言的页面或适用于不同设备的页面。可以预先建立连接到第三方资源的TCP连接，减少建立连接所需的时间。属性定义了当前文档与链接资源之间的关系。：该属性用于确保外部资源的完整性，可以与。
H5 css的引入方式和使用说明
qq_42467563的博客
10-17 4755
1，简介 css：层叠样式表，cascading style sheet 作用：HTML是页面的骨架，而css是对网页骨架内容的修饰 2，为什么使用： 样式和内容写在一起会显得非常的臃肿，使用css可以将这个样式单独抽取来，可以提高开发效率。 css提供了很多HTML无法替代的显示效果。 单独抽离出来的css可以进行独立加载，能够实现多个页面的共享，可以节约网络带宽就是节约成本。 3...
H5之链接标签
mahuatengbukui的博客
08-18 820
1.超链接：标签：<a>连接名称</a> 属性：href:"对应的网址" target:"blank"打开另一个网页并跳转 :"_self"在本网页跳转 注：如果不写target属性，默认在本网页跳转 在网址的位置写#，意味着跳转一个空网页 ...
HTML5网页中的链接
FOR.GET
09-16 6231
1 网页超链接的概念 1.1 什么是网页超链接   指的是从一个网页向一个目标的链接关系，以特殊的编码的文本或者图形的形式来实现链接，点击该链接，会传送到某个位置，或者打开新的网站。网页中的链接，一般以蓝色字体，文字下有下换线，鼠标放在上面会出现小手的情况，单击即可跳转。如果访问过该链接，其文本则会变色(默认为紫色)。 1.2 超链接的URL   URL是Uniform Resource Locator的缩写，由以下四部分组成：协议、主机名、文件夹名和文件名，网页文件以.html或.htm为扩展名。
h5登录页面模板_html5_h5登录模板_
10-01
HTML5的页面模板，感兴趣的可以互相探讨，小白一枚！
H5 html 和CSS 学习.zip
最新发布
12-28
H5 html 和CSS 学习H5 html 和CSS 学习H5 html 和CSS 学习 H5 html 和CSS 学习H5 html 和CSS 学习H5 html 和CSS 学习 H5 html 和CSS 学习H5 html 和CSS 学习H5 html 和CSS 学习 H5 html 和CSS 学习H5 html 和CSS ...
HTML5实现留言和回复页面样式
09-03
主要介绍了用HTML5如何实现留言和回复样式,需要的朋友可以参考下
jQuery H5股票数据表格插件mmGrid.zip
07-11
代码片段： </div>
[H5]HTML5列表、块和布局
Gamin
02-05 1万+
[H5]HTML5列表、块和布局 [列表] 效果 如：图一 有序列表 --> 无序列表 --> 列表项 --> 列表（自定义）--> 列表项 --> 描述 --> 列表 、 --> 无序列表
[JS]div根据其中内容自适应宽度和高度
Gamin
12-02 9753
这里以自适应高度为例。先要设定好div的width，不用设置div的height属性。后面只需设置minHeight属性或者干脆minHeight属性也不去设置，再保证div是块级元素或绝对/固定位置的元素，这样div就会根据内容自适应高度了。除非有特殊需求否则还是建议自适应高度需要设置minHeight和maxHeight，因为无限制的自适应总会让人担心到时拿到的数据是否合乎规范。 minWidth 属性设置或返回元素的最小宽度，属性只在块级元素或绝对/固定位置的元素发挥作用。 le...
[H5]table里td中内容顶部对齐
Gamin
11-05 8278
<table> <tr> <td> <p>在线实例</p> <ul> <li>HTML实例</li> <li>CSS实例</li> <li>JavaScript实例</li> .
[JS]在JS中调用另一个JS的函数
Gamin
12-07 7664
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标签</title> </head> <body> <script src="js/a.js"></script> </body> </html> a.js function aFunction(.
h5中怎样让表格和表单居中
05-29
要让表格和表单居中，可以使用CSS样式。对于表格，可以将其包裹在一个div中，然后使用以下样式： ```css div { display: flex; justify-content: center; } table { margin: auto; } ``` 对于表单，也可以将其包裹在一个div中，然后使用以下样式： ```css div { display: flex; justify-content: center; } form { margin: auto; } ``` 这样就可以让表格和表单在页面中居中显示了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值