HTML

最新推荐文章于 2024-03-20 13:27:34 发布

bm1998

最新推荐文章于 2024-03-20 13:27:34 发布

阅读量225

点赞数 2

分类专栏：前端文章标签： HTML

本文链接：https://blog.csdn.net/bm1998/article/details/96638242

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

文章目录

1. HTML 的概念
2. HTML 基本语法
3. HTML 标签
4. HTML 案例

1. HTML 的概念

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

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

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

2. HTML 基本语法

HTML 文档的后缀名通常为：.html 或 .htm
标签分类：
1. 围堵标签：有开始标签和结束标签。如：
```
<html> </html>
```
2. 自闭和标签：开始标签和结束标签在一起。如：
```
<br/>
```
标签可以嵌套。如：
```
<a><b></b></a>
```
在开始标签中可以定义属性。属性是由键值对构成，值需要用引号。如：
```
<font color = "red">Hello World</font>
```
HTML 的标签不区分大小写，但是建议使用小写。

3. HTML 标签

3.1 文件标签

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

HTML 5 中声明如下：
```
<!DOCTYPE html>
```
根标签：定义一个 HTML 文档
```
<html></html>
```
头标签：用于指定html文档的一些属性，和引入外部的资源。
```
<head></head>
```
文档标题标签
```
<title>文档标题</title>
```
体标签：定义文档的主体
```
<body></body>
```

3.2 文本标签

注释
```

```
标题标签：h1~h6 字体大小逐渐递减
```
<h1>标题</h1>
```
段落标签
```
<p>段落</p>
```
换行标签
```
<br/>
```
水平线标签
```
<hr/>
```
粗体文本标签
```
<b></b>
```
斜体文本标签
```
<i></i>
```

3.3 图片标签

图片标签
```
<img src="image/banner_1.jpg" alt="广告" >
```
- src 属性：规定显示图像的 URL
  
  相对路径中，代表当前目录（和上面等效）：
```
<img src="./image/banner_1.jpg" alt="广告" >
```
  相对路径中，代表上一级目录：
```
<img src="../image/banner_1.jpg" alt="广告" >
```
- alt 属性：规定图像的替代文本

3.4 列表标签

无序列表标签
```
<ul></ul>
```
有序列表标签
```
<ol></ol>
```
列表项标签
```
<li></li>
```

3.5 链接标签

链接标签
```
<a href="https://www.baidu.com/" target="_blank">百度</a>
```
- href 属性：规定链接的目标 URL
- target 属性：规定在何处打开目标 URL
  - _self：在当前页面打开
  - _blank：在空白页面打开

3.6 div 和 span 标签

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

div：每一个 div 占满一整行。
```
<div></div>
```
span：多个 span 只占一行。
```
<span></span>
```

3.7 语义化标签

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

页眉标签
```
<header></header>
```
页脚标签
```
<footer></footer>
```
区域标签
```
<section></section>
```

等等…

3.8 表格标签

表格标签
```
<table border="1"></table>
```
- border 属性：规定表格单元是否拥有边框
行标签
```
<tr></tr>
```
单元格标签
```
<td></td>
```
- colspan 属性：合并列
- rowspan 属性：合并行
表头单元格标签
```
<th></th>
```
表格标题标签
```
<caption></caption>
```
表头内容标签
```
<thead></thead>
```
主题内容标签
```
<tbody></tbody>
```
注脚内容标签
```
<tfoot></tfoot>
```

3.9 表单标签

表单标签：定义一个 HTML 表单，用于用户输入。
```
<form action="#" method="get"></form>
```
- action 属性：指定提交数据的 URL
- method 属性：指定提交方式，常用以下两种：
  - get：
    - 请求参数会在地址栏中显示，会封装到请求行中。
    - 请求参数大小是有限制的。
    - 不太安全。
  - post：
    - 请求参数不会再地址栏中显示。会封装到请求体中。
    - 请求参数的大小没有限制。
    - 较为安全。

输入控件标签

<form action="#" method="post">
    用户名：<input type="text" name="username" placeholder="请输入用户名"><br/>
    密码：<input type="password" name="password" placeholder="请输入密码"><br/>
    邮箱：<input type="email" name="emial"><br/>
    出生日期:<input type="date" name="birthday"><br/>
    性别：<input type="radio" name="gender" value="male" checked>男
          <input type="radio" name="gender" value="female">女<br/>
    爱好：<input type="checkbox" name="hobby" value="basketball"> 打球
        <input type="checkbox" name="hobby" value="sing"> 唱歌
        <input type="checkbox" name="hobby" value="dance"> 跳舞<br/>
    上传头像：<input type="file" name="file"><br/>
        <input type="submit" value="注册" >
</form>

在这里插入图片描述

type 属性：
- text：文本输入框，默认值
- password：密码输入框
- radio：单选框
  
  注意：
  - 要实现单选效果，多个单选框的 name 必须相同
  - 一般会给每一个单选框提供 value 属性，指定其被选中后提交的值
  - checked 属性，可以指定为默认值
- checkbox：复选框
- file：文件选择框
- hidden：隐藏域，用于提交一些信息
- submit：提交按钮。
- button：普通按钮
- image：图片提交按钮
- date：定义 date 控件（包括年、月、日，不包括时间）。
- email：定义用于 e-mail 地址的字段。
name 属性：表单项中的数据要想被提交，必须指定其 name 属性
placeholder 属性：预期值的简短的提示信息（仅用于文本输入框）
标注标签：定义 input 元素的标注
```
<form action="#" method="post">
    <label for="username">用户名</label>：<input type="text" name="username" id="username">
</form>
```
注意：label 的 for 属性一般会和 input 的 id 属性值对应。如果对应了，则点击label区域，会让 input 输入框获取焦点。

下拉列表标签：

<select name="省份">
    <option>北京</option>
    <option>上海</option>
    <option>广州</option>
</select>

option 属性：指定列表项

文本域标签
```
<textarea cols="25" rows="10" name="description"></textarea>
```
- cols 属性：指定列数，每一行有多少个字符
- rows 属性：指定多少行。

4. HTML 案例

案例效果

编码实现

<!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>

bm1998

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML

1. HTML 的概念HTML(Hyper Text Markup Language)，超文本标记语言。是一种最基础的网页开发语言，也是网页制作所必备的语言。超文本就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。标记语言就是指由标签构成的语言，但标记语言不是编程语言。2. HTML 基本语法HTML 文档的后缀名通常为：.html 或 .htm标签分类：围堵标...
复制链接

扫一扫