long8.com

当前位置:龙8官网long8 > long8.com > 【long8.com】HTML的基本结构与基本标签

【long8.com】HTML的基本结构与基本标签

来源:http://www.sketchydesignstudio.com 作者:龙8官网long8 时间:2019-12-01 08:44

一、什么是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>底部部分

long8.com,    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-库克ie(设置浏览器cookie缓存卡塔尔(英语:State of Qatar) 。

    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="width: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中的文字(作用:无实际意义,对于某些特别的文字进行样式修改时用此标签包裹)

        <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: ;width: ;")所代替
            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 ;width: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 单元格里边的文字与边框线的间隔(临时用卡塔尔(英语:State of Qatar)
     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卡塔尔(英语:State of Qatar)单元格中的文字水平对齐方式(text-align 文本居中卡塔尔(英语:State of Qatar)
     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>红色文字部分</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:
  post:

  1.get: 使用url传参:
(?表示传递参数,?后边选用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="width:;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="width: 100px;height: 150px;resize: none;" readonly="readonly">
                            这里是服务协议!这里是服务协议!这里是服务协议!这里是服务协议!这里是服务协议!这里是服务协议!
                        </textarea>
                    </td>
                </tr>
            </table>
        </form>
    </body>
</html>

 

四、写在前边的话

     那篇文章是小K第二回发博文,文章里恐怕还会有众多不安妥的地点,希望各位大神能够帮助指正,小K未来此地谢谢各位大手啦~

     顺便提一下,小K都以用HBuild写的,安利给我们那一个软件,认为对于最初触及的萌新们的话,那是很好上手的风流罗曼蒂克款软件~

     最终提一下,浩哥好帅~

 

     

 

 

 

本文由龙8官网long8发布于long8.com,转载请注明出处:【long8.com】HTML的基本结构与基本标签

关键词:

上一篇:VC6插件3

下一篇:没有了