Web前端之HTML标签总结

Posted Huang_xianlong

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Web前端之HTML标签总结相关的知识,希望对你有一定的参考价值。

Web前端之html标签总结

一、HTML基本原理

网页的原理:用户输入网址之后,对应的服务器就发现有人请求我的网页了,所以这个服务器就会把网页和相关的图片、js文件、css文件、flash文件都通过HTTP协议传输到用户的电脑里面。HTML页面在用户的电脑里面进行渲染。HTTP协议指的是超文本传输协议。每一个网址,都对应了服务器上面的确定的文件。

纯文本文件:只有内容,没有样式。常见的纯文本文件有:.txt、.html、.js、.css、.java。没有语义,即使你这个文件中的内容排版再清晰,那也是人认为的,实际上纯文本文件中的所有的文字生而平等,没有任何的语义。

HTML:超文本标记语言,HyperText Markup Language。就是通过标签对儿,给纯文本增加语义。也就是说,用文本给文本增加语义,所以这个叫做“超文本”。而有一对儿对儿标签,也成为“标记”,所以就是“超文本标记语言”。

二、HTML标签

1.  单标签:
        注释:<!--注释信息--> 快捷键:Ctrl+/
        换行标签:<br>
        横线标签:<hr>
2.  双标签:

  •  标题标签:<h1></h1>;<h2></h2>;<h3></h3>;<h4></h4>;<h5></h5>;<h6></h6>(从大到小)

            注意:一个网页中1号标题标签最好出现一次

  • 段落标签:<p></p>
  • 强调标签:

            文本标签:<font color="颜色属性" size="大小">改变属性</font>   
            加粗标签:<strong>加粗</strong>或者<b>加粗</b>
            文字斜体:<em>斜体</em>或者<i>斜体</i>
            下划线:<ins>下划线</ins>或者<u>下划线</u>
            删除线:<del>删除线</del>或者<s>删除线</s>

  • 没有语义的双标签:

            <div>实现网页布局</div> <!-- 自己独占一行(块元素),可以包含任何标签-->
            <span>在网页布局过程中使用</span> <!-- 不会发生换行(行元素) -->

3.  多媒体标签
        图片标签:<img src="设置一个图片的路径" title="显示鼠标悬停文字提示" alt="图片显示不出来时,显示对图片的描述信息,并不是给用户看的,给搜索引擎提供搜索服务" width="宽度(有一个宽高比,防止图片失真,改变一个属性就可以)" height="高度">
4.  路径问题

  • 绝对路径:

            * 带有磁盘目录的路径
            * 带有具体网址

  • 相对路径:

            * 如果资源文件(img)和当前文件(html)文件在同一个文件夹中,只要写文件的名称即可
            * 如果资源文件(img)在当前文件的下一级目录:src='image/1.png'
            * 如果资源文件(img)在当前文件的上一级目录:src='../../image/1.png'
5.  超链接
        <a href="涉及到相对路径和绝对路径问题" title="显示文字提示">不跳转到任何页面写"#"</a>
        <a href="#" target="默认值'_self':在当前页面中显示跳转页面,'_blank':跳转到新的窗口中打开页面">不跳转到任何页面</a>
        超链接跳转页面的其他写法:在<head><base target="_blank"></head>,跳转到新的窗口中(对当前页面的任何超链接都有效)

6.  锚链接(超链接的另外一种用法,实现的是本页面的内部的跳转)
        <a href="#">跳转到顶部</a>
        <a href="#ID值">跳转到固定部分</a> 
        使用时需要给需要跳转的标签设定ID值

7.  meta标签的用法;
        <meta charset="UTF-8">:防止页面乱码
        <meta name="keywords" content="女装、男装">:设置网页关键字,不是给用户用的,对搜索引擎提供帮助
        <meta name="discription" content="设置网页描述信息">:设置网页描述信息,不是给用户看的,是给搜索引擎看的
        <!-- 网页重定向 -->
        <meta http-equiv="refresh" content="3;https://www.baidu.com/">:三秒后重新定位新的域名

8.  link用法:
        <link rel="icon" href="favicon.ico">:设置网页图标
            注意;最好将图标放到网页的跟目录下,IE浏览器不支持这种方式,若果把网页放在服务器上,IE浏览器就支持这种方式

9.  列表标签

  • 无序列表

        <ul type="circle">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
        </ul>
       注意:* 无序列表中的列表项(li)可以包含任何标签
                  * 使用场景

  • 有序列表

       <ol type="I">
             <li></li>
             <li></li>
             <li></li>
             <li></li>
      </ol>

  •  自定义列表

     <dl>
            <dt>标题</dt>
            <dd>列表项</dd>
            <dd>列表项</dd>
     </dl>
     注意:* 在dt列表中只能包含行内元素(span,a)
               * 在dd列表中可以包含任何元素、标签 
10.  表格
       行:<tr></tr>
       列:<td></td>
       表格:<table></table>
       表格的作用:显示数据、网页布局
       属性;
            border:设置边框,默认为0,无边框
            cellspacing="0":设置td与td之间的距离,默认值为2
            width="400"
            cellpadding="10":设置内容与td左侧之间的距离
            align="center":移动标签的位置,默认值left,设置对齐方式,如果给table设置align属性,智能让整个标签居中,内容不会居中,如果给tr或者td设置align属性,可以使内容居中
            bgcolor="red":设置背景颜色

