zoukankan      html  css  js  c++  java
  • HTML入门--基础标签篇(1)

    前言:个人的学习习惯,学过的知识如果没有总结总觉得没有掌握,刚好周末回顾总结下基础知识。

    第一部分:HTML初始

      1.什么是HTML?

        HTML指的是超文本标记语言(Hyper Text Markup Language),是由一套标记标签组成的标记语言,用于描述、构造网页。

      2.HTML元素?

        HTML元素指从开始标签到结束标签的所有代码,开始标签称为开放标签,结束标签称为闭合标签。

      元素语法:

        1>以开始标签起始,以结束标签终止,大多数可以用于属性。

        2>空元素在开始标签中进行关闭。

        3>HTML元素之间可以进行嵌套,网页就是由嵌套的元素所组成。

        4>HTML元素不区分大小写,但是标准中推荐使用小写。

        <!-- 开始标签和结束标签都有 -->
        <p>HTML元素的基本语法,用于开始标签和结束标签的双标签</p>
        <!-- 用于属性的标签 -->
        <a href="http://www.baidu.com"></a>
        <!-- 空元素在开始标签就结束 -->
        <br/>

    第二部分:HTML基础元素

      1.标题标签(h*)

      HTML中标题是通过<h1> - <h6>标签进行定义的,h1到h6标题依次从大到小。

      特点:标题标签在HTML中属于块级元素,会单独的占据一行。

        <!-- 标题标签时块元素,会独占一行 -->
        <h1>This is a heading</h1>
        <h2>This is a heading</h2>
        <h3>This is a heading</h3>

      注意:

        标题是语义化标签,正确用法只用于标题,不要仅仅为了产生粗体或大号文本而使用。

      2.水平线标签(hr)

      <hr/>标签在HTML页面中创建水平线,可用于分隔内容。

        <!-- hr水平线标签用于分隔内容 -->
        <p>This is a paragraph</p>
        <hr />
        <p>This is a paragraph</p>
        <hr />
        <p>This is a paragraph</p>

      3.段落标签(p)

      段落可以把HTML文档分割为若干段落,通过<p>标签定义。

      p段落也是块级元素,会独占一行,浏览器会在段落的前后添加空行。

        <!-- p段落标签也是块级元素,会独占一行 -->
        <p>This is a paragraph</p>
        <p>This is another paragraph</p>

      4.换行标签(<br/>)

      在段落内部,不产生新段落的情况下进行换行,使用<br/>

        <!-- br在段落内对内容进行换行 -->
        <p>This is<br />a para<br />graph with line breaks</p>

      注意:当显示页面时,浏览器会移除源代码中多余的空格和空行。所有连续的空格或/空行都会被当做一个空格。

      5.超链接(a)

      HTML使用超链接与网络上的另一个文档相连,点击链接可以从一个页面跳到另一个页面。

      超链接可以是一个字、或一组词,也可以是一副图像,点击可以跳转新页面也可以跳转到当前页面的其他部分。

      举例:跳转至新页面/跳转当前页面某部分

        <!-- 跳转到新页面,百度首页 -->
        <a href="http://www.baidu.com">百度</a>
        <br>
        <!-- a标签有id属性 -->
        <a id='top'>顶部</a>
        <br/>
        回到顶部
        <br/>
        回到顶部
        <br/>
        <!-- href属性通过#top,可以定位到同页面id为top的a标签 -->
        <a href="#top">回到顶部</a>

      超链接为图像:

        <a href="index2.html">
            <img border="0" src="/img/logo.gif" />
        </a>

      举例:不同页面间锚定位

        先创建index2.html文件

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <a id="index2">index2页面上的锚点</a>
    </body>
    </html>

      跨页面的锚点跳转:点击a超链接跳转至index2页面。

    <body>
        <a href="index2.html#index2">跳转至index2.html</a>
    </body>

      a标签实现发短信、打电话、发邮件、定位等功能

        <div id="my">
            <!-- 实现打电话 -->
            <a href="tel:xxxxxxxxx">xxxxxxxxxxxx</a>
            <!-- 实现发邮件功能 -->
            <a href="mailto:c1586@qq.com?subject=TestObject">c6088@qq.com</a>
            <!-- 实现发短信功能 -->
            <a href="sms:10086?body=message_body">给 10086 发短信</a>
            <!-- 实现定位功能 -->
            <a href="geopoint:116.281469,39.866035">我的位置</a>
        </div>

      a标签的target属性:

      target属性定义被链接的文档在何处显示。

      取值:_blank在--新窗口打开,_self--在当前窗口打开,_top--(跳出框架)。

      注意:请始终将正斜杠添加到子文件夹。假如这样书写链接:href="http://www.w3school.com.cn/html",就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址,然后创建一个新的请求,就像这样:href="http://www.w3school.com.cn/html/"。

      6.图像标签(<img>)

      通过使用HTML中的<img>标签在文档中显示图像,<img>是空标签,只包含属性没有闭合标签,使用src属性显示图像。

        <div id="testImg">
            <!-- src表示图像的存储路径,alt表示昂src图片找不到时的提示信息 -->
            <img src="./img/cat.jpg" alt="当前图片丢失">
        </div>

      注意:假如 HTML 文件包含十个图像,为了正确显示这个页面,需要加载 11 个文件,也就意味着需要发送11个请求,增加了服务器的压力,所以要'慎用图片'。

      图像映射:<map><area></area></map>

      我们经常会给图片绑定超链接,方便用户欣赏大图或者跳转页面。HTML有个图像映射的功能,可以在一张大图的不同区域绑定链接,让用户可以有更新奇的体验。

      示例:详细参照--http://www.w3school.com.cn/tags/tag_map.asp

    <body>
        <!-- img中需要使用usemap属性关联映射map元素 -->
        <img src="./img/bigDog.jpg" usemap="#umap" alt="猫和狗" />
        <!-- map元素中需要设置id表示,以便img标签引用 -->
        <map id="umap" name="umap">
            <!-- area表示在img图像中这是不同的区域。 -->
            <!-- shape表示区域的形状,coords表示区域的坐标位置,href表示该区域的跳转的资源,可以是图片也可以是页面 -->
            <area shape="rect" coords="220,180,420,400" href="./img/smlDog1.jpg"
                alt="狗1" target="_blank" />
            <area shape="circle" coords="685,340,130" href="./img/smlDog2.jpg"
                alt="狗2" target="_blank" />
        </map>
    </body>

      7.表格及其子元素

      表格由table标签定义,行由<tr>定义,单元格由<td>定义。主要用来格式化显示数据。

      表格边框、标题、内外边距:border/cellpadding/cellspacing

    <body>
        <!-- border为表格及单元格都添加了边框,通过cellpadding可以设置单元格的内边距,cellspacing设置单元格的外边距 -->
        <table border="1" cellpadding='10' cellspacing='10'>
            <!-- th表示表格表头 -->
            <tr>
                <th>语文</th>
                <th>数学</th>
            </tr>
            <tr>
                <td>100</td>
                <td>96</td>
            </tr>
            <tr>
                <td>87</td>
                <td>100</td>
            </tr>
        </table>
    </body>

      跨行、跨列:rowspan/colspan

    <!-- colspan表示合并多列 -->
        <table border="1">
            <tr>
                <th>姓名</th>
                <th colspan="2">电话</th>
            </tr>
            <tr>
                <td>Bill Gates</td>
                <td>555 77 854</td>
                <td>555 77 855</td>
            </tr>
        </table>
        <!-- rowspan表示合并多行 -->
        <table border="1">
            <tr>
                <th>姓名</th>
                <td>Bill Gates</td>
            </tr>
            <tr>
                <th rowspan="2">电话</th>
                <td>555 77 854</td>
            </tr>
            <tr>
                <td>555 77 855</td>
            </tr>
        </table>

      8.html中的列表

      HTML支持有序、无序、自定义列表,主要用来显示列表格式的数据。

      无序列表:

        <!-- 默认样式是大黑点,可以使用type属性设置样式
            type取值:square/disc/circle等
        -->
        <ul type='disc'>
            <li>篮球</li>
            <li>羽毛球</li>
            <li>游泳</li>
            <li>跑步</li>
        </ul>

      有序列表:

        <!-- 默认样式是数字,可以使用type设置样式
            type: A/a/I/i
        -->
        <ol type="A">
            <li>苹果</li>
            <li>香蕉</li>
            <li>柠檬</li>
            <li>桔子</li>
        </ol>

      自定义列表:

        <h2>一个定义列表:</h2>
        <dl>
            <dt>计算机</dt>
            <dd>用来计算的仪器 ... ...</dd>
            <dt>显示器</dt>
            <dd>以视觉方式显示信息的装置 ... ...</dd>
        </dl>

      注意:ul/ol直接子元素只能是li标签,li标签中可以嵌套其他元素标签。

      9.html中的表单元素

      HTML表单主要用于收集不同类型的用户输入,由form及不同类型的input元素组成。

      input常用元素:

        text、password、radio、checkbox、button、reset、submit

        <form action="#">
            用户名:<input type="text">
            <br/>
            密码:<input type="password">
            <br/>
            <!-- 注意:radio类型必须添加相同的name属性,这样才能实现单选功能 -->
            性别:
                <input type="radio" name="gender" value="male"><input type="radio" name="gender" value="female"><br/>
            爱好:
            <input type="checkbox" name="hobby" value="basketball">篮球
            <input type="checkbox" name="hobby" value="swim">游泳
            <input type="checkbox" name="hobby" value="volleyball">排球
            <br/>
            <!-- submit只会提交带有name属性的input元素的值 -->
            <input type="submit" value="submit">
        </form>

      注意:上例中单选按钮需要添加相同的name属性,而且其中的value是才是真正提交的值,submit只会提交带有name属性的input值。

      form元素及属性:更多新的属性可以参考我的html5部分

        <!-- action:表示数据提交给后台的路径
        method:表示数据的提交方式,有get和post两种取值,默认是(get)
        target:表示提交操作的打开方式
        accept-charset:规定字符编码方式
        ectype:规定被提交数据编码,默认是(url-encodeed)
        autocomplete:设置是否开启表单的自动补全
        novalidate:设置表单提交时是否进行验证。
        -->
        <form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8" ectype="application/x-www-form-urlencoded"
            autocomplete="off" novalidate>
            input elements
        </form>

      fieldset元素:可以使用fieldset元素对form表单元素进行组合格式化

        <form action="#">
            <fieldset style=" 30%;">
                <legend>用户信息统计表</legend>
                用户名:<input type="text">
                <br/>
                密码:<input type="password">
                <br/>
                <!-- 注意:radio类型必须添加相同的name属性,这样才能实现单选功能 -->
                性别:
                    <input type="radio" name="gender" value="male"><input type="radio" name="gender" value="female"><br/>
                爱好:
                <input type="checkbox" name="hobby" value="basketball">篮球
                <input type="checkbox" name="hobby" value="swim">游泳
                <input type="checkbox" name="hobby" value="volleyball">排球
                <br/>
                <!-- submit只会提交带有name属性的input元素的值 -->
                <input type="submit" value="submit">
            </fieldset>
        </form>

      效果图:

      

      表单其他元素:select、textarea、button

        <form action="#">
            <!-- select设置下拉列表框,共用户选择,value才是提交的值 -->
            <select name="籍贯">
                <option value="陕西">定西</option>
                <option value="陕西">热河</option>
                <option value="陕西">南京路</option>
                <option value="陕西">郑州</option>
            </select>
            <!-- textarea设置文本框,cols表示列数,rows表示行数 -->
            <textarea name="introdution" cols="30" rows="10">
                this is a introduction about textarea。
            </textarea>
            <!-- button设置页面上的点击按钮,类似input中type=button -->
            <button>提交</button>
        </form>

      总结:这节主要回顾下HTML中常用的标签。

  • 相关阅读:
    【 DCOS 】织云 CMDB 管理引擎技术详解
    腾讯云无服务器云函数架构精解
    深度学习在 CTR 中应用
    一文教你迅速解决分布式事务 XA 一致性问题
    小程序开发工具全新上线
    秦俊:开放 DevOps 敏捷开发套件,助力开发者驰骋云端
    张兴华:云端架构助力企业快速成长
    王磊:AI 时代物流行业的 OCR 应用
    陈杰:无服务器架构,让云端开发更纯粹
    腾讯织云:DevOps 流水线应用平台践行之路
  • 原文地址:https://www.cnblogs.com/diweikang/p/9060761.html
Copyright © 2011-2022 走看看