HTML总结

最新推荐文章于 2024-09-16 23:39:36 发布
最新推荐文章于 2024-09-16 23:39:36 发布
阅读量107 收藏
点赞数
文章标签： html 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_56471396/article/details/128580436
版权

HTML总结

一些比较杂的东西：
注释:Ctrl+/
< p>、< /p>等成对的标签，分别叫开放标签和闭合标签，其中快捷键是p+tap
单独呈现的标签（空元素），如< hr/>;意为用/来关闭空元素

1.HTML的基本结构

<!-- DOCTYPE：告诉浏览器，我们要使用什么规范 这是默认的，可删除-->
<!DOCTYPE html>
<html lang="en">
<!--head代表网页头部-->
<head>
    <!--meta描述性标签，它用来描述我们网站的一些信息-->
    <!--meta一般用来做SEO-->
    <meta charset="UTF-8">
    <meta name="keywords" content="辉煌说">
    <meta name="description" content="在学HTML">
    <!--title：网页标签-->
    <title>头部</title>
</head>
<!--body:网页主体-->
<body>
Hello World!
<p></p>
</body>
</html>

效果

在这里插入图片描述

2.网页的基本标签

2.1标题标签

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>

2.2段落标签

<p>段落标签：p+Tab</p>

2.3换行标签

<!--br:换行标签-->
两只老虎，两只老虎<br/>
跑得快，跑得快<br/>

2.4水平线标签

<!--水平线标签-->
<hr>

2.5字体样式标签

<!--字体样式标签--> 
<strong>粗体</strong>
<em>斜体</em><br/>

2.6特殊符号

<!--特殊符号-->
空            格<br/>
空&nbsp;&nbsp;格<br/>
&copy;版权<br/>

演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
标题标签：
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>

<p>段落标签：p+Tab</p>
<!--br:换行标签-->
两只老虎，两只老虎<br/>
跑得快，跑得快<br/>

<!--水平线标签-->
<hr>

<!--字体样式标签-->
<h1>粗体，斜体</h1>
<strong>粗体</strong>
<em>斜体</em><br/>

<!--特殊符号-->
空            格<br/>
空&nbsp;&nbsp;格<br/>
&copy;版权<br/>
</body>
</html>

效果

在这里插入图片描述

3.图像标签

知识点：
1.图像地址；2.替代文字；3.鼠标悬停提示文字；4.高度和宽度

3.1常见的图像格式

JPG、GIL、PNG、BMP

<!--scr:"path"里面放：图像地址
alt="text"里面放：图像的替代文字
title="text"里面放：鼠标悬停提示文字
width="x"里面放：图像宽度
height="y"里面放：图像高度
-->
<img src="path" alt="text" title="text" width="x" height="y"/>

3.2图像放置的位置

在这里插入图片描述

相对路径

src="../resource/image/1.jpg"

3.3例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>
<!--img学习
src : 图片地址（必填）
    相对路径（推荐使用），绝对路径
    ../   -- 上一级目录
alt : 图片名字（必填）
-->
<img src="../resource/image/1.jpg" alt="定向照片"
     title="悬停文字——定向快乐" width="300" height="300">
</body>
</html>
效果

在这里插入图片描述

4.超链接标签

知识点

<!--herf="path"里面放：链接路径
target="目标窗口位置" 链接在哪个窗口打开；里面放：常用值：_self（在自己的网页中打开——默认）、_blank（在新标签中打开）
-->
<a href="path" target="目标窗口位置">连接文本或图像</a>

4.1锚链接

<a href="top">顶部</a>
<!--锚链接
1.需要一个锚标记
2.跳转到标记
-->
<a href="#top">回到顶部</a>

4.2功能性链接

<!--功能性链接
邮件链接 ： mailto
-->
<a href="mailto:760732722@qq.com">点击联系我</a>

4.3例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习</title>
</head>
<body>
<a href="top">顶部</a>
<!--a标签
href：必填，表示要跳转到哪个页面
target: 表示窗口在哪里打开
    _blank 在新标签中打开
    _self  在自己的网页中打开(默认)
