zoukankan      html  css  js  c++  java
  • 学习html总结(一)

    学习html总结(一)

    一、什么是HTML

    HTML是HyperText Markup Language的缩写,翻译成中文是超文本标记语言,用于网页的创建。

    二、HTML的基本结构

    主要包括<!DOCTYPE html>文档类型、<head>头部和<body>主体三部分。

    复制代码
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
        </body>
    </html>
    复制代码

    三、HTML的头部

    1、meta标签

    1.1charset 设置文档的字符集编码格式

    <meta charset="UTF-8">

    常见的几种字符集编码格式:
                                        a.UTF-8 :万国码(最常用)。
                                        b.GB-2312 :国标码。
                                        c.GBK :扩展的国标码。

    1.2name 将该网页的信息写给搜索引擎看

    <meta name="keywords" content="这是搜索网页的关键字"/>
    <meta name="description" content="这是网页的介绍"/>

    第一行是网页的关键字,用于搜索该网页。第二行是网页的介绍。

    常用的name属性值有:author(作者)keywords(关键字)description(网页描述)。

    2、title标签——网页的标题

    <title>这是网页的标题</title>

    四、HTML的主体

    1、标签的分类:块级标签和行级标签

    1.1块级标签:显示为块状,前后隔一行(自动换行)

    a.标题标签 <h1>到<h6>,h1最大,h6最小。

    复制代码
    <h1>111111111111</h1>
    <h2>111111111111</h2>
    <h3>111111111111</h3>
    <hr />
    <!--水平线-->
    <h4>111111111111</h4>
    <h5>111111111111</h5>
    <h6>111111111111</h6>
    <hr />
    复制代码
     
    b.<p></p>段落标签
     
    c.<hr />水平线标签
     
    d.<br/>换行标签
     
    e.<pre></pre>预格式标签
    <pre>这是预格式标签
                    可以换行</pre>
            <!--预格式标签,可以保留代码的排版格式-->

    f.<blockquote></blockquote>引用标签

    g.有序列表ol和无序列表ul

    <ol>
                <li>有序列表</li>
                <li>有序列表</li>
                <li>有序列表</li>
     </ol>
    <ul>
                <li>无序列表</li>
                <li>无序列表</li>
                <li>无序列表</li>
            </ul>

    h.定义描述列表dl

    复制代码
    <dl>
    
            <dt>定义列表标题</dt>
    
            <dd>描述项第一项</dd>
    
            <dd>描述项第二项</dd>
    
    </dl>
    复制代码

    i.分区标签

         <div></div>  可以包裹任何标签,也可以被包裹进任何标签。

    1.2行级标签:按行从左往右逐一显示。
     
    a.常用的行级标签:
     
    <span>无实际意义,用于包裹某部分文字,修改特定样式</span> 
     
    <em>表示为强调,字体倾斜</em>
     
    <strong>表示强调,字体加粗</strong>
     
    <i>表示切斜,没有强调效果 </i>
     
    <b>表示加粗,没有强调效果</b>
     
    <q>“表示短引用,自带双引号”</q>
     
    <small>字体比正常字体小一号,可以多重嵌套</small>
     
    <big>字体大一号</big>
     
    <s>表示有误文本,删除线</s>
     
    <cite>表示引用,浏览器表示为倾斜</cite>
     
    <bdo dir="ltr">表示文本方向,ltr:从左往右 rtl:从右往左</bdo>
     
    X<sup>2</sup> X的平方  sup:上标文本 sub:下标文本
     
    © &copy; 空格 &nbsp;
     
    <u>这是下划线标签</u>
     
    <mark>高亮或标记文本 浏览器显示为黄色背景</mark>
    复制代码
            <span style="color: red;font-size: 33px;">姜浩是我大哥</span>
            <!--color 字体颜色 font-size 字体大小 background-color 背景颜色 font-weight 加粗-->
            
            <em>表示为强调,字体倾斜</em>
            <strong>表示强调,字体加粗</strong>
            <i>表示切斜,没有强调效果</i>
            <b>表示加粗,没有强调效果</b>
            
            <q>表示短引用,自带双引号</q>
            <small>字体比正常字体小一号,可以多重嵌套</small>
            <big>字体大一号</big>
            <s>表为倾斜</cite>
            <code>表示计算机代码,但不会保留格式,需要配合示有误文本,删除线</s>
            <cite>表示引用,浏览器表示pre标签使用</code>
            <bdo dir="ltr">表示文本方向,ltr:从左往右      rtl:从右往左</bdo>
            X<sup>2</sup>
            <!--sup:上标文本 sub:下标文本-->
            <!--版权符号 空格-->
             © &copy;  空格&nbsp;
            <u>这是下划线标签</u>
            <mark>高亮或标记文本  浏览器显示为黄色背景</mark>   
    复制代码

    b.超链接   <a href="" target=""></a>

    复制代码
            <a href="https://www.baidu.com/" target="_blank" title="打开百度">表示超链接</a>
            <!--href表示跳转的地址;
                target表示页面打开的位置:self自身页面打开(默认),blank新页面打开;
                title表示超链接的标题,也就是鼠标指上去显示的东西-->
            <a href="练习.html#bottom">打开超链接</a>
            <!--相对路径的三种情况:
            如果在同一文件夹,直接写“文件名.后缀”
            如果在下一层文件夹,写“文件夹名/文件名.后缀”
            如果在上层文件夹,写“../文件夹名/文件名.后缀”  ..的意思是上一层文件夹,类似后退-->
    复制代码

    c.锚链接

    自身页面锚链接:先定义锚点<a name=name1>、设置超链接跳转到锚点<a href="#name1">

    页面间锚链接:先在另一个页面设置锚点<a name=name2></a>,然后在本页面跳转链接,<a href="链接地址#name2">

    d.功能性连接:mailto 用于给指定邮箱发送邮件   http   file   ftp

    <a href="mailto:j.com" target="_self">点击就送</a>
  • 相关阅读:
    VC计时器的一个使用心得
    从送新年礼物给外甥想到的
    对公司用人的一些思考
    [Python学习]PycURL简单学习 limodou的学习记录 limodou是一个程序员,他关心的焦点是Python, DocBook, Open Source …
    Django tips: the difference between 'blank' and 'null'
    django 单独使用数据模型
    Django application as a standalone desktop application at finally{}
    和煦: curl_setopt($ch, CURLOPT_RETURNTRANSFER,1) 使用
    [sqllite]c语言操作sqlite一: 连接sqlite数据库
    使用curl抓取网页遇到HTTP跳转时得到多个HTTP头部的问题
  • 原文地址:https://www.cnblogs.com/wuqiance/p/11269016.html
Copyright © 2011-2022 走看看