菜单 搜索
首页 前端知识 HTML综合

HTML综合

2025-03-08 14:03:25 前端知识 前端哥 826 876 我要收藏

一.HTML的初始结构

<!DOCTYPE html>
<html lang="en">
 
<head>
    <!-- 设置文本字符 -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 设置网页名 -->
    <title>首页</title>
</head>
 
<body>
    这是我的first page！ 
</body>
 
</html>
复制

二.HTML中的常用标签

1. 标题标签

	<h1> 到 <h6>：定义六个级别的标题，<h1> 级别最高，<h6> 级别最低。
 	h1字体大小是32px 
    h4字体大小是16px
    默认字体大小是16px
复制

2. 段落和换行标签

<p>：定义段落。
<br>：插入一个简单的换行符。
复制

3. 链接标签

<a>：定义超链接，用于链接到其他网页或网站。
复制

4. 图像标签

<img>：定义图像，src 属性用于指定图像的URL。
复制

5. 列表标签

<ul>：定义无序列表。
<ol>：定义有序列表。
<dl>: 自定义列表
<dt>:自定义列表头
<dd>:自定义列表项
<li>：定义列表项。
<tr>：定义表格行。
<td>：定义表格数据单元格。
<th>：定义表头单元格。
复制

6. 表单标签

<form>：定义HTML表单，用于用户输入。
<input>：定义输入字段，type 属性用于指定输入类型（如 text, password, submit 等）。
<textarea>：定义多行文本输入字段。
<label>：定义 <input> 元素的描述。
<select> 和 <option>：定义下拉列表。
<button>：定义一个点击按钮。
复制

7. 语义化标签

<header>：定义文档的头部区域。
<footer>：定义文档的底部区域。
<article>：定义文档中的独立内容区域。
<section>：定义文档中的节（或区段）。
<nav>：定义导航链接的部分。
<aside>：定义页面的侧边栏内容。
复制

8.格式化标签

 <strong>我变强壮了</strong>
<b>我也可以加粗</b>
<hr>
<em>我倾斜了吗</em>
<i>我倾斜了吗</i>
<hr>
 
<del>我身上有什么？</del>
<s>我身上有一条线</s>
<hr>
 
<ins>台湾是中国的，日本也是中国的</ins>
<u>台湾是中国的，日本也是中国的</u>
<hr>
 
100<sub>10</sub>
26<sup>C°</sup>
复制

9. 其他常用标签

<div>：定义文档中的区块或节，常用于结合CSS进行布局和样式设计。
<span>：对文档中的行内元素进行分组。
<meta>：提供有关HTML文档的元数据，如字符编码、页面描述、关键词等。
<title>：定义浏览器工具栏的标题，当网页添加到收藏夹时的标题。
<style>：用于包含CSS样式信息。
<script>：用于嵌入或引用JavaScript代码。
复制

这些只是HTML5中常用标签的一部分，实际上HTML5还包含许多其他标签和属性，用于构建功能丰富、结构清晰的网页。

三.部分标签的使用

1. table标签

1.1 table标签的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>table标签的使用</title>
</head>
<body>
    <!-- 
        border 边框
        cellspacing 格子和格子之间的边距
        cellpadding 格子和文字的边距
        align="" left, center, right
        th 默认字体加粗，内容居中
 
        表格的组成
            caption 标题
            thead   表头
                tr  代表一行
                    th 代表一行中的一个格子
            tbody   主体部分
                tr
                    td 代表一行中的一个格子
            tfoot
                tr
                    td
    -->
            <table border="1" cellspacing="0" cellpadding="0">
                <caption>水果价格列表</caption>
                <thead>
                    <tr>
                        <th>No</th>
                        <th>fruit</th>
                        <th>price</th>
                        <th>num</th>
                    </tr>
                </thead>
 
                <tbody>
                    <tr>
                        <td align="center">1001</td>
                        <td align="center">apple</td>
                        <td align="center">$2</td>
                        <td align="center">10</td>
                    </tr>
 
                    <tr>
                        <td align="center">1002</td>
                        <td align="center">pear</td>
                        <td align="center">$5</td>
                        <td align="center">8</td>
                    </tr>
 
                    <tr>
                        <td align="center">1003</td>
                        <td align="center">strawberry</td>
                        <td align="center">$7</td>
                        <td align="center">10</td>
                    </tr>
                    <tr>
                        <td>1004</td>
                        <td>watermelon</td>
                        <td>$1.2</td>
                        <td>50</td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td>总金额：</td>
                    </tr>
                </tfoot> 
            </table>