-->
<a href="3.图像标签.html" target="_blank">点我跳转到“定向照”</a>
<br/>
<a href="1.第一个HTML.html" target="_blank">
    <img src="../resource/image/1.jpg" alt="定向照片" 
         title="悬停文字——定向快乐" width="300" height="300"></a>
<!--锚链接
1.需要一个锚标记
2.跳转到标记
-->
<a href="#top">回到顶部</a>
<!--功能性链接
邮件链接 ： mailto
-->
<a href="mailto:760732722@qq.com">点击联系我</a>
</body>
</html>

4.4展示

在这里插入图片描述

5.行内元素和块元素

行内元素：排在一行，如< a>、< strong>、< em>
块元素：独占一行，如< p>

6.列表标签

6.1有序列表

<!--有序列表
应用范围：试卷、问答-->
<ol>
    <li>java</li>
    <li>Python</li>
</ol>

在这里插入图片描述

6.2无序列表

<!--无序列表
应用范围：导航、侧边栏-->
<ul>
    <li>java</li>
    <li>Python</li>
</ul>

在这里插入图片描述

6.3自定义列表

<!--自定义列表
dl:标签
dt:列表名称
dd:列表内容
用处：公司网站底部
-->
<dl>
    <dt>学科</dt>
    <dd>java</dd>
    <dd>Python</dd>
</dl>

在这里插入图片描述

6.4例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表标签</title>
</head>
<body>
<!--有序列表-->
<ol>
    <li>java</li>
    <li>Python</li>
</ol>
<!--无序列表-->
<ul>
    <li>java</li>
    <li>Python</li>
</ul>
<!--自定义列表-->
<dl>
    <dt>学科</dt>
    <dd>java</dd>
    <dd>Python</dd>
</dl>
</body>
</html>

6.5效果

在这里插入图片描述

7.表格标签

7.1表格

<table>
</table>

7.2行

    <tr>
    </tr>

7.3列

<td></td>

7.4跨行

<!--rowspan 跨行-->
    <td rowspan="2">2-1</td>

7.5跨列

<!--colspan 跨列-->
        <td colspan="4">1-1</td>

7.6列子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格学习</title>
</head>
<body>
<!--表格table
行   tr  rows
列   td
-->
<table border="1px">
    <tr>
<!--colspan 跨列-->
        <td colspan="4">1-1</td>
    </tr>
    <tr>
<!--rowspan 跨行-->
    <td rowspan="2">2-1</td>
    <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
    </tr>
</table>
</body>
</html>

7.7展示

在这里插入图片描述

8.媒体资源

8.1音频与视频

知识点：
1.资源路径；2.控制条；3.自动播放

<!--音频和视频
scr:资源路径
controls:控制条
autoploy:自动播放
-->
<video src="../resource/video" controls autoplay></video>
<audio src="../resource/audio" controls autoplay></audio>

8.1列子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>音频和视频</title>
</head>
<body>
<!--音频和视频
scr:资源路径
controls:控制条
autoploy:自动播放
-->
<video src="../resource/video" controls autoplay></video>
<audio src="../resource/audio" controls autoplay></audio>
</body>
</html>

8.2效果

在这里插入图片描述

9.页面结构分析

比较重要的是：header、footer、nav
在这里插入图片描述

10.iframe内联框架

<!--iframe 内联框架
src : 地址
w-h : 宽度高度
-->
<iframe src="" name="hello" frameborder="0" width="1000px" height="800px"></iframe>

10.1例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe</title>
</head>
<body>
<!--iframe 内联框架
src : 地址
w-h : 宽度高度
-->
<iframe src="" name="hello" frameborder="0" width="500px" height="500px"></iframe>
<a href="6.表格.html"  >点击跳转</a>

<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11"
        scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
</body>
</html>

展示

在这里插入图片描述

11.初识表单form中post和get提交

11.1post和get提交

<!--表单form
action：表单提交的位置，可以是网站，可以是请求处理的地址
method： post,get 提交方式
    get:可以在url中看到我们提交的信息，不安全，高效
    post:比较安全，传输大文件
-->
<form action="1.第一个HTML.html" method="get">
</form>

