zoukankan      html  css  js  c++  java
  • 小K的H5之旅-HTML的基本结构与基本标签

    一、什么是HTML

        HTML是超文本标签语言,即网页的源码。而浏览器就是翻译解释HTML源码的工具。

    二、HTML文档的结构

        HTML文档主要包括三大部分:文档声明部分、<head>头部部分、<body>主体部分。

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>我的第一个网页</title>
        </head>
        <body>
        </body>
    </html>

    <!DOCTYPE html>  →这是HTML文档的声明部分,在html5中,已经被简化成了此样式。

    需要注意的是:文档声明必须有!而且必须在文档页面的第一行!

    三、HTML的基本标签

    1.<head>头部部分

        head标签内信息用于描述网页,即元数据(描述网页的基本信息)。

    1.1meta标签

        meta标签描述文档类型和编码、可以描述网页的关键字keywords和描述description。

        meta标签常用属性:
        1.1.2 charset:设置文档的字符集编码格式
                        比如说Html5中设置字符集编码 <meta charset="UTF-8">
                                 >>>常见的几种字符集编码格式:
                                        a.UTF-8 :万国码,又称 Unicode8(此外还有Unicode16)。常用!
                                        b.GB-2312 :国标码。
                                        c.GBK :扩展的国标码。

        1.1.2 http-equiv:将信息写给浏览器看,让浏览器按照这里面的要求执行,需要配合content属性使用。
                         (http-equiv属性只是表明需要设置那一部分,具体的设置内容,放到content属性中)。
                          可选属性值: Content-Type(文档类型) refresh(自动刷新)set-Cookie(设置浏览器cookie缓存) 。

        1.1.3 name:使用方法同"http-equiv"将我们的信息写给搜索引擎看的。
                     常用且需要掌握的属性值:author(作者)keywords(关键字)description(网页描述)。
        

    1.2title标签

        网页的标题,即网页的选项卡上的文字

    1.3link标签

        链接网页与其他文件。

        ↓下面举个栗子↓

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="UTF-8">
     5         <meta name="author" content="http://www.xxxxx.com"/>
     6         <meta name="keywords" content="HTML5,网页,web前端开发"/>
     7         <meta name="description" content="这是我的第一个网页"/>
     8         <title>我的第一个网页</title>
     9        <link rel="icon" href="ivicon.png">
    10     </head>
    11     <body>
    12     </body>
    13 </html>

    2.<body>主体部分

    2.1 标签的分类

         a.块级标签,显示为块,前后隔一行(自动换行)。
         b.行级标签 ,按行从左往右逐一显示。

    2.2 常见的块级标签

         a.标题标签:<h1></h1>......<h6></h6>   特点:h1最大,h6最小,自动加粗。

         b.水平线标签:<hr/>

         c.段落标签:<p></p>

         d.换行标签:<br/>

         e.引用标签:<blockquote></blockquote>
                 重要的cite属性表明引用的来源,一般为网址,且网址不会在网页中展示
                 浏览器一般显示为首行缩进

         f.预格式标签:<pre></pre>
                 浏览器默认显示样式:①显示为等宽字体
                                             ②代码中的换行,空格等元素可在浏览器中直接显示。

         ↓下面举个栗子↓

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>常见的块级标签</title>
        </head>
        <body>
            <h1>h1标题标签</h1>
            <h2>h2标题标签</h2>
            <h3>h3标题标签</h3>
            <h4>h4标题标签</h4>
            <h5>h5标题标签</h5>
            <h6>h6标题标签</h6>
            <hr/>
            <p>这是段落标签,=w= <br />这里是一段文字哟</p>
            <p>只是第二段 <br />=w= look at me!!! </p>
            <blockquote cite="此处一般为网址">
                横眉冷对千夫指,俯首甘为孺子牛
            </blockquote>
            <pre>一二三四五
                              一二三四五</pre>
            </body>
    </html>    

    2.3 基于布局的块级标签

         列表:无序列表、有序列表、定义列表(图文结合)。

         a.有序列表
         <ol> (order list缩写)
           <li>...</li> 列表项可以有n多个
           <li>...</li>
           <li>...</li>
         </ol>

         b.无序列表
         <ul> (unorder list)
           <li>...</li> n多个
           <li>...</li>
           <li>...</li>
         </ul>

         c.定义描述列表
         <dl>
           <dt>一般只有一项</dt> (列表标题)(标题顶格显示)
           <dd>可以有很多项</dd> (列表描述项)(描述项相对标题缩进显示)
           <dd>。。。。。</dd>
           <dd>。。。。。</dd>
         </dl>

         d.组合标签 显示效果:上面是图片,下面是图片的标题,同时图片和标题前代缩进。
         <figure>
           <img/> 图片
           <figcaption></figcaption> 图片的标题。
         </figure>

         e.分区标签

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

         ↓下面举个栗子↓

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>基于布局的块级标签</title>
        </head>
        <body>
            <ol>
                <li>这是第一项</li>
                <li>这是第二项</li>
                <li>这是第三项</li>
            </ol>
            <ul>
                <li>无序1</li>
                <li>无序2</li>
                <li>无序3</li>
            </ul>
            <dl>
                <dt>这是定义列表的标题</dt>  
                <dd>这是描述项1</dd>  
                <dd>这是描述项2</dd>
                <dd>这是描述项3</dd>
            </dl>
            <!--嵌套时,HTML标签一定不能交叉!!-->
            <figure>
                <img src="../img/ivicon.png"/>
                <figcaption>这是图片标题</figcaption>
            </figure>
            <div style="100px ;height: 20px;background-color: blue;">这是一个div
            </div>
           </body>
    </html>

    2.4 行级标签

          行级标签主要有:<span>

                                <em><i>

                                <strong><b>

                                <q>

                                <small><big>

                                <img>

                                <a>

            ↓行级标签的写法及注意事项如下↓

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>常见的行级标签</title>
        </head>
        <body>
            <a name="top"></a>
            <!--span(文本)-->
            <span style="color: red;font-size: 36px;background-color: yellow;">这是span中的文字(作用:无实际意义,对于某些<span style="color: blueviolet;">特别的文字</span>进行样式修改时用此标签包裹)</span>
            
            <br />
            <!--em(强调)-->
            这是一句话,<em>重点</em>在这里
            <!--两者都是斜体,但前者拥有更着重的语气,而后者不具备这一点-->
            
            <br />
            <!--i(倾斜)-->
            这是一句话,<i>重点</i>在这里
            
            <br />
            <!--strong(强调)-->
            这是一句话,<strong>重点</strong>在这里
            <!--两者的区别同上-->
            
            <br />
            <!--b(加粗)-->
            这是一句话,<b>重点</b>在这里
            <!--[注意] 1.强调程度来说:  strong>em;
                       2.HTML5语言,要求标签尽可能的
                           实现语义化。(strong与em所包含的b与i不具备的强调含义)
               -->
             
            <br />
            <!--q(短引用)显示为文字用引号包括-->
            <q cite="">知识短引用中的文字</q>
            
               <br/>
            <!--small(缩小字体)big(放大字体) 【两者可以多重嵌套,但不常用】-->
            <small>这个<small>比上面的<small></small></small></small>
            <br/>
            <big>这个<big>比上面的<big></big></big></big>
            
            <br />
            <!--img(图片)
                1.src: 表示引用图片的地址
                  路径地址的写法:a.★相对路径:以当前文件为准去寻找图片地址。
                                      与当前文件处于同一层的图片直接写图片及其后缀名;
                                      图片在当前文件下一层:文件夹名/图片名
                                      图片在当前文件上一层:../图片名
                                b.绝对路径:严禁使用!!例如file:///D:/111.gif
                                c.网络地址:网络上的图片链接。但是,一般不使用。
                2.height width : 图片的高度和宽度,可以用css样式(style="height: ; ;")所代替
                3.title :图片的标题,当鼠标之上后显示的文字。
                4.alt:当图片无法加载的时候显示的文字。
               *5.Align:图片两边文字所对应图片的位置。(top center bottom)
            -->
            <img src="此处为网络地址"/>
            <!--以上为网络地址写法-->
            <img src="此处为路径"/>
            <!--以上为绝对路径写法-->
            <img src="../img/ivicon.png"/>
            <img src="ivicon.png" />
            <img src="练习用图/ivicon.png" />
            <!--以上为相对路径写法-->
            <a name="weixin"><img src="练习用图/ivicon.png" style="height:100px ;100px ;"title="哈啊哈" alt="这里没显示"/></a>
            <br />
            <img src="QQ图片20170223092045.jpg"/ align="center">12333333333
            <br />
            <!--a(超链接)
                1.href:超链接的路径(网络连接或者本地文件),路径确定同img。
                2.target:blank 新页面打开  self 自身跳转
                3.title:同上
                4.rel(了解):指定当前文档与被连接文档的关系
                    prev(前一片)
                    next(后一篇)
                       ★icon (被链接图片是当前文档的图标)
                       ★stylesheet(被链接文档是当前文档的样式表)
                    prefetch(预加载,当你在当前文档加载完成,利用空余时间,预加载即将链接文档)
                5.锚链接:
                    a.本页面锚链接   s1.设置锚点<a name="name"></a>
                                   s2.在超链接上使用 #name 跳转到对应锚点
                    b.页面间锚链接
                                   在即将跳转的页面某位置设定锚点<a name="name"></a>
                                   在超链接的href属性中使用"页面地址.html#name"
                6.功能性链接:
                    mailto:邮箱地址    用于给指定邮箱发送文件
                    tencen://message/?uin=qq号码  给指定qq发送消息
                                
            -->
            <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="#weixin" target="_self">这是一个超链接,去看微信的</a>
            <a href="练习1.html#qq" target="_self" title="aaaaa">这个是练习一,自身跳转的</a>
            <a href="mailto:xxxxxxx@qq.com">这里发邮件</a>
            <a href="tencen://message/?uin=xxxxxxx">这里发信息</a>
            <a href="ivicon.png" target="_blank">picture</a>
        </body>
    </html>

    2.5 表格

    2.5.1 表格的结构

            表格元素:行 列 格
            表格 <table></table>
            表格的行 <tr></tr>
            每行中的列 <td></td>
            表格的表头 <th></th>( 默认加粗,单元格居中。)

    2.5.2 table的常见属性
         1.border 边框,其增大时,只增加外围框线,单元格边框始终为1像素
         2.cellspacing 单元格之间的间隙距离,当=0的时候,只会是单元格的
         间隙等于0,但不会合并边框线,此时表格中线为两个像
         素,若想使其合并,则★使用 style="border-collapse:collapse"★
         3.cellpadding 单元格里边的文字与边框线的距离(不常用)
         4.width height 宽度和高度
         5.align 表格的对齐方式
           【left right center】
           【注意事项:相当于让表格浮动,会影响其后的元素的原有排列方式】
         6.bgcolor 单元格的背景色,等同于style="background-color:;"
         7.background 单元格的背景图片,等同于style="background-image:;"
         且背景图会覆盖背景色
         8.bordercolor 边框的颜色

    2.5.3 tr td(th)相关属性
         1.width height 单元格的宽度和高度
         2.bgcolor 单元格的背景颜色
         3.align (left right center)单元格中的文字水平对齐方式(text-align 文本居中)
         4.valign (top center bottom)单元格中的文字垂直对齐方式
         5.nowrap 单元格中文字不换行

    【注意】当表格属性与行列属性相冲突时,以行列属性为准
                             (近者优先!!!)
    table中的align控制表格在整个浏览器中的显示位置!
    单元格中的align控制其中文字在单元格中的对齐方式!
    表格的align属性并不影响单元格内文字的水平对齐方式!
    tr的align属性可以控制一行中所有单元格的水平对齐方式!

    2.5.4 表格的跨行和跨列
            跨行:colspan="n列" N行对应删除右边N-1行。
            跨列:rowspan="n行" N列对应删除右边N-1列。

     ↓下面举个栗子↓

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>表格</title>
        </head>
        <body>
            <table width="500" height="200" border="5" style="border-collapse:collapse" cellpadding="20" align="center" bgcolor="aqua" bordercolor="red">
            <caption>我是表格的标题</caption>
            <tr>
            <th width="150" bgcolor="bisque"align="left"valign="top"nowrap="nowrap">表头1</th>
            <th colspan="3">表头2</th>
            </tr>
            <tr>
                <td rowspan="2">1-1</td>
                <td>1-2</td>
                <td>1-3</td>
                <td>1-4</td>
            </tr>
            <tr>
                <td>2-2</td>
                <td>2-3</td>
                <td>2-4</td>
            </tr>
        </table>
        </body>
    </html>    

    2.6 文本级语义

         ↓写法及注意事项如下↓

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>文本级语义</title>
        </head>
        <body>
            <s>this is wrong</s>
            <br />
            <cite>this is cite</cite>
            <br />
            <pre><code>这里面是计算机代码,但不会保留代码格式,需配合pre标签使用</code></pre>
            <br />
            <bdo dir="rtl">千万不要倒过来念</bdo>
            <!--rtl从右往左 ;ltr从左往右-->
            <br />
            请输入<kbd><span style="color: red;">红色文字部分</span></kbd>退出系统
            <!--表示需要用户输入的内容,浏览器显示为等宽字体-->
            <br />
            文本<sup>这是上标文本</sup>
            <br />
            文本<sub>这是上标文本</sub>
            <br />
            &copy;这是版权符号
            <br />
            <u>下划线</u>
            <br />
            <time datetime="0214">这是time标签  12:12</time>
            <br />
            <mark>这是mark标签,高亮或标记文本,浏览器显示为黄色背景</mark>
            <br />
            <date>这是Date标签</date>
            
        </body>
    </html>

    2.7 表单

    2.7.1 表单 form
             一般情况下与table一起使用,但两者互不影响
    2.7.2 重要属性(缺一不可):
            action="表单提交地址"(各种后台语言)<空白则提交本页面>
            method="提交方法"(两个属性值:post[比较安全] get)
      get post的区别:

      get: http://127.0.0.1:8020/HTML5%3d1701wk/HTML基本标签/D4-练习9.html?username=wk&password=12345
      post:http://127.0.0.1:8020/HTML5%3d1701wk/HTML基本标签/D4-练习9.html

      1.get: 使用url传参:http://服务器地址?name1=value1&name2=value2
    (?表示传递参数,?后面采用name=value的形式传递,多个参数之间用&链接)
      ① url传参不安全,所有信息都可以在地址栏看到,并且可以通过地址栏随意传递其他数据,很容易被攻击数据库。
      ② url传参数据量有限,只能传递少量数据。
      2.post: 使用http请求传递数据。url地址栏不可见,比较安全,且传递数据量没有限制。


      All in all:一般用post!

    2.7.3 input常用属性:
          1.type :表示input输入框的类型.
          2.name :input输入框的别名,一般情况下,必填。因为传递数据时使用name=value的形式传递。
          3.value:input输入框的默认值。
          4.placeholder:input的提示内容,当输入框有value的时候提示内容消失。
          5.tabindex="n"(了解):控制点击tab键时的跳转顺序,从最小的开始,逐步往大的数值跳转,获得焦点。


    2.7.4 input特殊属性:
         1.checked="checked"默认选中。
         2.disabled="disabled"设置控制不能使用,用在按钮上不能点击,用在输入框上不能修改。
                                       而且如果输入框disabled,则输入框信息不能往后台传递。
         3.hidden="hidden"隐藏域传值。常用于配合disabled或根据其他需要使用隐藏域传值。

    2.7.5 input-type属性详解:
         1.text:文本输入框。
         2.password:密码输入框,输入内容是显示小黑点。
         3.radio:单选按钮。
                  ① name和value属性必须同时存在,提交时,提交的是value的属性值。
                  ② radio凭借name属性区分是否为同一组,name相同为同组,同组中只能选择一个。
                  ③ checked="checked"(或者只写checked)表示默认选择的选项。
            checkbox:复选按钮。(radio只能选一个,checkbox能选多个)
         4.reset:重置表单数据。将表单数据重置为初始状态。
         5.file:文件上传按钮。现在不常用,常用JS来做。
         6.submit:提交按钮,提交表单数据。
         7.image:图形提交按钮。功能同submit,可以提交数据。
         8.button:普通按钮,没有任何功能。

    2.7.6 下拉框控件select(单选/多选):
          1.写法 :
            <select>
            <option>可以有n多个</option>
            </select>
         2.name属性应该写在<select></select>上,所有选项只有一个name。
         3.option常用属性:
          ① value:当没有value时,传输的是<option></option>内的文字,当value存在时,传输的是value的值。
          ② title:鼠标之上后显示的文字。
          ③ selected=selected:默认选中。
         4.multiple设置select为多选。(一般不用,体验太差。ctrl+鼠标进行多选。)
         5.optgroup:用于将option标签进行分组,用lable表示分组名。(不常用)

    2.7.7 textarea文本域:
          1.写法
          <textarea></textarea>
          2.常见属性:
          ①cols="" rows=""行列(不常用)
            style=";height:;"(常用)
          ②readonly="readonly"不允许编辑。
          ③style="resize:none;"固定宽高,设置为其不允许修改:
          ④style="overflow:;"设置当文字超出区域是如何处理,并不是textarea的专属,div亦可。
                   常用属性值:hidden超出区域的文字隐藏无法显示;
                   scroll无论文字多少均会出现纵横滚动条;
                   auto自动,根据文字多少自动决定是否出现滚动条;
                   也可以通过overflow-x -y分别设置水平垂直方向的显示方式。

    2.7.8 其他属性(不常用):
             <fieldset> [给form表单加上外框]
             <legend>此处是标题</legend>
             </fieldset> [注意:如果想让标题嵌入到边框中,需将标题标签写入到边框标签里面。]
                              [一个表单可以有多个边框组合。]

    2.7.9 HTML5智能表单
          1.H5新增input的form属性,用于指向特定form表单的id,实现input无需放在form标签之中,
    即可通过表单进行提交。
          2.type新增属性,详见表格。
          3.input元素新增属性:
               Autocomplete:自动完成功能——记录用户之前输入的内容,并在下次输入时自动提示完成输入。
                                    【注意】属性值只有两个:on off
                                     可以在form表单上使用,对整张表单的所有空间进行自动完成的开关。
                                     也可以在input上使用,对特定输入框进行修改。
                                     绝大部分浏览器,默认开启。
              Autofocus:自动获得焦点
                              【注意】只能设置一个input元素,自动获得焦点。
              Form:所属表单:通过form表单的id,确定此input输入哪张表单。
              Required:必填 设置input必填,否则阻止提交。
              Pattern:使用正则表达式验证input的模式(详见后续)
              Placeholder:提示内容,当有value时,取消提示。

         ↓下面举个栗子↓

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>表单</title>
        </head>
        <body>
            <input type="color" name="1" form="1">    
            <form action="" method="get" id="1">
                <table >
                    <tr>
                        <td>用户名</td>
                        <td><input type="text" name="username" placeholder="请输入用户名" hidden="hidden"disabled="disabled"value="11111"/></td>
                    </tr>
                    <tr>
                        <td>密码</td>
                        <td><input type="password" name="password" placeholder="请输入密码"/></td>
                    </tr>
                    <tr>
                        <td><input type="submit" value="注册"/></td>
                    </tr>
                    <tr>
                        <td><input type="reset" value="清空"/></td>
                        <td><input type="file" name="value"/></td>
                    </tr>
                    <tr>
                        <td><input type="button" value="这个按钮没啥用!"/></td>
                    </tr>
                    <tr>
                        <td>头像</td>
                        <td><input type="image" src="练习用图/ivicon.png"/></td>
                    </tr>
                    <tr>
                        <td>性别</td>
                        <td><input type="radio" name="sex" value="man" checked="checked"/><input type="radio" name="sex" value="women" /></td>
                    </tr>
                    <tr>
                        <td>爱好</td>
                        <td><input type="checkbox" name="hobby" value="sleep" />睡觉
                        <input type="checkbox" name="hobby" value="eat" />吃饭
                        <input type="checkbox" name="hobby" value="play" />打豆豆</td>
                    </tr>
                    <tr>
                        <td>城市</td>
                        <td>
                            <select name="city">
                                <option value="1" title="11111111111">青岛</option>
                                <option value="2" title="11111111111">烟台</option>
                                <option value="3" title="11111111111">济南</option>
                                <option value="4" title="11111111111">潍坊</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>城市</td>
                        <td>
                            <select name="city">
                                <optgroup label="山东省">
                                <option value="1" title="11111111111">青岛</option>
                                <option value="2" title="11111111111">烟台</option>
                                <option value="3" title="11111111111">济南</option>
                                <option value="4" title="11111111111">潍坊</option>
                                </optgroup>
                                <optgroup label="还是山东省">
                                <option value="1" title="11111111111">青岛</option>
                                <option value="2" title="11111111111">烟台</option>
                                <option value="3" title="11111111111">济南</option>
                                <option value="4" title="11111111111">潍坊</option>
                                </optgroup>
                                
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <textarea style=" 100px;height: 150px;resize: none;" readonly="readonly">
                                这里是服务协议!这里是服务协议!这里是服务协议!这里是服务协议!这里是服务协议!这里是服务协议!
                            </textarea>
                        </td>
                    </tr>
                </table>
            </form>
        </body>
    </html>

    四、写在后面的话

         这篇文章是小K第一次发博文,文章里可能还有许多不恰当的地方,希望各位大神能够帮忙指正,小K现在这里谢谢各位大手啦~

         顺便提一下,小K都是用HBuild写的,安利给大家这个软件,感觉对于初次接触的萌新们来说,这是很好上手的一款软件~

         最后提一下,浩哥好帅~

         







  • 相关阅读:
    操作系统六文件管理
    Educational Codeforces Round 38 (Rated for Div. 2) ABCD
    51nod 1100 斜率最大
    51nod 最小方差
    51nod 1065 最小正子段和
    P1280 尼克的任务
    牛客小白月赛2
    Codeforces Round #210 (Div. 1) B 二分+dp
    江西财经大学第一届程序设计竞赛
    51nod 1596 搬货物
  • 原文地址:https://www.cnblogs.com/wk1102/p/6443725.html
Copyright © 2011-2022 走看看