HTML快速入门

学习笔记：

## HTML
    1. 概念：是最基础的网页开发语言
        * Hyper Text Markup Language 超文本标记语言
            * 超文本:
                * 超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本.
            * 标记语言:
                * 由标签构成的语言。<标签名称> 如 html，xml
                * 标记语言不是编程语言

    2. 快速入门：
        * 语法：
            1. html文档后缀名 .html 或者 .htm
            2. 标签分为
                1. 围堵标签：有开始标签和结束标签。如 <html> </html>
                2. 自闭和标签：开始标签和结束标签在一起。如 <br/>

            3. 标签可以嵌套：
                需要正确嵌套，不能你中有我，我中有你
                错误：<a><b></a></b>
                正确：<a><b></b></a>

            4. 在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来（建议使用单引号）
            5. html的标签不区分大小写，但是建议使用小写。

    3. 标签学习：
        1. 文件标签：构成html最基本的标签
            * html:html文档的根标签
            * head：头标签。用于指定html文档的一些属性。引入外部的资源
            * title：标题标签。
            * body：体标签
            * <!DOCTYPE html>：html5中定义该文档是html文档
        2. 文本标签：和文本有关的标签
            * 注释：
            * <h1> to <h6>：标题标签
                * h1~h6:字体大小逐渐递减
            * <p>：段落标签
            * <br>：换行标签
            * <hr>：展示一条水平线
                * 属性：
                    * color：颜色
                    * width：宽度
                    * size：高度
                    * align：对其方式
                        * center：居中
                        * left：左对齐
                        * right：右对齐
            * <b>：字体加粗
            * <i>：字体斜体
            * <font>:字体标签
            * <center>:文本居中
                * 属性：
                    * color：颜色
                    * size：大小
                    * face：字体

            * 属性定义：
                * color：
                    1. 英文单词：red,green,blue
                    2. rgb(值1，值2，值3)：值的范围：0~255  如  rgb(0,0,255)
                    3. #值1值2值3：值的范围：00~FF之间。如： #FF00FF
                * width：
                    1. 数值：width='20' ,数值的单位，默认是 px(像素)
                    2. 数值%：占比相对于父元素的比例

　　3. 图片标签：
            * img：展示图片
                * 属性：
                    * src：指定图片的位置

　　　　　*相对路径：
* 以.开头的路径
* ./：代表当前目录 ./image/1.jpg
* ../:代表上一级目录

　　4. 列表标签：
            * 有序列表：
                * ol:
                * li:
            * 无序列表：
                * ul:
                * li:

        5. 链接标签：
            * a:定义一个超链接
                * 属性：
                    * href：指定访问资源的URL(统一资源定位符)
                    * target：指定打开资源的方式
                        * _self:默认值，在当前页面打开
                        * _blank：在空白页面打开

　　6. div和span：
            * div:每一个div占满一整行。块级标签
            * span：文本信息在一行展示，行内标签内联标签

        7. 语义化标签：

　　　 html5中为了提高程序的可读性，提供了一些标签。
            1. <header>：页眉
            2. <footer>：页脚

        8. 表格标签：
            * table：定义表格
                * width：宽度
                * border：边框
                * cellpadding：定义内容和单元格的距离
                * cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、
                * bgcolor：背景色
                * align：对齐方式
            * tr：定义行
                * bgcolor：背景色
                * align：对齐方式
            * td：定义单元格
                * colspan：合并列
                * rowspan：合并行
            * th：定义表头单元格
            * <caption>：表格标题
            * <thead>：表示表格的头部分
            * <tbody>：表示表格的体部分
            * <tfoot>：表示表格的脚部分

##  HTML标签：表单标签
    * 表单：
        * 概念：用于采集用户输入的数据的。用于和服务器进行交互。
        * form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围
            * 属性：
                * action：指定提交数据的URL
                * method:指定提交方式
                    * 分类：一共7种，2种比较常用
                       * get：
                            1. 请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)。
                            2. 请求参数大小是有限制的。
                            3. 不太安全。
                       * post：
                            2. 请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议后讲解)
                            2. 请求参数的大小没有限制。
                            3. 较为安全。

            * 表单项中的数据要想被提交：必须指定其name属性


        * 表单项标签：
            * input：可以通过type属性值，改变元素展示的样式
                * type属性：
                    * text：文本输入框，默认值
                        * placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息
                    * password：密码输入框
                    * radio:单选框
                        * 注意：
                            1. 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。
                            2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
                            3. checked属性，可以指定默认值
                    * checkbox：复选框
                        * 注意：
                            1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
                            2. checked属性，可以指定默认值

                    * file：文件选择框
                    * hidden：隐藏域，用于提交一些信息。
                    * 按钮：
                        * submit：提交按钮。可以提交表单
                        * button：普通按钮
                        * image：图片提交按钮
                            * src属性指定图片的路径

  * label：指定输入项的文字描述信息
* 注意：
* label的for属性一般会和 input 的 id属性值对应。如果对应了，则点击label区域，会让input输入框获取焦点。

            * select: 下拉列表
                * 子元素：option，指定列表项

            * textarea：文本域
                * cols：指定列数，每一行有多少个字符
                * rows：默认多少行。

必须熟练掌握以下代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <!--定义表单 form-->
 9 <form action="#" method="post">
10     <table border="1px" align="center" width="500px">
11         <tbody>
12         <tr>
13             <td>
14                 <label for="username">用户名</label>
15             </td>
16             <td>
17                 <input type="text" name="text" id="username" placeholder="请输入用户名">
18             </td>
19         </tr>
20 
21         <tr>
22             <td>
23                 <label for="password">密码</label>
24             </td>
25             <td>
26                 <input type="text" name="password" id="password" placeholder="请输入密码">
27             </td>
28         </tr>
29 
30         <tr>
31             <td>
32                 <label for="email">Email</label>
33 
34             </td>
35             <td>
36                 <input type="text" name="email" id="email" placeholder="请输入邮箱">
37             </td>
38         </tr>
39 
40         <tr>
41             <td>
42                 <label for="name">姓名</label>
43             </td>
44             <td>
45                 <input type="text" name="name" id="name" placeholder="请输入姓名">
46             </td>
47         </tr>
48 
49         <tr>
50             <td>
51                 <label for="tel">手机号</label>
52             </td>
53             <td>
54                 <input type="text" name="tel" id="tel" placeholder="请输入手机号">
55             </td>
56         </tr>
57 
58         <tr>
59             <td>
60                 <label>性别</label>
61             </td>
62             <td>
63                 <input type="radio" name="gender" value="male" checked> 男
64                 <input type="radio" name="gender" value="female"> 女
65             </td>
66         </tr>
67 
68         <tr>
69             <td>
70                 <label for="birthday">出生日期</label>
71             </td>
72             <td>
73                 <input type="date" name="birthday" id="birthday">
74             </td>
75         </tr>
76 
77         <tr>
78             <td>
79                 <label for="verify_code">验证码</label>
80             <td>
81                 <input type="text" name="verify_code" id="verify_code">
82                 <img src="img/verify_code.jpg">
83             </td>
84         </tr>
85         <tr>
86             <td colspan="2" align="center">
87                 <input type="submit" value="注册">
88         </tr>
89 
90         </tbody>
91     </table>
92 </form>
93 </body>
94 </html>

posted @ 2019-11-28 14:21 the_path_of_grace 阅读(318) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

the_path_of_grace

HTML快速入门

公告