html背景知识---及基本用法

最新推荐文章于 2022-08-25 15:04:12 发布

冉筱

最新推荐文章于 2022-08-25 15:04:12 发布

阅读量449

点赞数 1

分类专栏：【Web前端基础】

本文链接：https://blog.csdn.net/weixin_44146025/article/details/103410813

版权

【Web前端基础】专栏收录该内容

10 篇文章 0 订阅

订阅专栏

什么是HTML？

什么是超文本标记语言（Hypertext Markup Language）

知识点： "超文本"就是指页面内可以包含图片，链接，甚至音乐，程序等非文字因素

HTML的发展历史

学文科的，咋滴，也得普及下，发展历史吧

以下来源于黑马程序员，如有侵权，请律师函警告

由于各个浏览器之间的标准不统一，给网站开发人员带来了很大的麻烦。HTML5的出现即是为了解决这一问题，致力于将Web带入一个成熟的应用平台。

很多人误以为HTML5是指用HTML5+CSS3+Javascript实现的综合网页效果，但实际上HTML5仅仅是一套新的HTML标准，是对HTML及XHTMI的继承与发展。HTML5是一个向下兼容的版本，本质上并不是什么新的技术，只是在功能特性上有了极大的丰富。

任何事情并不是一蹴而就的，HTML标准同样也经历了时间积累，逐渐演化而成HTML5标准。HTML的出现由来已久，从1993年首次以草案的形式发布，再到2008年的HTML5正式版，中间经历了多次版本升级。

