美文网首页
第一节 html一些基础知识

第一节 html一些基础知识

作者: 最美下雨天 | 来源:发表于2018-06-05 14:18 被阅读2次
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"  />
        <title>标题啊</title>
        <meta name="description" content="描述内容" />
        <meta name="keywords" content="关键字1,关键字2..." />

    </head>
    <body>
        
    </body>
</html>
1、title标签

title 标签可能是你网页中最重要的标签,它是你网页中最先看到的部分。把它放在description 与 keyword前。在这个标签中最好是加上你网站的关键字,title标签在搜索引擎的搜索中占有非常重要的地位。最好是把它放在其他meta标签前,这更有利于你网站的排名。(注意:有些搜索引擎会按title标签的字母的优先权进行排名,尽量在你的title中使用开始的字母)title标签是人们在搜索引擎中第一个看到有关你网站的描述,所以尽量把它弄得简单、明了。让人一看就知道你的网站是关于什么的。

description标签

description标签就在title后面,该标签可以是一小段(一个或者两个句子)。用于描述你网站。与title标签一样,这也是人们在搜索引擎列表中链接到你网站的点击。这些描述将鼓动人们去浏览你的网站而不是你竞争对手的。(描述不能太夸张。不然,当访问者到你网站发现内容根本不是你说的那个样子,那么他很快就会退出去。)很多搜索引擎允许描述的字数在150个左右,所以你要保证你的描述在150以下,否则搜索引擎会自动把多余的部分剪去从而造成你网站的描述的不完整。搜索引擎认为描述里的关键字远比网页中的内容要重要(好像现在这种情况不是那么明显了)。真如上所述,这里提供了非常重要的信息:确定你的描述能正确的反映你网站的主题,尽量在描述中加入你主要的关键字,越靠meta的关键字意义越大。这样会突显你的关键字。 现在大多的搜索引擎(google除外)都会支持descriptin标签。如果你不使用的话你将会失去排名靠前的可能。

keywords标签

相比于description与title标签,keywords标签显得并不是那么重要了。有些搜索引擎把它完全地忽略,但是使用下正确的keywords标签对提高排名仍然有效。 除了搜索引擎外,一般情况下人们是看不到的。keywords标签是一个隐藏的标签,向搜索引擎提供了一组与你的页面有关的的关键字或关键短语列表。你可以用相应的工具找出一系列适用于你网站的关键字。(注意:关键字标签中只能包括与你本页内容相关的关键字列表。所有在这里的关键字必须与页面的内容相联系。)

在你每一个页面中组织相关的关键字,每个页面必须专注于不同的产品或者内容。在标签中列满关键字对于提高你网站的排名并没有好处。多个关键字间用逗号用隔,逗号表示是逻辑“或”的意思。空格表示逻辑“与”。这是正式在keywords标签中描述关键字必须的。尽管如此,很多搜索引擎也会把关键字间以空格分开以达到能搜索出更相关的结果的目的。这样做的意义是,搜索引擎会把空格分开的关键字根据一定的方式自由组合

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"  />
        <title>标题啊</title>
        <meta name="description" content="描述内容" />
        <meta name="keywords" content="关键字1,关键字2..." />

    </head>
    <body>
        <!--
        图片的路径:
                    相对路径 :参考自己
                             ./表示同一级目录,可以省略
                             ../上一级目录,不能省略
        
                    绝对路径:就是明确指定了图片的路径或者一个网络图片地址
        -->
        <img  src="img/ic_launcher-web.png" alt="图片加载失败时会显示出来的描述"></img>
        
    </body>
</html>

        <!--打开新页面-->
        <a href="http://www.baidu.com" target="_blank">点击</a>
        <!--不打开新页面-->
        <a href="http://www.baidu.com" target="_self">点击</a>
        <!--即使现在不知道需要跳转到的地址,也需要写个占位符-->
        <a href="#">点击</a>
例子演示table标签
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"  />
        <title>标题啊</title>
        <meta name="description" content="描述内容" />
        <meta name="keywords" content="关键字1,关键字2..." />

    </head>
    <body>
        <table border="1px" align="center">
            <!--
            caption必须放到这儿 ,放其他地方在使用结构化标签时可能有bug
            -->
             <caption align='bottom' > 人员信息登记表</caption>
            <tr bgcolor="aliceblue">
                <th>姓名</th>
                <th>年龄</th>
                <th>生日</th>
            </tr>
            <tr>
                <td>张三</td>
                <td>20</td>
                <td>1991.01.01</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>20</td>
                <td>1991.01.01</td>
            </tr>
        </table>
        
    </body>