11.2表单元素格式

在这里插入图片描述

11.3文本框

<!--文本输入框：input type="text"
value="辉煌好帅" 默认初始值
maxlength="8"   最长能写几个字符
size="30"       文本框的长度
-->
<p>名字：<input type="text" name="un" value="辉煌好帅"></p>
效果

在这里插入图片描述

11.4密码框

<p>密码：<input type="password" name="pwd"></p>

在这里插入图片描述

11.5单选框

<!--单选框标签
input type="radio"
value:单选框的值(必须有)
name:表示组
-->
    <p>性别：
        <input type="radio" value="boy" name="sex"/>男
        <input type="radio" value="girl" name="sex"/>女
    </p>

在这里插入图片描述

11.6多选框

<!--多选框
input type="checkbox"
-->
    <p>爱好：
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby">敲代码
        <input type="checkbox" value="chat" name="hobby">聊天
    </p>

在这里插入图片描述

11.7按钮

<!--按钮
input type="button" 普通按钮
input type="image"  图像按钮
input type="submit" 提交按钮
input type="reset"  重置
-->
    <p>按钮：
        <input type="button" name="btn1" value="点击变长">
<!--        <input type="image" src="../resource/image/1.jpg">-->
    </p>
    <p>
        <input type="submit">
        <input type="reset">
    </p>

在这里插入图片描述

11.8下拉框

<!--下拉框，列表框-->
    <p>国家：
        <select name="列表名称">
            <option value="china">中国</option>
            <option value="us">美国</option>
            <option value="eth" selected>瑞士</option>
        </select>
    </p>

在这里插入图片描述

11.9文本域

<!--文本域
cols="50" row="30"
-->
    <p>反馈：
        <textarea name="textarea" cols="50" rows="10">文本内容</textarea>
    </p>

在这里插入图片描述

11.10文本域

<!--文本域
input type="file" name="files"
-->
    <p>
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>

在这里插入图片描述

11.11邮件验证

<!--邮件验证-->
    <p>邮件：
        <input type="email" name="email">
    </p>

在这里插入图片描述

11.12URL

<!--URL-->
    <p>URL:
        <input type="url" name="url">
    </p>

在这里插入图片描述

11.13数字

<!--数字-->
    <p>商品数量
        <input type="number" name="num" max="100" min="0" step="1">
    </p>

在这里插入图片描述

11.14滑块

<!--滑块
input type="range"
-->
    <p>音量
        <input type="range" name="voice" min="0" max="100" step="2">
    </p>

在这里插入图片描述

11.15搜索框

<!--搜索框-->
    <p>搜索：
        <input type="search" name="search">
    </p>

在这里插入图片描述

11.16增强鼠标可用性

<!--增强鼠标可用性-->
    <p>
        <label for="mark">点我试试</label>
        <input type="text" id="mark">
    </p>

在这里插入图片描述

11.17例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>表单学习</h1>
<!--表单form
action：表单提交的位置，可以是网站，可以是请求处理的地址
method： post,get 提交方式
    get:可以在url中看到我们提交的信息，不安全，高效
    post:比较安全，传输大文件
-->
<form action="1.第一个HTML.html" method="get">
<!--文本输入框：input type="text"
value="辉煌好帅" 默认初始值
maxlength="8"   最长能写几个字符
size="30"       文本框的长度
-->
    <p>名字：<input type="text" name="un" value="辉煌好帅"></p>
    <p>密码：<input type="password" name="pwd"></p>

<!--单选框标签
input type="radio"
value:单选框的值(必须有)
name:表示组
-->
    <p>性别：
        <input type="radio" value="boy" name="sex"/>男
        <input type="radio" value="girl" name="sex"/>女
    </p>

<!--多选框
input type="checkbox"
-->
    <p>爱好：
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby">敲代码
        <input type="checkbox" value="chat" name="hobby">聊天
    </p>

<!--按钮
input type="button" 普通按钮
input type="image"  图像按钮
input type="submit" 提交按钮
input type="reset"  重置
-->
    <p>按钮：
        <input type="button" name="btn1" value="点击变长">