HTML1.0：在1993年由互联网工程工作小组(IETF)工作草案发布(并非标准，众多不同版本HTML陆续在全球使用，但是始终未能形成一个广泛的有相同标准的版本。
HTML2.0：HTML2.0相比初版而言，标记得到了极大的丰富。
HTML3.2：HTML3.2是在1996年提出的规范，注重兼容性的提高，并对之前的版本进行了改进
HTML4.0：1997年12月推出的HTML4.0，将HTML推向了一个新高度。该版本倡导将文档结构和样式分离，并实现了表格更灵活的控制。
HTM.401：由1999年提出的4.01版本是在HTML4.0基础上的微小改进
20世纪90年代是HTML发展速度最快的时期，但是自1999年发布的HTML4.01后，业界普遍认为HTM已经步入瓶颈期，W3C组织开始对Web标准的焦点转向 XHTMI上。
XHTMI1.0：在2000年由W3C组织提出， XHTMI是一个过渡技术，结合了部分XML的强大功能及大多数HTML的简单特性。
XHTML1.1：XHTML1.1是模块化的 XHTMI，是货真价实的XML。
XHTML2.0：XHTML2.0是完全模块化可定制的XHTMI，随着HTML5的兴起，XHTML2.0工作小组被要求停止工作。
2004年，一些浏览器厂商联合成立了 WHATWG工作组，致力于Web表单和应用程序。此时的W3C组织专注于 XHTML2.0。在2006年，W3C组织组建了新的HTML工作组采纳了 WHATWG的意见，并于2008年发布了HTML5。
由于HTML5能解决实际的问题，所以在规范还未定稿的情况下，各大浏览器厂家已经开始对旗下产品进行升级以支持HTML5的新功能。因此，HTML5得益于浏览器的实验性反馈并且也得到持续的完善，并以这种方式迅速融入对Web平台的实质性改进中。2014年10月，W3C组织宣布历经8年努力，HTML5标准规范终于定稿。

嗯，下面是基本功能实现的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Node_of_HTML</title>
</head>
<body>
    <h1 align="center">提醒：学习时右键查看源代码</h1>
    <br/><!--换行-->
    <h2>第一部分-简单标签元素</h2>
    <a href="https://www.bilibili.com">1.超链接（默认替换链接）</a>
    <br/><br/>
    <a href="https://www.bilibili.com" target="_blank">2.新建窗口跳转至链接</a>
    <br/><br/>
    <a href="https://www.bilibili.com" target="_self">3.原窗口替换链接</a>
    <br/><br/>
    4.这一行是没有粗体、斜体时的效果，对比下面
    <br/><br/>
    <b>5.这个是粗体</b>
    <br/><br/>
    <em>6.斜体效果</em>
    <br/><br/>
    <u>7.下划线效果</u>
    <br/><br/>
    <s>8.删除效果</s>
    <br/><br/>
    <b><em><u><s>9.粗体、斜体、下划线、删除效果叠加</s></u></em></b>

    <br/><br/>
    <h2>第二部分-表格------------------------华丽的分割线---------------------------------</h2>
    <br/><br/><b>1.普通表格</b><br/>
    <br/>
    <table border="1px" align="center">
<!--        <tr>
            <td>名字</td>
            <td>性别</td>
            <td>密码</td>
        </tr>-->
        <thead>
            <tr>
                <th>名字</th>
                <th>性别</th>
                <th>密码</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Admin</td>
                <td>男啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</td>
                <td>123</td>
            </tr>
            <tr>
                <td>Violet</td>
                <td>女</td>
                <td>456</td>
            </tr>
            <tr>
                <td>Andy</td>
                <td>男</td>
                <td>xxx</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>名字</th>
                <th>性别</th>
                <th>密码</th>
            </tr>
        </tfoot>
    </table>
    <br/>

    <br/><br/><b>2.合并表格</b><br/>
    <table border="1px" align="center">
        <tr>
            <th rowspan="2">aaa</th>
            <th>aaa</th>
            <th>aaa</th>
            <th>aaa</th>
        </tr>
        <tr>
            <!--<td>aaa</td>-->
            <td colspan="2">aaa</td>
            <td>aaa</td>
            <!--<td>aaa</td>--><!--合并的时候，把多的单元格注释掉-->
        </tr>
        <tr>
            <td>aaa</td>
            <td>aaa</td>
            <td>aaa</td>
            <td>aaa</td>
        </tr>
    </table>

    <br/><br/><b>3.列表-分别为顺序、倒序和英文字母顺序排列</b><br/>
    <br/>
    <b>(1)顺序排列</b>
        <ol>
            <li>你好</li>
            <li>我好</li>
            <li>大家好</li>
        </ol>
    <br>
    <b>(2)倒序排列</b>
        <ol reversed>
            <li>你好</li>
            <li>我好</li>
            <li>大家好</li>
        </ol>
    <br>
    <b>(3)英文字母顺序排列</b>
        <ol type="a">
            <li>你好</li>
            <li>我好</li>
            <li>大家好</li>
        </ol>

    <br/><br/><b>4.列表嵌套</b><br/>
    <ol>
        <li>图像处理</li>
        <ol type="a">
            <li>java</li>
            <li>python</li>
            <li>PHP</li>
        </ol>

        <li>大数据处理</li>
        <ol type="a">
            <li>java</li>
            <li>python</li>
            <li>PHP</li>
        </ol>
        <li>自然语言处理</li>
        <ol type="a">
            <li>java</li>
            <li>python</li>
            <li>PHP</li>
        </ol>
    </ol>

    <br/><br/><b>5.无序标签</b><br/>
    <br/>
    <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ul>


    <br/><br/>
    <h2>第三部分-表单------------------------华丽的分割线---------------------------------</h2>

    <form>
        <br/><br/><b>1.普通文本框（可以输入信息）</b><br/>
        <input><!--文本框-->
        <input type="index"><!--同上面效果-->

        <br/><br/><b>2.含占位符的文本框</b><br/>
        <input type="index" value="java天下第一"><!--占位符-->

        <br/><br/><b>3.不含占位符的文本框（有提示）</b><br/>
            <input type="index" placeholder="输入账号"><!--不占位-->
        <br>
            <input type="index" placeholder="输入密码">

        <br/><br/><b>4.限定输入字符数大小的文本框</b><br/>
            <input type="index" placeholder="maxlength" maxlength="5"><!--最大能输入的字符-->

        <br/><br/><b>5.拓宽了的的文本框</b><br/>
            <input type="index" placeholder="输入密码" size="50"><!--拓宽单行文本框-->

        <br/><br/><b>6.只读的文本框</b><br/>
            <input type="index" value="你删不了我哈哈" readonly><!--只读-->

        <br/><br/><b>7.密码隐藏的文本框</b><br/>
            <input type="password" placeholder="输入密码">

        <br/><br/><b>8.多行表单，任意拉伸</b><br/>
            <textarea rows="20">
投我以木瓜，报之以琼琚。匪报也，永以为好也！投我以木桃，报之以琼瑶。匪报也，永以为好也！投我以木李，报之以琼玖。匪报也，永以为好也！《木瓜》是先秦时期卫国的一首描述爱情的民歌，是通过赠答表达深厚情意的诗作，传诵极广。成语“投桃报李”便出自这里。礼尚往来是中华民族的传统美德，不止友人，恋人之间也是如此。礼物本身的价值已不重要，象征意义更加突出，以示两心相许，两情相悦</textarea>

        <br/><br/><b>9.按钮</b><br/>
        <input type=button value="按钮1">
        <br>
        <button>按钮2</button><!--js合作并且作为绑定事件的-->
        <br>
        <input type="submit" value="提交"><!--提交表单-->

        <br/><br/><b>10.范围选择</b><br/>
        <input type="range" min="-100" max="100">
        <input type="range" min="-200" max="200" step="100">
        <input type="range" min="-200" max="200" step="100" value="-200"><!--数字滑动-->
        <br/>
        <input type="number" min="-100" max="100" value="0"><!--上下调值-->

        <br/><br/><b>11.选择框</b><br/>
        <input type="checkbox">选择

        <br/><br/><b>12.单选框</b><br/>
        那个语言天下第一<br>
        <input type="radio" name="a" checked>java
        <input type="radio" name="a">PHP
        <input type="radio" name="a">JavaScript

        <br/><br/><b>12.下拉选择表单</b><br/>
        你最喜欢的手机品牌是什么
        <br>
        <select>
            <option>华为</option>
            <option>荣耀</option>
            <option>苹果</option>
        </select>

        <br/><br/><b>13.下拉选择表单及手动输入</b><br/>
        <input type="text" placeholder="其他水果请输入" list="datalist1">
        <datalist id="datalist1">
            <option>苹果</option>
            <option>香脚</option>
            <option>西瓜</option>
        </datalist>


        <br/><br/><b>14.邮件、电话、url、日期颜色等</b><br/>
        <input type="email">
        <input type="tel">
        <input type="url">
        <input type="date"><!--获取日期-->
        <input type="color"><!--获取颜色-->

        <br/><br/><b>15.隐藏表单</b><br/>
        <input type="hidden" value="123"><!--浏览器上不显示，被隐藏起来了-->

        <br/><br/><b>16.图片按钮及选择文件</b><br/>
        薇尔莉特永远喜欢我！<br>
        <input type="image" src="我的宝贝.jpg" width="20%"><!--图片按钮-->
        <br>
        <input type="file" multiple><!--可以选择一个文件，或者用multiple选择多个文件-->
    </form>

    <br/><br/>
    <h2>第四部分-插入图片------------------------华丽的分割线---------------------------------</h2>
    <br/><br/><b>1.创建图片</b><br/>
    <!--<img src="violet.jpg">-->
    <img src="我的宝贝.jpg" width="128px" alt="薇尔莉特">

    <br/><br/><b>2.找不到图片时</b><br/>
    <img src="我的.mp4" width="128px" alt="薇尔莉特"><!--alt在找不到文件时备用-->

    <br/><br/><b>3.点击图片跳转到某个网站</b><br/>
    <a href="https://www.bilibili.com/bangumi/media/md8892/?from=search&seid=14554523757864175862" target="_blank">
        <img src="我的宝贝.jpg" width="128px" alt="薇尔莉特">
    </a>

    <br/><br/><b>4.分区响应图（大家可以点击任意一个app来玩一玩，很有意思吧）</b><br/>

    <img src="我的宝贝.jpg" usemap="#map1">
<!--    <form>
        <input type="image" src="tel.png">&lt;!&ndash;用于查找像素位置&ndash;&gt;
    </form>-->

<map name="map1">
    <area href="https://www.bilibili.com" shape="rect" coords="32,508,125,598" target="_blank">
    <area href="https://wannianrili.51240.com/" shape="rect" coords="178,508,271,598" target="_blank">
    <area href="https://baike.so.com/doc/10038773-10517096.html" shape="rect" coords="326,508,417,598" target="_blank">
    <area href="https://baike.so.com/doc/6883746-7101237.html" shape="rect" coords="471,508,566,598" target="_blank">

    <area href="http://time.tianqi.com/" shape="rect" coords="32,689,125,780" target="_blank">
    <area href="http://luyin.voicecloud.cn/" shape="rect" coords="178,689,271,780" target="_blank">
    <area href="http://www.kugou.com/" shape="rect" coords="326,689,417,780" target="_blank">
    <area href="http://meiyan.meipai.com/" shape="rect" coords="471,689,566,780" target="_blank">

    <area href="http://www.10086.cn/index/sc/index_280_280.html" shape="rect" coords="32,941,125,1032" target="_blank">
    <area href="https://dianhua.qq.com/" shape="rect" coords="178,941,271,1032" target="_blank">
    <area href="https://baike.baidu.com/item/%E7%9F%AD%E4%BF%A1/6203?fr=aladdin" shape="rect" coords="326,941,417,1032" target="_blank">
    <area href="https://www.google.cn/intl/zh-CN/chrome/" shape="rect" coords="471,941,566,1032" target="_blank">

    <area href="https://www.huya.com/" shape="circle" coords="296,188,154" target="_blank"><!--图片时间处点击有惊喜，老师这里有些小问题，coords的参数分别是圆心坐标x,y,和半径r-->
</map>

    <h2>第五部分-插入视频------------------------华丽的分割线---------------------------------</h2>
    <br/><br/><b>点击进行播放</b><br/>
<!--<video src="gameplay.mp4" autoplay></video>-->
    <video src="我的.mp4" controls preload="auto" poster="我的宝贝.jpg"></video>
    
     <h2>第六部分-插入音频------------------------华丽的分割线---------------------------------</h2>
    <br/><br/><b>提醒：调节好音量后点击进行播放</b><br/>
    <!--<audio src="FlowerFire.mp3" autoplay controls></audio>--><!--自动播放-->
    <audio src="我的.mp4" controls></audio>
</body>
</html>

实现的网页效果大概是这样。实现完了，发现确实是超文本语言。。。

冉筱

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html背景知识---及基本用法

什么是HTML？什么是超文本标记语言（Hypertext Markup Language）知识点： "超文本"就是指页面内可以包含图片，链接，甚至音乐，程序等非文字因素HTML的发展历史学文科的，咋滴，也得普及下，发展历史吧以下来源于黑马程序员，如有侵权，请律师函警告由于各个浏览器之间的标准不统一，给网站开发人员带来了很大的麻烦。HTML5的出现即是为了解决这一问题，致力于...
复制链接

扫一扫

专栏目录