必威体育Betway必威体育官网
当前位置:首页 > IT技术

网站建设学习(一)——HTML文本标签

时间:2019-07-05 13:40:00来源:IT技术作者:seo实验室小编阅读:72次「手机版」
 

网站建设学习

接下来的一系列文章将会以代码的形式进行网站的建设学习,代码可以直接运行,解释将以注释的形式展现,浏览器使用的为谷歌版本65.0,后续除了网页建设的基本操作外还会将构建过程中遇见的一些坑以及网站发布兼容等一些问题整理成博客

<!--html: hyper text markup language 超文本标记语言

    超级文本:可以对文本进行设计,布局,装饰等等操作
    标记:标签的各种布局,可以进行文本设计,标签包括开始与结束
-->


<!--开始设计一个HTML页面-->

<html>
<!--  标签html:内部包含整个HTML页面,所有的设计均在当前的html标签内部进行-->
    <head>
    <!--整个文件的头部,里面包括一些属性供浏览器识别解析,对用户不可见-->

        <title>标题</title>
        <!--标签title,说明整个页面的标题,最终显示在浏览器加载页面的标签页-->

        <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
        <!--告诉浏览器以utf-8的码表进行解码,防止中文乱码,meta标签是无标签体标签,结束在开始标签后加反斜杠,即空标签-->

        <meta name="keywords" content="html,展示"/>
        <!--展示此网页的关键词,供搜索引擎使用,以“,”分开,其中关键词个数为权重,越多权重越低,一般为3到5个-->

        <meta name="description" content="html编程学习"/>
        <!--网页描述,展示在搜索引擎的网页的索引页面-->
    </head>


    <body>
    <!--整个文件的体,设计元素在这个部分中,最终展示给用户-->

    <!--文本类型标签,主要对文本格式和形式进行操作,不同标签表现形式可能相同,但对于标签引用有重大作用,因此要养成良好的编程习惯-->
        <h1>标题一</h1>
        <h2>标题二</h2>
        <h3>标题三</h3>
        <h4>标题四</h4>
        <h5>标题五</h5>
        <h6>标题六</h6>
        <!--文本网页的标题,显示在网页上,共六种标题标签,从上之下依次变小-->

        <hr/><!--表示一条水平线-->
        <br/><!--表示换行-->

        <p>段落段落段落段落段落段落段落段落段落段落段落段落段落</p>
        <!--标签p表示一个段落,与其他段落明显分开,自成一段-->

        <abbr title="The Day Of You">TDOY</abbr>
        <!--一个词定义为缩写,在网页展示时,鼠标处在位置会展示其全称-->

        <address>联系地址</address>
        <!--展示地址文本,为斜体模式-->

        <b>字体</b>
        <!--以粗体文本展示-->
        <i>字体</i>
        <!--以斜体文本展示-->
        <tt>字体</tt>
        <!--以打印机文本展示-->
        <big>字体</big>
        <!--以大字体文本展示-->
        <small>字体</small>
        <!--以小字体文本展示-->
        <strike>字体</strike>
        <!--已删除线定义字体--><br/>

        <em>强调</em>
        <!--突出强调文本-->
        <strong>更强</strong>
        <!--突出更加强调文本-->
        <code>
            #include<iOStream>
            using namespace std;
            int main(){
                return 0;
            }
        </code>
        <!--标识一段代码,但也是以文本显示-->
        <kbd>键盘文本</kbd>
        <!--定义键盘文本-->
        <cite>文献引用</cite>
        <!--定义文献引用-->
        <time>12:00</time>
        <!--定义时间--><br/>

        <blockquote>段落缩进段落缩进段落缩进段落缩进</blockquote>
        <!--用于段落缩进,将一段文字居中显示-->
        <pre>
            #include<iostream>
            using namespace std;
            int main(){
                return 0;
            }
        </pre>
        <!--以原本编写的形式原样输出--><br/>

        <sub>下标</sub>
        <sup>上标</sup>
        <!--上下标,数学式商标等的表示--><br/>
        <ruby>
            你好<rt>ni hao</rt>
        </ruby>
        <!--注释,rt标签为注释内容--><br/>

        有序选项:
        <ol type="i">
            <li>A</li>
            <li>B</li>
            <li>C</li>
        </ol>
        <!--有序列表,type表示排序的形式-->

        无序选项:
        <ul type="square">
            <li>A</li>
            <li>B</li>
            <li>C</li>
        </Ul>
        <!--无序列表,type表示头标的形状-->

        两级列表:
        <dl>
            <dt>第一级</dt>
            <dd>第二级</dd>
            <dd>第二级</dd>
            <dd>第二级</dd>
        </dl>
        <!--两级列表使用-->

    </body>

</html>

网页编程规范参考链接:w3school 在线教程

这其中有不合适或者不正确的地方欢迎指正,我的QQ号码:2867221444(乔金明),谢谢,也可以相互交流下,备注信息随意,只要能看得出是开发者或者学习者即可。

相关阅读

网站建设应该避免哪些错误

  越来越多的企业开始对网站建设进行大力度的投入,通常情况下要通过网站在短时间里见到经营的效果是比较难的。如果因为不合规定

网站建设走好这几步没大错

  制作好品牌网站它的服务性能不一定要很突出,更多的表现在安全稳定性、畅快舒适性、高效实用性3个方面,而要想让网站达到了这些

网站建设前期有哪些需要策划

网站搭建之前,还有很多工作是要做的。不论是什么事,都应该在行动前有一个策划,想想该怎么做,需要提前准备好什么,会得到什么样的后果等

极简主义对网站建设的作用

极简主义近几年在网页设计中经常被运用到,正是因为极简主义的元素过于简单,设计师想要把设计尺度拿捏准确是非常难的,一个好的网页设

Java技术对网站建设有什么好处

  工程师为消费类设备开发了这种语言,并使其与当时适度的CPU兼容时保持了简单性。从那时起,这种面向对象的语言已用于创建简单到

分享到:

栏目导航

推荐阅读

热门阅读