HTML初识

two_orion

已于 2022-01-27 08:50:25 修改

阅读量205

点赞数 1

分类专栏：笔记 html学习笔记文章标签： html 前端

于 2022-01-19 21:08:18 首次发布

本文链接：https://blog.csdn.net/two_orion/article/details/122586236

版权

笔记同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

html学习笔记

2 篇文章 0 订阅

订阅专栏

这两天见识到的东西太多了，愈发的感觉自己对于知识的渴望以及自己目前的渺小；任务是简单写一个网页，作为一个零接触的初学者，那就先从HTML学起吧。
一、什么是HTML
互联网时代给予了我们极大的便利，也让我们能够拥有更多获取新知识的渠道。html，这虽然不是一个新词，在我接触这么长时间，我也知道这是一个与网络有关的东西，比如很多文件，后缀是html的，在你点开以后呢，弹出的就是一个网站，这就跟你见识多了见到后缀是jpg就知道是图片，txt是文档一样。html可以说是一个网页的标志吧，后来经过查阅资料得知，html其实就是一个用于制作网页的语言类型；在广泛上可以与之前接触过的C++；Java等语言类比，但html是一种描述性语言，他不参与逻辑的运算以及任何算法运算。也就是说，它联系的是显示在我们面前的网页构成以及结构等等。比如你现在在网页上点开了某企鹅邮箱，
在这里插入图片描述
他会让你输入账号密码以及登录按钮；又比如你需要检索自己本季度考勤情况；你打开检索界面；他要求你输入自己的id号，密码，身份证号等信息，那么这些界面都可以通过HTML代码的编排来完成你所看到的这些界面，那么HTML可以帮助我们实现这个作用。老实说我最近才知道网页之间也有代码
一个纯HTML页面
，后来一问才知道这属于前端的内容，但学起来的过程不算太难，遇到的问题也不是没有，比如需要记的标签太多，知识很散，但又随时可能用到，所以学起来相对繁琐。
二、HTML基础
首先，我想分享一下目前我理解的HTML结构：一个完整的HTML网站应该是这样的：

<html>
<DOCTYPE html><!-- 文档声明 -->
<head>
<!-- 页头 -->
</head>
<body>
<!-- 页身 -->
</body>
</html>

整个html都是从html开始，从/html结束。
除此之外，我还想聊聊表格，因为个人感觉这个学起来相对比较繁琐。我想先从一个实例来看:
在这里插入图片描述
还是这个表格界面，我们现在要用代码尝试着去表示这个界面。
首先我们表示这个第一行的昵称，然后我们要建立一个文本框，现在有几种数据类型供我们选择：

到这里就可以看出来，下面的几种表现形式都是这个类型，那我们只需要将其表示出来即可。具体代码块如下：

<body>
    <table>
        <div>
            <label>昵称:</label>
            <input type="text" name="name" placeholder="enter the name">
        </div>
        <div>
            <label>密码:</label>
            <input type="password" password="name" placeholder="enter the password">
        </div>
        <div>
            <label>邮箱:</label>
            <input type="text" email="name" placeholder="enter the email">
            <select>
                <option value="1" selected="selected">@163.com
                </option>
                <option value="2" selected="selected">@qq.com
                </option>
                <option value="3" selected="selected">@outlook.com
                </option>
            </select>
        </div>
        <div>
            <label>性别:</label>
            <input type="radio" id="man" checked name="sex" /><label for="man">男</label>
            <input type="radio" id="woman" checked name="sex" /><label for="woman">女</label>
        </div>
        <div>
            <label>兴趣:</label>
            <input type="checkbox" checkbox="anime" /><label for="anime">看番</label>
            <input type="checkbox" checkbox="chat" /><label for="chat">社交</label>
            <input type="checkbox" checkbox="study" /><label for="study">学习</label>
        </div>
        <div>
            <textarea rows="10" cols="30">个人简介</textarea>
        </div>
        <div style="padding-left:100px;">
            <button>注册</button>
        </div>
        <div>
            <label>上传个人照片:</label>
            <div style="padding-left:10px;">
                <input type="button" button="selfile" value="选择文件" /><label for="selfile">未选择文件</label>
            </div>
        </div>


    </table>
</body>