</html>

输出:


image.png
html在解析的时候会把table标签作为一个整体来解析,所以如果table内容特别多的时候会解析比较慢,
影响用户体验,所以推荐使用结构化标签
结构化标签

就是用<thead>、</tbody>、</tfoot>来处理</table标签>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"  />
        <title>标题啊</title>
        <meta name="description" content="描述内容" />
        <meta name="keywords" content="关键字1,关键字2..." />

    </head>
    <body>
        <table border="10px" align="center">
            <!--
            caption必须放到这儿 ,放其他地方可能有bug
            -->
             <caption align='bottom' > 人员信息登记表</caption>
             <thead>
                <tr bgcolor="aliceblue">
                <th>姓名</th>
                <th>年龄</th>
                <th>生日</th>
                </tr>
             </thead>
             
             <tbody>
                <tr>
                <td>张三</td>
                <td>20</td>
                <td>1991.01.01</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>20</td>
                <td>1991.01.01</td>
            </tr>
             </tbody>
             
             <tfoot>
                
             </tfoot>
            
            
        </table>
        
    </body>
</html>

小例子:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>标题啊</title>
        <meta name="description" content="描述内容" />
        <meta name="keywords" content="关键字1,关键字2..." />

    </head>

    <body>
        <table border="1px" align="center" cellspacing="0px">
            <!--
            caption必须放到这儿 ,放其他地方可能有bug
            -->
            <caption align='bottom'> 人员信息登记表</caption>
                <tr>
                <th bgcolor="aliceblue" width="30px" rowspan="2">

                </th>
                <th bgcolor="aliceblue" rowspan="2" >
                    序号

                </th>
                <th bgcolor="aliceblue"  rowspan="2">
                    责任人

                </th>
                <th bgcolor="aliceblue" colspan="2">

                    初始计划完成时间
                </th>

                <th bgcolor="aliceblue" rowspan="2" >
                    是否完成

                </th>
                <th bgcolor="aliceblue" rowspan="2" >

                    未完成原因
                </th>
                <th bgcolor="aliceblue">
                    解决方法

                </th>
                <th bgcolor="aliceblue" colspan="2">
                    更改计划完成时间

                </th>
                <th bgcolor="aliceblue" rowspan="2" >
                    备注

                </th>
                </tr>

                <tr>
                    <td>开始时间</td>
                    <td>完成时间</td>
                    <td>(若无解决方法请将问题赋值到例会议题里)</td>
                    <td>开始时间</td>
                    <td>完成时间</td>
                </tr>
                <tr>
                    <td rowspan="6">本周工作总结</td>
                    <td >1</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>2</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>3</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>4</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>5</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                



        </table>

    </body>

</html>

打印:


image.png

发现使用结构化标签时,单元格合并失效

相关文章

  • HTML初入门

    今天开始学习html的相关基础知识,首先是字体和页面的一些基础知识 演示文本 ...

  • 第一节 html一些基础知识

    1、title标签 title 标签可能是你网页中最重要的标签,它是你网页中最先看到的部分。把它放在descrip...

  • html知识总结

    最近想要对前端的一些基础知识进行一些总结,废话不多说,就从html开始吧! 1.HTML的定义 HTML,超文本标...

  • 初学Java Web(3)——第一个Servlet

    这学期 Java Web 课程的第一节课就简短复习了一下 Java 的一些基础知识,所以觉得 Java 的基础知识...

  • R语言练习题-初级

    资料来源:http://www.bio-info-trainee.com/3793.html R语言基础知识的一些...

  • web前端学习第一天(2.14-2.15)

    第一节 HTML基础知识: 1.什么是浏览器? 浏览器帮助用户进行浏览网页的软件,能够让将网页内容呈现给用户查看,...

  • 2018-05-07 html入门

    本篇文章主要写一些html(超文本标记语言,Hyper Text Markup Language)的基础知识(主要...

  • Vue起步

    学习vue需要先了解关于 HTML、CSS 和 JavaScript 的基础知识,和一些ECMAScript5标准...

  • HTML基础知识

    HTML基础知识 HTML的历史:HTML,XHTML HTML的全局属性:全局标准属性,全局事件属性 HTML的...

  • 网页设计学习----万和网页设计学习分享

    今天万和IT教育就和大家分享一些有关于网页设计的基础知识:CSS3、HTML5、JS和框架。 常见的原理 HTML...

网友评论

      本文标题:第一节 html一些基础知识

      本文链接:https://www.haomeiwen.com/subject/flmesftx.html