<!--        <input type="image" src="../resource/image/1.jpg">-->
    </p>
<!--下拉框，列表框-->
    <p>国家：
        <select name="列表名称">
            <option value="china">中国</option>
            <option value="us">美国</option>
            <option value="eth" selected>瑞士</option>
        </select>
    </p>

<!--文本域
cols="50" row="30"
-->
    <p>反馈：
        <textarea name="textarea" cols="50" rows="10">文本内容</textarea>
    </p>
<!--文本域
input type="file" name="files"
-->
    <p>
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>

<!--邮件验证-->
    <p>邮件：
        <input type="email" name="email">
    </p>
<!--URL-->
    <p>URL:
        <input type="url" name="url">
    </p>
<!--数字-->
    <p>商品数量
        <input type="number" name="num" max="100" min="0" step="1">
    </p>
<!--滑块
input type="range"
-->
    <p>音量
        <input type="range" name="voice" min="0" max="100" step="2">
    </p>
<!--搜索框-->
    <p>搜索：
        <input type="search" name="search">
    </p>

<!--增强鼠标可用性-->
    <p>
        <label for="mark">点我试试</label>
        <input type="text" id="mark">
    </p>
    <p>
        <input type="submit">
        <input type="reset">
    </p>
</form>
</body>
</html>

在这里插入图片描述

12.表单的应用

12.1 隐藏域hidden

<p>密码：<input type="password" name="pwd" hidden value="1233456"></p>

在这里插入图片描述

12.2 只读 readonly

<p>名字：<input type="text" name="un" value="辉煌好帅" readonly></p>

在这里插入图片描述

12.4禁用disabled

不能提交

13.表单初级验证

13.1用户提示placehoder

<p>密码：<input type="password" name="pwd" placeholder="请输入密码"></p>

在这里插入图片描述

13.2非空判断required

就是不能为空的意思

<p>密码：<input type="password" name="pwd" placeholder="请输入密码" required></p>

在这里插入图片描述

13.3正则表达式

https://www.jb51.net/tools/regexsc.htm

<p>邮件：
<input type="email" name="email" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/或\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
    </p>

在这里插入图片描述

