HTML基础总结

1.HTML是什么？

全称是HyperText Markup Language，又叫超文本标记语言（主要体现在可以控制字体大小及颜色）。它不是一种编程语言，是一种描述性的标记语言，也是一种最基础的网页语言，主要是用来描述超文本中内容的显示方式。其特点是代码都是由标签所组成。

注：标签是指形如<标签名称>的标记。其文件后缀是.html或者.htm。可以直接通过浏览器运行

2.HTML规范

(1)HTML的范围<html></html>

(2)包含两部分内容

<head>设置相关信息</head>

<body>显示在页面上的内容</body>

(3)大部分标签皆成对出现，有开始有结束。某些特殊标签除外，如<br/>，<hr/>等（在标签内开始，在标签内结束）

(4)不区分大小写

3.HTML中常用标签

4.表单标签实例

<!DOCTYPE html>
<html>
      <head>
            <meta charset="UTF-8">
            <title>表单标签</title>
      </head>
      <body>

            <!--action的作用是对应表单提交后的地址，当设置的值为"#"表示当前页面不发生跳转。method表示是以何种方式进行提交-->

            <!--name属性表示该行的名称，当表单提交时可显示为名称=值的形式，也就是说需要用于表单提交的都需要设置name属性 -->

            <!--name属性中需要注意的是除了select该行有name属性，其他字段是每行都有-->
            <form action="#" method="get">

                  <!--隐藏域在页面中不可见-->
                  隐藏字段：<input hidden="hidden" name="id"/><br />

                  <!--size属性的作用是改变输入框的长度，value在text中表示初始值-->
                  用户名：<input type="text" name="username" size="40px" value="abdfdd" maxlength="5" readonly="readonly" placeholder="请输入用户名"/><br />
                  密码：<input type="password" name="password" required="required"/><br />
                  确认密码：<input type="password" name="repassword"/><br />
                  <!--实际用于提交的字段是value中的值，后面的值只是显示给用户看的，checked的作用是设置radio的初始值-->
                  性别：<input type="radio" name="sex" value="男" checked="checked"/>男
                  <input type="radio" name="sex" value="女"/>女<br />
                  爱好：<input type="checkbox" name="hobby" value="钓鱼"/>钓鱼
                  <input type="checkbox" name="hobby" value="电动"/>电动
                  <input type="checkbox" name="hobby" value="写代码"/>写代码<br />
                  头像：<input type="file" name="file"/><br />

                  <!--下拉框使用select标签,其中option对应其中的选项，selected的作用是设置select的初始值-->
                  籍贯：<select name="privince">
                        <option>--请选择--</option>
                        <option value="北京" selected="selected">--北京--</option>
                        <option value="上海">--上海--</option>
                        <option value="重庆">--重庆--</option>
                  </select><br />

                  <!--bextarea表示大文本编辑区域-->
                  自我介绍：<textarea name="自我介绍"></textarea><br />

                  <!--提交按钮和普通按钮的区别：submit用于提交表单中的数据，而button需要绑定事件才可以提交，否则只是具有一个按钮样式-->
                  提交按钮：<input type="submit" value="注册" /><br/>
                  普通按钮：<input type="button" value="登录" /><br/>

                  <!--重置按钮的作用是清空已填写的文本框-->
                  重置按钮：<input type="reset" />
            </form>
      </body>
</html>

对应实现的效果如下所示

猜你喜欢