</body>
<style>
   
</style>
</html>
复制

1.2 table标签的合并

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       table, th, tr, td{
            text-align: center;
        }
    </style>
</head>
<body>
    <table border="1" cellspacing="0" cellpadding="0" width="200" height="200">
       <tr>
            <td>1</td>
            <td >2</td>
            <td rowspan="2">3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td colspan="3">7</td>
        </tr>
    </table>
    
</body>
</html>
复制

2. ul, ol, dl 标签的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表</title>
</head>
<body>
    <script>
        // 列表 块级元素
        //      1.有序列表 ol
        //          默认显示 1-n的数字
        //          start="10"
        //          type=""
        //      2.无序列表 ul 默认是黑点
        //                  style="list-style: circle;" 空心的圆
        //                  style="list-style:none;"
        //      3.自定义列表 dl > dt > dd
    </script>
    <ol start="10">
        <li>苹果</li>
        <li>梨子</li>
        <li>草莓</li>
        <li>香蕉</li>
    </ol>
    <br>
 
    <ul style="list-style: none;">
        <li>周杰伦</li>
        <li>蔡徐坤</li>
        <li>黎明</li>
        <li>迪丽热巴</li>
    </ul>
 
    <!-- t:title -->
    <dl>
        <dt>吃了吗</dt>
        <dd>吃的包子</dd>
        <dt>今天去哪里玩</dt>
        <dd>哪里都不去</dd>
    </dl>
</body>
</html>
复制

3.label 标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
 
 
    <p>
        <!-- label中的for应该与input中的id相关联 -->
         <!-- 使用单选框时，想要两个单选框为一组，需要给他们设置相同的name -->
        <label for="username">
         用户名： <input type="text" name="" id="username" >
        </label>
        <label for="nan">
            <input type="radio" value="男" id="nan" checked name="gender">男
        </label>
        <label for="nv">
            <input type="radio" value="女" id="nv" name="gender">女
        </label>
    </p>
</body>
</html>
复制

label 标签通常和表单元素一起使用

4.form 表单标签

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单的使用</title>
</head>
 
<body>
    <!-- 表单：数据的入口 -->
    <!-- form表单
            method="get/post"
                get:通过url地址传智，体积小，速度快，不安全，数据格式有限（asc,string）
                post:通过表单传值，体积大，速度慢，安全，类型和格式不限制(压缩包，视频，音频，ppt)
            action="提交的地址"
     -->
    <form action="" method="get">
        <p>
            用户名<input type="text" placeholder="用户名" name="username" >
        </p>
        <p>
            密&nbsp;&nbsp;码<input type="password" name="pwd">
        </p>
        <p>
            性别：
            <!-- 使用lable标签for属性应该和input标签中的id相关联 -->
            <!-- 使用单选框时选项应该在同一组中（在同一个name属性中） -->
            <label for="gender1">
                <input type="radio" id="gender1" name="gender" value="男">男
            </label>
            <label for="gender2">
                <input type="radio" id="gender2" name="gender" value="女" checked>女
            </label>
 
        </p>
 
        <p>
            <label for="age">
                年龄：<input type="number" max="120" min="18" value="20">
            </label>
        </p>
        <p>
            爱好：
            <input type="checkbox" value="钱" name="hobby"> 钱
            <input type="checkbox" value="黄金" name="hobby"> 黄金
            <input type="checkbox" value="香车" name="hobby"> 黄金
            <input type="checkbox" value="美女" name="hobby"> 黄金
            <input type="checkbox" value="黄金" name="hobby"> 黄金
        </p>
 
        <p>
            <label for="city">
                城市：
                <select name="" id="city">
                    <option value="请选择">请选择</option>
                    <option value="长沙">长沙</option>
                    <option value="株洲">株洲</option>
                    <option value="湘潭">湘潭</option>
                    <option value="怀化" selected>怀化</option>
                </select>
            </label>
        </p>
 
        <p>
            详细地址：
            <textarea rows="5" style="width: 500;"></textarea>
        </p>
 
        <p>
            <button type="submit">提交</button>
            <button>提交2</button>
            <button type="reset"> 重置</button>
            <!-- <input type="rest" value="重置"> 过时 -->
             <!--  -->
        </p>
    </form>
 
</body>
 
</html>
复制

注意在form表单中 button按钮默认为 submit 类型， 即type=“submit”

