HTML学习

绝地灬酷狼 2023-10-07 09:49 32阅读 0赞

#### 目录 ####

*   *  1.HTML的概念
     *  2. HTML 基本语法
     *  3. HTML 标签
     *   *  3.1 文件标签
         *  3.2 文本标签
         *  3.3 图片标签
         *  3.4 列表标签
         *  3.5 链接标签
         *  3.6 div 和 span 标签
         *  3.7 语义化标签
         *  3.8 表格标签
         *  3.9 表单标签
     *  4.HTML 案例

### 1.HTML的概念 ###

HTML(Hyper Text Markup Language)，超文本标记语言。是一种最基础的网页开发语言，也是网页制作所必备的语言。

超文本就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

标记语言就是指由标签构成的语言，但标记语言不是编程语言。

### 2. HTML 基本语法 ###

1.HTML 文档的后缀名通常为：.html 或 .htm

2.标签分类：

\*围堵标签：有开始标签和结束标签。如：

\*自闭和标签：开始标签和结束标签在一起。如：

<br/>

\*标签可以嵌套。如：

\*在开始标签中可以定义属性。属性是由键值对构成，值需要用引号。如：

<font color = "red">Hello World</font>

\*HTML 的标签不区分大小写，但是建议使用小写。

### 3. HTML 标签 ###

#### 3.1 文件标签 ####

*  DOCTYPE 声明：用来告知 Web 浏览器页面使用了哪种 HTML 版本  
    HTML 5 中声明如下：

<!DOCTYPE html>

*  根标签：定义一个 HTML 文档

*  头标签：用于指定html文档的一些属性，和引入外部的资源。

*  文档标题标签

*  体标签：定义文档的主体

#### 3.2 文本标签 ####

*  注释

*  标题标签：h1~h6 字体大小逐渐递减

*  段落标签

*  换行标签

<br/>

*  水平线标签

<hr/>

*  粗体文本标签

<b></b>

*  斜体文本标签

<i></i>

#### 3.3 图片标签 ####

*  图片标签

*  src 属性：规定显示图像的 URL
 *  alt 属性：规定图像的替代文本，即图片失效以后用文字替代表示这是一个什么图
    
    注意：./image表示当前目录下和html文件所在文件夹同一级，./可以不写，…/image/表示在上一级目录下。

#### 3.4 列表标签 ####

*  无序列表标签（比如 圆点表示）

*  有序列表标签（比如数字123，字母ABC表示，还能用start属性规定起始值）

*  列表项标签

#### 3.5 链接标签 ####

*  链接标签

*  href 属性：规定链接的目标 URL
 *  target 属性：规定在何处打开目标 URL
    
     *  \_self：在当前页面打开
     *  \_blank：在空白页面打开

#### 3.6 div 和 span 标签 ####

这两个标签本身没有任何效果，以便配合 CSS 调整样式

*  div：每一个 div 占满一整行。

*  span：多个 span 只占一行

#### 3.7 语义化标签 ####

HTML 5 中为了提高程序的可读性，提供了一些标签。

*  页眉标签

*  页脚标签

*  区域标签

#### 3.8 表格标签 ####

*  表格标签

*  行标签

*  单元格标签

*  表头单元格标签

**注意：** *colspan 属性：合并列； rowspan 属性：合并行*

*  表格标题标签

*  表头内容标签

*  主题内容标签

*  注脚内容标签

#### 3.9 表单标签 ####

*  表单标签：定义一个 HTML 表单，用于用户输入。

*  action 属性：指定提交数据的 URL
 *  method 属性：指定提交方式，常用以下两种  
    get：  
    1.请求参数会在地址栏中显示，会封装到请求行中。  
    2.请求参数大小是有限制的。  
    3.不太安全。  
    post：  
    1.请求参数不会再地址栏中显示。会封装到请求体中。  
    2.请求参数的大小没有限制。  
    3.较为安全。
 *  输入控件标签

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODIxOTYz_size_16_color_FFFFFF_t_70]

*  type 属性：
 *  text：文本输入框，默认值
 *  password：密码输入框
 *  radio：单选框
    
    注意：
    
    要实现单选效果，多个单选框的 name 必须相同  
    一般会给每一个单选框提供 value 属性，指定其被选中后提交的值  
    checked 属性，可以指定为默认值
 *  checkbox：复选框
 *  file：文件选择框
 *  hidden：隐藏域，用于提交一些信息
 *  submit：提交按钮。
 *  button：普通按钮
 *  image：图片提交按钮
 *  date：定义 date 控件（包括年、月、日，不包括时间）。
 *  email：定义用于 e-mail 地址的字段。
 *  name 属性：表单项中的数据要想被提交，必须指定其 name 属性
 *  placeholder 属性：预期值的简短的提示信息（仅用于文本输入框）
 *  标注标签：定义 input 元素的标注

**注意：label 的 for 属性一般会和 input 的 id 属性值对应。如果对应了，则点击label区域，会让 input 输入框获取焦点。**

*  下拉列表标签：

option 属性：指定列表项

*  文本域标签

cols 属性：指定列数，每一行有多少个字符  
rows 属性：指定多少行。

### 4.HTML 案例 ###

1.案例效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODIxOTYz_size_16_color_FFFFFF_t_70 1]  
2.实现代码

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>注册</title>
    </head>
    <body>
    <form>
        <table border="1" width="500" align="center">
            <tr>
                <td><label for="username">用户名</label></td>
                <td><input type="text" name="username" id="username" placeholder="请输入用户名"></td>
            </tr>
            <tr>
                <td><label for="password">密码</label></td>
                <td><input type="password" name="password" id="password" placeholder="请输入密码"></td>
            </tr>
            <tr>
                <td><label for="email">Email</label></td>
                <td><input type="email" name="email" id="email" placeholder="请输入邮箱"></td>
            </tr>
            <tr>
                <td><label for="name">姓名</label></td>
                <td><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
            </tr>
            <tr>
                <td><label for="phone">手机号</label></td>
                <td><input type="text" name="phone" id="phone" placeholder="请输入手机号"></td>
            </tr>
            <tr>
                <td>性别</td>
                <td>
                    <input type="radio" name="gender" value="male">男
                    <input type="radio" name="gender" value="female">女
                </td>
            </tr>
            <tr>
                <td>出生日期</td>
                <td>
                    <input type="date" name="birthday">
                </td>
            </tr>
            <tr>
                <td><label for="checkcode">验证码</label></td>
                <td>
                    <input type="text" name="checkcode" id="checkcode">
                    <img src="img/verify_code.jpg"/>
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input type="submit" value="注册">
                </td>
            </tr>
    
        </table>
    </form>
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODIxOTYz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200224133538328.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODIxOTYz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODIxOTYz_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200224134748814.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODIxOTYz,size_16,color_FFFFFF,t_70