HTML知识点汇总

myzbx 2024-12-01 18:28 64 浏览

以前的技术总监喊我加入他们的接私活团队，说他们缺一个前端工程师，不缺后端。可我一直是做后端开发的，前端代码写的实在是很少，没有经验，写起来肯定很慢了，所以想对前端的HTML知识点做一个汇总。

HTML代码结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>一级标题</h1>
    <br/>
    <h2>二级标题</h2>
</body>
</html>

<!DOCTYPE html>声明这是一个html文档；<html>元素是html页面的根元素；整个html文档包括两大部分：head头和body体。

meta元素提供了页面的元信息；title元素描述了文档的标题；body元素包含了可见的页面内容。

HTML元素概念

开始标签	元素内容	结束标签
<h1>	一个标题	</h1>
<br/>	换行
HTML 元素以开始标签起始，以结束标签终止。元素内容在其中间，如<h1>html元素概念</h1>。有些元素没有内容，没有结束标签，如<br/>。

HTML属性概念

下面是适用于大多数 HTML 元素的属性：

属性	描述
class	为元素定义一个或多个类名
id	定义元素的唯一id
style	设定元素的行内样式
实例：<a href="toutiao.com">头条</a>
HTML元素可以设置属性属性描述于开始标签属性以键/值对的形式出现

标题元素

<body>
    <!-- 一般用在标题上，利于seo优化-->
    <h1>这是标题 1</h1>
    <h2>这是标题 2</h2>
    <h3>这是标题 3</h3>
    <h4>这是标题 4</h4>
    <h5>这是标题 5</h5>
    <h6>这是标题 6</h6>
</body>

段落与换行元素

<body>
    <!-- 这是注释 -->
    <!-- </p> 是块级元素、前后有空行-->
    <p>这个段落</p>
    <p>这<br>个<br>段落</p>
    <hr/>
</body>

基本格式化标签

<body>
    <b>加粗</b>
    <i>斜体</i>
    <small>更小的</small> <br><br>
    <strong>重要的</strong> <br><br>
    这是 <sub> 下标</sub> 和 <sup> 上标</sup> <br><br>
    <del> 删除的文本
</body>

超链接（链接）

属性	值	描述
href	toutiao.com	链接的地址
target	_blank	在何处显示
id		文档书签

<body>
    <!-- 实例 -->
    文本：<a href="http://www.example.com/">文本</a> <br/>
    图像： <a href="http://www.example.com/">
        <img src="URL" alt="描述信息">
    </a> <br/>
    邮件： <a href="mailto:qq@example.com">发送e-mail</a> <br/>
    书签：
    <a id="tips">书签</a> <br/>
    <a href="#tips">跳到书签</a>
</body>

图像标签

属性	描述
src	图像的 URL 地址
alt	无法载入图像时，显示替换文本
width	指定宽度
height	指定高度

<body>
    <img src="meinv.jpg" alt="美女" width="280" height="180">
</body>

HTML表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。
数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<body>
    <!-- 边框属性：如果不定义边框属性，表格将不显示边框-->
    <table border="1">
        <tr>
            <!-- 表头使用<th>标签定义。浏览器会把表头显示为粗体居中的文本-->
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <tr>
            <td>小红</td>
            <td>18</td>
            <th>女</th>
        </tr>
        <tr>
            <td>小明</td>
            <td>21</td>
            <td>男</td>
        </tr>
    </table>
</body>

HTML列表

<body>
    <!-- 有序列表 数字进行标记-->
    <ol>
        <li>苹果汁</li>
        <li>草莓汁</li>
    </ol>
    <!-- 无序列表 粗体圆点标记-->
    <ul>
        <li>咖啡</li>
        <li>饮料</li>
        <li>茶
            <!-- 嵌套列表 -->
            <ol>
                <li>红茶</li>
                <li>绿茶</li>
            </ol>
        </li>
    </ul>
</body>

HTM区块

块级元素在浏览器显示时，会以新行来开始和结束。如<h1>,<p>,<ul>,<table>
内联元素在显示时不会以新行开始。如<b>, <td>, <a>, <img>

