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

 

       接下来的一系列文章将会以代码的形式进行网站的建设学习,代码可以直接运行,解释将以注释的形式展现,浏览器使用的为谷歌版本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(乔金明),谢谢,也可以相互交流下,备注信息随意,只要能看得出是开发者或者学习者即可。

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值