HTML简介

Frank.23

已于 2023-02-27 18:55:07 修改

阅读量87

点赞数

分类专栏： Web开发文章标签： html css

于 2023-02-22 21:52:00 首次发布

本文链接：https://blog.csdn.net/qq_62225979/article/details/129171417

版权

Web开发专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了HTML的基本结构，包括文档声明、头部和主体内容。讲解了HTML中的注释、标题、列表、超链接、表格、块级元素和内联元素的用法，以及如何创建和理解表单，特别是input元素的不同类型如文本、密码、单选按钮、复选框和提交按钮。

摘要由CSDN通过智能技术生成

1. HTML

1.1 HTML的大致框架:

网页的源代码包括在<html>和</html>之间

HTML的主要组成部分包括

head
body，主体是body部分

小技巧：在VSCode中输入html5可以获得网页的初始模板，模板如下

<!DOCTYPE html> <!-- 声明文档类型 -->
<html> <!-- 根元素 -->
    <head> <!-- 定义各种描述信息，如：字符编码，定义或引入 CSS 、JS -->
        <meta charset="utf-8"> <!-- 指定文档使用 UTF-8 字符编码 -->
        <title>My test page</title> <!-- 设置页面的标题，显示在浏览器标签页上 -->
    </head>
    <body> <!-- 包含期望让用户在访问页面时看到的内容 -->
        <img src="images/firefox-icon.png" alt="My test image" />
    </body>
</html>

1.2 HTML中的注释格式

<!--这是html中的注释格式-->

1.3 HTML常用元素

1.3.1 多级标题

支持6级标题，常用的到四级

<h1>主标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>

1.3.2 有序、无序、自定义列表

这里的列表和markdown中的渲染是一致的

无序列表前面是小圆点
有序列表前面是数字序号
自定义的列表可以自定义标题，也可以自定义列表后面的内容

	<p>无序列表</p>
    <ul>
        <li>豆浆</li>
        <li>油条</li>
        <li>肠粉</li>
        <li>小笼包</li>
    </ul>

    <br>    <!--换行符使用 br 表示-->
    <p>有序列表</p>
    <ol>
        <li>沿这条路走到头</li>
        <li>右转</li>
        <li>直行穿过第一个十字路口</li>
        <li>在第三个十字路口处左转</li>
        <li>继续走 300 米</li>
    </ol>

    <br>    <!--换行符使用 br 表示-->
    <p>自定义列表</p>
    <dl>
        <dt>标题1
        <dt>标题1.2
        <dd>描述文本1.1
        <dd>描述文本1.2
        <dt>标题2
        <dd>描述文本2
        <dt>标题3
        <dd>描述文本3
    </dl>

1.3.3 超链接

使用<a>www.baidu.com </a>

URL格式

绝对路径：https://www.baidu.com
本地相对路径：./images/Linux.jpg
链接到Email：xxxxxx@163.com

在<a>中a的后面可以添加其他内容

target指定目标位置

<a target="_blank">www.baidu.com</a>   <!--在新建标签页打开超链接指向的地址-->

target默认是在新建标签页打开超链接页面

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Br0160eM-1677073827020)(null)]

1.3.4 表格（table）

<tr></tr>定义表的一行
<th></th>定义表头
<td></td>定义单元格

<!--放在body里面-->
<table border="1">
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>Email</th>
        </tr>
        <tr>
            <td>Bill Gates</td>
            <td>male</td>
            <td>askbill@microsoft.com</td>
        </tr>
        <tr>
            <td>马云</td>
            <td>male</td>
            <td>jackma@alibaba-inc.com</td>
        </tr>
    </table>

1.3.5 块级元素和内联元素

块级元素
使用div定义块级元素

<!-- 块级元素 -->
<!-- 标注出来的块级元素会换行,不会和原来的内容放在一行中 -->
<div style="color:#FF0000">
    <h3>This is a header</h3>
    <p>This is a paragraph.</p>
</div>

内联元素
使用span定义内联元素

<!-- 内联元素 -->
<!-- 内联元素指的是标注出来的内容不会换行 -->
<p>Hello, <span style="color:#FF0000">Trump</span>!</p>

1.4 HMTL表单 (form)

HTML表单用于收集用户的输入信息
HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。

<!DOCTYPE html>
<html>
    <head> 
        <meta charset="utf-8"> 
        <title>菜鸟教程(runoob.com)</title> 
    </head>
    
    <body>

        <form action="">
        Username: <input type="text" name="user"><br>
        Password: <input type="password" name="password">
        </form>

        <p><b>注意：</b> 密码字段中的字符是隐藏的(显示为星号或圆圈)。</p>

    </body>
</html>

1.4.1 输入元素 input

多数情况下被用到的表单标签是输入标签 <input>。
输入类型是由 type 属性定义。

文本域（Text Fields）

文本域通过 <input type=“text”> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

<form>
    First name: <input type="text" name="firstname"><br>
    Last name: <input type="text" name="lastname">
</form>

密码字段

密码字段通过标签 <input type=“password”> 来定义
密码字段和文本域的区别在于，输入的内容会用小圆点或者星号代替

<form>
    Password: <input type="password" name="pwd">
</form>

单选按钮（Radio Buttons）

<input type=“radio”> 标签定义了表单的单选框选项:

<form action="">
    <input type="radio" name="sex" value="male">男<br>
    <input type="radio" name="sex" value="female">女
</form>

复选框（Checkbox）

<form action="">
    <input type="checkbox" name="vehicle" value="car">小汽车
    <br>
    <input type="checkbox" name="vehicle" value="bus">巴士
</form>

提交按钮（submit）

<input type=“submit”> 定义提交按钮。

当用户单击确认按钮时，表单的内容会被传送到服务器。表单的动作属性 action 定义了服务端的文件名。

action 属性会对接收到的用户输入数据进行相关的处理

action 后面的文件可以是php，vb，js等类型的

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
    <input type="submit" value="Submit">
</form>

method属性
method属性用于定义表单数据的提交方式：get/post方法

post：指的是 HTTP POST 方法，表单数据会包含在表单体内然后发送给服务器，用于提交敏感数据，如用户名与密码等。
get：默认值，指的是 HTTP GET 方法，表单数据会附加在 action 属性的 URL 中，并以 ?作为分隔符，一般用于不敏感信息，如分页等。例如：https://www.runoob.com/?page=1
这里的 page=1 就是 get 方法提交的数据。