<div> 元素	<span> 元素
块级元素	内联元素
HTML 元素的容器	文本的容器
搭配css可对内容块设置样式属性	搭配css可为文本设置样式属性

HTML 布局

<body>
    <div style="width:500px">
        <div style="background-color: antiquewhite;">
            <h1 style="margin-bottom:0;">网页头部信息</h1>
        </div>
      
        <div style="background-color: aquamarine; height:200px;width:100px;float:left;">
            <b>网页左侧信息</b><br>
            中考资讯<br>
            高考资讯<br>
            成人自考
        </div>
       
        <div style="background-color: aqua; height:200px;width:400px;float:left;">
            主题内容
        </div>
       
        <div style="background-color:#FFA500;clear:both;text-align:center;">
            底部内容
        </div>
    </div>
</body>

HTML表单

form表单有两个属性：

action	method
定义了服务端的文件名	数据的提交方式
对接收到的数据进行处理	有POST与GET方法
post：表单数据会包含在表单体内然后发送给服务器，用于提交敏感数据，如用户名与密码等。 get：默认值，表单数据会附加在action属性的URL中。

<body>
    <!-- 表单是一个包含表单元素的区域
    允许用户在表单中输入内容-->
    <form action="" method="">
        <!-- input 输入标签 类型是由type属性定义-->

        <!-- 文本域 type="text" -->
        年龄: <input type="text" name="age"><br>

        <!-- 密码字段 type="password" -->
        密码: <input type="password" name="age"><br>
        
        <!-- 单选框 type="radio" -->
        <input type="radio" name="sex" value="male">男
        <input type="radio" name="sex" value="female">女<br>
        
        <!-- 复选框 type="checkbox" -->
        <input type="checkbox" name="like" value="Coffee">喜欢咖啡
        <input type="checkbox" name="like" value="tea">喜欢茶<br>

        <!-- 提交按钮 type="submit" -->
        <!-- 将表单的内容传送到服务器 -->
        <input type="submit" value="提交">
    </form>
</body>

HTML框架

<body>
    <!-- 通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。 -->
    <iframe src="test.html" width="200" height="200"></iframe>
</body>

height 和 width 属性用来定义iframe标签的高度与宽度

HTML <head> 元素介绍

<head> 元素定义了文档的信息，包含了所有的头部标签元素。常用的标签元素如下所示。

<meta>	文档的元数据
<base>	页面链接标签的默认地址
<title>	文档的标题
<link>	外部样式资源
<style>	客户端脚本文件
<script>	文档样式文件

<meta> 标签详解

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 定义关键词 -->
    <meta name="keywords" content="生活梦想家, 科技爱好者, 新手剪辑师, 记录生活, 分享美好">
    <!-- 定义描述内容 -->
    <meta name="description" content="我是一个生活梦想家, 科技爱好者, 新手剪辑师, 记录生活和分享美好的一个人。">
    <!-- 定义文档作者 -->
    <meta name="author" content="小明">
    <!-- 每10秒钟刷新当前页面 -->
    <meta http-equiv="refresh" content="10">
    <title>Document</title>
</head>
<body>
</body>  
</html>

这只是HTML的基本内容，后续还会总结HTML5的知识点。

HTML 简介

HTML知识点汇总

HTML代码结构

HTML元素概念

HTML属性概念

标题元素

段落与换行元素

基本格式化标签

超链接（链接）

图像标签

HTML表格

HTML列表

HTM区块

HTML 布局

HTML表单

HTML框架

HTML <head> 元素介绍

<meta> 标签详解

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

8.7k star，一款超炫酷的动态可视化大屏项目

用上Vue3，你真的变了吗?（vue3 key）

说下你的vue项目的目录结构，该怎么划分?

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

这么牛逼的cursor功能，赶紧用起来

browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解

巧克力:从一朵花开始的华丽变身_巧克力花束教程视频

comfyui安装MimicMotion扩展，AI跳舞动作模仿