HTML学习笔记

最新推荐文章于 2025-06-16 00:23:48 发布

粒荔

最新推荐文章于 2025-06-16 00:23:48 发布

阅读量277

点赞数

分类专栏：前端学习笔记文章标签： html 前端

本文链接：https://blog.youkuaiyun.com/aaatool/article/details/122697193

版权

前端学习笔记专栏收录该内容

5 篇文章

订阅专栏

这篇博客详细介绍了HTML的基础知识，包括文档声明、meta标签、标题、文本格式化、图像、超链接、容器标签、列表、表格、表单以及标签的用法。内容涵盖了HTML的基本元素和常见属性，是学习HTML的良好参考资料。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML

HTML负责网页的结果

文档声明

用来告诉浏览器当前网页的版本，写在开头。

快捷键：!+enter

<!DOCTYPE html>为HTML5。

meta标签

主要设置网页中的元数据。

charset：指定的网页字符集
name：指定的数据的名称
content：指定的数据的内容
keywords：表示网站的关键字

<meta charset="utf-8">表示使用utf-8编码。utf-8是最常用的编码方式。

HTML meta 标签_zhangankang的博客-优快云博客_html meta

基本框架

缩进快捷键：shift+tap

<!DOCTYPE html>
<html>
    <head>
        <title>123</title>  <!--<title>中的内容为网页名字-->
    </head>
    <body>          <!--<body>中的内容为网页内容-->
       567
    </body>
</html>

<table border="1">
<thead>//表格头部区
    <tr>
        <th>数字1</th>//表头单元格，用于第一行，内容加粗居中
        <th>数字2</th>
    </tr>
</thead>
<tbody>//表格主体部分
    <tr>//行
        <td>1</td>//单元格
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
    </tr>
</tbody>
</table>

合并单元格

跨行合并: rowspan="合并单元格的个数”，目标单元格为最上侧单元格

跨列合并: colspan="合并单元格的个数”，目标单元格为最左侧单元格

表单

form标签：表单域

action=”url地址”，用于指定接收并处理表单数据的服务器程序的url地址。

method=”get/post”，用于设置表单数据的提交方式，其取值为get或post。

name=“名称”，用于指定表单的名称，以区分同一个页面中的多个表单域。

通常form里嵌套table进行布局。

<form action="" method="" name="">
    表单元素控件
</form>

表单元素控件

一般是input标签。还有textarea（多行文本）、Select（下拉列表框）其中元素为option。

input的type属性：

默认为text：网页中出现用户可以输入的文本框
password：不显示输入内容
checkbox：在标签后加上想确认的内容，网页会出现可勾选的方框
radio：同checkBox，一般有几个，若要它们互斥只选一个则要加上同一个名字
button：显示一个按钮，属性value可改变按钮上的文本
submit：提交，提交的内容会交到active指定的网页
reset：重置，取消用户所填的所有内容
file：上传文件

其他属性：

name(元素名称)、value(input元素的值)、checked(规定此元素首次加载默认选中)、maxlength(输入最大长度)

<form>
    <input type="text">
    <!--名称相同二选一-->
    <input type="radio" name="gender" checked="checked">男
    <input type="radio" name="gender">女
    <!--文本框显示一行30字，可写5行-->
    <textarea name="" id="" cols="30" rows="5"></textarea>
    <select name="" id="">
        <option value="1" selected="selected">1</option>
        <option value="2">2</option>
    </select>
</form>

`label`标签

用于绑定一个表单元素,当点击<label>标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验。

<!--for和id的值要相同-->
<label for="gender">男</label>
<input type="radio" name="gender" id="gender">

HTML学习笔记

HTML

文档声明

meta标签

基本框架

标签

标题标签

分割线、换行

文本格式化标签

注释

转义字符

图像标签

超链接

容器标签、行内标签

列表

表格

表单

`label`标签

HTML学习笔记

HTML

文档声明

meta标签

基本框架

标签

标题标签

分割线、换行

文本格式化标签

注释

转义字符

图像标签

超链接

容器标签、行内标签

列表

表格

表单

label标签

`label`标签