氢气220
关注
html总结.xmind
09-08
自己总结的html的笔记，绘制了详细的思维导图，每个思维导图中均有详细的博文解释，方便大家学习和理解，免费分享给大家。适合网页前端的爱好者和学习者
HTML总结.xmind
02-23
HTML总结.xmind
html总结.
03-02
html总结.
html总结文档
05-12
html常用标签总结，包含各种表单标签 1.表单：<form></form> 主要属性：id name action method 2.input元素： 主要属性：name type value class type： text submit button radio checkbox hidden...
HTML 揭秘：HTML 编码快速入门
m0_53117341的博客
09-09 1258
HTML 揭秘：HTML 编码快速入门一 . 前端知识介绍二 . HTML 介绍三 . HTML 快速入门四 . HTML 编辑器 - VSCode4.1 插件安装4.2 修改主题配色4.3 修改快捷键4.4 设置自动保存4.5 创建 HTML 文件4.5 书写 HTML 代码4.6 常见快捷键五 . 基础标签5.1 字体标签5.1.1 color 属性5.1.2 size 属性5.1.3 face 属性5.2 i 标签、b 标签5.3 hr 标签5.4 br 标签5.5 center 标签5.6 练习5.
HTML、CSS实现树状图
p_s_p的博客
09-09 587
【代码】HTML、CSS实现树状图。
Openlayers 报错记录 Failed to execute ‘toDataURL‘ on ‘HTMLCanvasElement‘:
Liszter
09-12 523
原因是引用的图层得配置跨域问题。这是浏览器对canvas 设置的导出安全策略。每个引用的图层添加一个。即可、、、 不用谢、、
【HTML】Html标签
千里之行，始于足下
09-12 1070
文本标签、表格标签、表单标签、列表标签、媒体标签、特殊字符、转义字符
Requests-HTML模块怎样安装和使用？
2301_79698214的博客
09-11 674
上述代码中，首先创建了一个HTMLSession对象，然后使用get()方法发送GET请求，获取网页的HTML内容。最后，使用response.html.text属性获取HTML文本，并将其打印输出。以上就是使用Requests-HTML模块的基本步骤。在Python脚本中导入Requests-HTML模块。使用Requests-HTML模块发送HTTP请求和解析HTML内容。使用pip命令安装Requests-HTML模块。系统会自动下载并安装Requests-HTML模块及其依赖项。
reader-lm：小模型 html转markdown
weixin_42357472的博客
09-12 401
输入网址：https://www.galaxy-geely.com/E5。
甘特图组件DHTMLX Gantt中文教程 - 如何实现持久UI状态
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
09-12 963
本文将为大家介绍在使用DHTMLX Gantt时如何实现持久UI状态，欢迎下载新版组件体验！
介绍一些免费 的 html 5模版网站 和配色 网站
小 tom的博客
09-16 578
提示：以下是本篇文章正文内容，下面案例可供参考以下是一些提供免费网站模板的网站，适用于各种类型的网站（如个人博客、企业站点、电子商务等）。这些模板通常带有响应式设计，适用于桌面、平板和移动设备。Wix网站：Wix特点：Wix 提供了大量免费的、可自定义的网站模板，涵盖博客、商业、艺术作品集、在线商店等多种类型。使用他们的拖放式编辑器，可以轻松调整布局和风格。适用对象：新手和不熟悉代码的人。TemplateMo网站：TemplateMo。
《实现 HTML 图片轮播效果》
qq_69304031的博客
09-11 816
在网页设计中，轮播效果是非常常见且重要的元素。它可以在有限的空间内展示多张图片或者广告，能够有效地吸引用户的注意力，提高信息展示的效率。常用于网站首页的焦点图展示、商品图片展示等场景。以下是一个简单的 HTML、CSS 和 JavaScript 实现的图片轮播代码示例。
通过鼠标移动来调整两个盒子的宽度(响应式)
最新发布
qq_57423665的博客
09-16 141
就可以完成拖动那根线，实现两边的盒子的宽度根据线的移动而变化；
requests-html的具体使用方法有哪些？
2301_79698214的博客
09-12 642
requests-html库还支持使用XPath表达式来查找元素，提供了丰富的功能来满足各种网页数据抓取和分析的需求‌。‌：通过pip安装requests-html库，命令为。‌：通过继续跟踪网页中的链接，可以获取到更多相关内容。
javaWeb三剑客：html,css
2301_80112070的博客
09-09 1414
**注意布局标签的使用可以配合CSS来使用，如果只需要某一个方位的边框·内边距·外边距，可以在属性名后加上 -位置 ，如 ：padding-top , padding-left , padding-right。rgb表示法：红绿蓝三原色，每项取值范围：0~255 rgb(红，绿，蓝) ， rgb(0,0,0) , rgb(255,255,255) , rgb(255,0,0)">焦点访谈：中国底气 新思想夯实大国粮仓</h1><h1 style="***：***，***：***;
Html css样式总结
qq_36158551的博客
09-15 786
布局是html中非常重要的一部分，而定位在页面布局中也是使用频率很高的方法，本章节为定位在布局中的使用技巧和注意事项。position定位有4个属性，分别是static(默认），absolute（绝对定位），relative（相对定位），fixed（固定定位–相对于浏览器窗口）。
XWiki中添加 html 二次编辑失效
galoiszhou的博客
09-12 362
使用 XWiki 中的 HTML 宏：如果标准的 Markdown 语法和 XWiki 的链接语法都无法工作，可以考虑使用 HTML 宏，它可以让你在 XWiki 页面中插入纯 HTML 代码，而不会被自动转换回 Markdown。如果直接在 XWiki 中添加 html, 例如 修改颜色, 新窗口打开主页面等功能, 首次保存是生效的. 如果再次编辑, 则失效, 原因是被转换成了 Markdown 的代码, 而 Markdown 不支持.解决这个问题可以使用 HTML 宏.
HTML中2种实现点击后出现隐藏列表的方法
qq_39551449的博客
09-13 262
script>}else{// }// });</script>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值