例子:

    <table border="1" width="400" height="50" cellpadding="10" cellspacing="0" align="center">
        aption><strong>人员信息表</strong></caption>
        <tr align="center" bgcolor="red">
                    <th>姓名</th>
                    <th>年龄</th>
                          <th>体重</th>
                          <th>职业</th>
                          <th>性别</th>
                      </tr>
              <tr align="center" bgcolor="green">
                          <td>张三</td>
                          <td>22</td>
                          <td>58kg</td>
                          <td>bigdata</td>
                          <td>male</td>
                      </tr>
              <tr align="center" bgcolor="green">
                          <td>李四</td>
                          <td>21</td>
                          <td>58kg</td>
                          <td>deeplearning</td>
                          <td>female</td>
                      </tr>
    </table>

  • 表格中的标签:

            表头标签:<th></th>,用法与<td></td>相同
            标题标签:<caption>标题</caption>
            表格结构:
                table[border="1" width="400"cellspacing="0"]>tr*4>td*4直接按tab键,产生表格
                <table>
                    <thead></thead>
                    <tbody></tbody>
                    <tfoot></tfoot>
                </table>
                注意:表格一般就是这种结构,但是一般现在不采用这个了,浏览器可以自动产生<tbody></tbody>结构
            合并单元格:
                横向合并:<td colspan="2"></td>
                纵向合并:<td rowspan="2"></td>
                注意:会自动寻找下一行进行合并,所以必须要把相关的<td></td>标签删掉
            细线表格的绘画:
                <table align="left" cellspacing="1" cellpadding="10" width="400" bgcolor="green">
                    <tr bgcolor="white">
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr bgcolor="white">
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr bgcolor="white">
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr bgcolor="white">
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </table>
11.  表单:收集用户的信息

  • 表单组成:

            提示信息
            表单控件(重点)
            表单域

  • 表单域:

            <form action="" method=""></form>
            action:设置后台处理数据的后台程序
            method:提交数据给后台程序的方式
                      get提交数据:将数据显示在地址栏中,具有数据大小的限制
                      post提交数据:会通过后台异步提交数据,安全性好

  • 表单控件:

            文本输入框:<input type="text" name="" maxlength="6" readonly="readonly" value="">
                maxlength:设置最大程度
                readonly="readonly":设置控件为只读模式
                disabled="disabled":禁止用户输入
                value="":设置默认值
                name="":控件名称,后台程序通过这个属性获取对应的数据
                id="":设置ID编号,也可以通过这个获取
            密码输入框:<input type="password" name="pwd">
                该控件的属性和文本输入框相同
            单选输入按钮:<input type="radio" name="" checked="checked">
                name="":备选值的name属性要设置一致
                checked="checked":设置默认选中项
            下拉列表:
                <select multiple="">
                    <option value="hb">北京</option>
                    <option>广东</option>
                    <option>上海</option>
                    <option selected="selected">湖南</option>
                  </select>
                  属性:
                    selected="selected":设置默认选中项
                    multiple="":实现多选效果
            其他写法:
                <select>
                    <optgroup label="河北省">
                        <option>张家口</option>
                        <option>石家庄</option>
                        <option>邯郸</option>
                        <option>张北</option>
                    </optgroup>
                </select>

            多选控件:<input type="checkbox" checked="checked" name="">
                checked="checked":默认选中项
            上传资源控件:<input type="file" name="">
            文本域:<textarea></textarea><br>
            隐藏控件:<input type="hidden" name="" value="123">
            按钮:
                提交按钮:<input type="submit" name="submit">
                普通按钮:<input type="button" name="" value="取消">:不能提交表单数据
                重置按钮:<input type="reset" name="" value="重置">
            分组控件和标题:<fieldset><legend></legend></fieldset>

12.  特殊符号
        "空格字符": &nbsp:
        "<": &lt;
        ">": &gt;
        "&":&amp;
        "¥":&yen;
        "版权":&copy;
        "注册商标":&reg;
        "摄氏度":&deg;
        "正负号":&plusmn;
        "乘号":&times;
        "除号":&divide;
        "平方2":&sup2;
        "平方3":&sup3;

13.  HTML5里面的标签(补充):

  •  版本介绍;

            html:4s+tab或者4t+tab或者xt=tab:产生不同的HTML版本,过渡版本和严格版本
            过渡版本Transitional:可以包含所有的html元素(标签)和属性
            严格版本strict:可以包含所有的html元素(标签)和属性,但是不包含已经废弃掉的标签,例如font、i和属性(align属性)

  • 新标签:

            <header>头部标签</header>
            <nav>导航标签</nav>
            <section>区域</section>
            <footer>底部</footer>
            <aside>侧边栏</aside>
            <article>文章</article>
            <!-- 注意:以上的标签和div的用法一样,如果在IE浏览器中无法显示上面的标签,只需要CSS样式中动态的写一个相同名字的标签即可 -->
            <!-- 视频标签 -->
            <video src="movie.mp4" controls="显示控制面板" autoplay="自动播放" loop="循环播放"></video>
            <video src="movie.mp4" controls autoplay loop width="500"></video>
            <!-- 宽度高度只设置一个即可 -->
            <!-- 多种视频格式 -->
            <video controls >
                <source src="movie.mp4" type="">             
                <source src="movie.rmvb" type="">          
            </video>     
            <!-- 音频标签 -->
            <audio src="See You Again.mp3" controls autoplay loop></audio>
            <audio src="See You Again.mp3"></audio>

以上是关于Web前端之HTML标签总结的主要内容,如果未能解决你的问题,请参考以下文章

Web前端之HTML标签总结

Web前端开发笔记——第二章 HTML语言 第三节 文本格式化标签

前端知识点简要总结

html学习总结

Java学习总结(二十三)——前端:HTML基本标签的使用

Web前端三大核心技术之HTML