5.audio 音频 和 video 视频

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
    <!-- 
        autoplay 自动播放
        controls 控制的界面
        loop 循环
        preload 预加载
 
    -->
    <!-- 音频 -->
    <!-- 第一种方式 -->
    <!-- <audio src="file/1.mp3" autoplay controls loop preload="auto">
    </audio> -->
    <!-- 第二种方式 -->
    <audio autoplay controls loop preload="auto">
        <source src="file/1.mp3" type="audio/mpeg">
        <source src="file/1.mp3" type="audio/mpeg">
    </audio>
 
 
    <!-- 视频 -->
     <video src="file/1.mp3" autoplay controls loop preload="auto"></video>
     <video src="">
        <source src="file/1.mp3" type="video/mp4">
        <source src="file/1.mp3" type="video/mp4">
     </video>
</body>
 
</html>
复制

rgba, hsla 和 opacity

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,body{
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
 
<body>
    <!-- 直接设置会影响子盒子的颜色 -->
 
    <!-- 弹框，给父盒子设置一个背景色为 rgba() ,子盒子的颜色不会被影响 -->
    <div class="dialog" style="width: 100%;height: 100%; background-color: black; opacity: 0.5;">
        <div class="content" style="width: 200px;height: 200px;background-color: red;"></div>
    </div>
 
    <!-- <div class="dialog" style="width: 100%;height: 100%; background-color: rgba(0,0,0,0.5);">
        <div class="content" style="width: 200px;height: 200px;background-color: red;"></div>
    </div> -->
 
    <!-- <div style="width: 200px;
    height: 200px;background-color: hsla(24, 50%, 47%, 0.416);"></div> -->
 
 
 
</body>
<script>
       // 1. hex 16进制 0-f
       // 2. rgb 和 rgba
       // 3. hsl 和 hsla
       //   hsl(色调0-360，饱和度，亮度)
       
</script>
 
</html>
复制

使用opacity给父盒子添加透明度时会影响到子盒子，其他两个不会
如下图使用opacity，代码如上
使用opacity
下图使用rgba
在这里插入图片描述

四. HTML区块

1.块级元素

div 定义了文档的区域，块级 (block-level)
块级元素有：div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre、header、section、aside、footer等。

2.内联元素

span 用来组合文档中的行内元素， 内联元素(inline)
行内元素：span、img、a、lable、input、abbr（缩写）、em（强调）、big、cite（引用）、i（斜体）、q（短引用）、textarea、select、small、sub、sup，strong、u（下划线）、button等。

五.在VS中常用的快捷方式

    ctrl + B 折叠菜单
    shift + alt + F 格式化
    shiift + alt + 向下箭头 向下复制一行
    ctrl + z    撤销
    ctrl + v    粘贴
    ctrl + c    复制
    ctrl + x    剪切
    crtl + k, ctrl + 0 全部折叠
    ctrl + k, ctrl + j 全部展开
    快速生成带有标签的类名 标签名.类名 如 img.price
    快速生成标签 如 ul>li{$}*3
复制
转载请注明出处或者链接地址：https://www.qianduange.cn//article/22840.html
标签
上一篇：HTML基本结构及基本标签
评论
还可以输入200
共0条数据,当前/页
首页 上一页 下一页 尾页
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

【Unity 编辑器插件】Runtime Editor 强大的编辑功能，可实现游戏运行时直接修改场景中的对象、组件、脚本和属性

2025-03-08 14:03:37

Lua与Unity交互

2025-03-08 14:03:36

Pygame介绍与游戏开发

2025-03-08 14:03:36

【Unity精品源码】JU TPS 3 – 完整的第三人称射击游戏模板

2025-03-08 14:03:36

自回归模型（Autoregressive, AR）解读

2025-03-08 14:03:36

[包管理器窗口] 搜索包时出错。UnityEditor.EditorApplication:Internal_CallUpdateFunctions ()

2025-03-08 14:03:34

Unity新版InputSystem短按与长按，改键的实现

2025-03-08 14:03:34

Pygame经典小游戏--贪吃蛇（完整代码 部分代码讲解）

2025-03-08 14:03:34

Unity Mirror插件WebGL端多人联机实现

2025-03-08 14:03:03

用 Python 写了一个天天酷跑(附源码)

2025-03-08 14:03:02

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS 动画效果（5种） - 附完整示例

2025-02-28 12:02:481000
3

在Vue中实现与OpenAI对话的功能

2025-02-27 11:02:161000
4

jQuery.flowchart 项目常见问题解决方案

2025-02-24 13:02:021000
5

CSS常用属性（文本属性）

2024-11-04 09:11:111000
6

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
7

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
8

vue使用datav echarts

2024-09-06 00:09:381000
9

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
10

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！