HTML知识

最新推荐文章于 2024-07-11 22:36:37 发布
最新推荐文章于 2024-07-11 22:36:37 发布
阅读量71 收藏
点赞数
分类专栏： HTML 文章标签： html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53179277/article/details/120488181
版权

文章目录

初识HTML

什么是HTML

HTML（Hyper Text Markup Language超文本语言）
超文本语言包括：文字、图片、音频、视频、动画等

HTML发展史

目前最常用：HTML5+CSS3
HTML5：
提供了一些新的元素和一些有趣的新特性，同时也建立了一些新的规则。这些元素、特性和规则的建立，提供了许多新的网页功能，如使用网页实现动态渲染图形、图表、图像和动画，以及不需要安装任何插件直接使用网页播放视频等。

HTML5的优势

  • 世界知名浏览器厂商对HTML5的支持
  • 市场的需求
  • 跨平台

W3C标准

  • W3C
    World Wide Web Consortium（万维网联盟）
    成立于1994年，Web技术领域最权威和最具影响力的国际中立性技术标准机构
  • W3C标准包括
    • 结构化标准语言（HTML、XML）
    • 表现标准语言（CSS）
    • 行为标准语言（DOM、ECMAScript）

HTML基本结构

在这里插入图片描述

网页的基本信息

  • DOCTYPE声明：告诉浏览器要使用什么规范
  • < title >标签：网页标题
  • < meta >标签
<!DOCTYPE html>
<html lang="en">
<head>
    <!--meta描述性标签，用来描述网站的一些信息-->
    <!--meta一般用来做SEO（Search Engine Optimization搜索引擎优化）-->
    <meta charset="UTF-8">
    <meta name="description" content="欢迎来到这里学习!">
    <title>Title</title>
</head>
<body>

</body>
</html>

网页的基本标签

  • 标题标签
    在这里插入图片描述

  • 段落标签
    在这里插入图片描述

  • 换行标签

<br/>
  • 水平线标签
<hr/>
  • 字体样式标签
<!--粗体-->
<strong></strong>
<!--斜体-->
<em></em>
  • 注释和特殊符号
<!--空格-->
&nbsp;
<!--大于-->
&gt;
<!--小于-->
&lt;
<!--版权符号-->
&copy;

图像标签

常见的图像格式

  • jpg
  • gif
  • png
  • bmp
  • …
    在这里插入图片描述
  • 图片单独建立一个文件夹
    在这里插入图片描述

src：图片地址
相对地址（推荐使用），绝对地址
../：表示上一级目录
在这里插入图片描述

链接标签

在这里插入图片描述

文本超链接

_blank：打开另一个新页面
_self：该页面上跳转
在这里插入图片描述

图像超链接

在这里插入图片描述

超链接

  • 页面间链接

    • 从一个页面链接到另一个页面

  • 锚链接
    在这里插入图片描述

  • 功能性链接
    在这里插入图片描述
    qq链接：qq推广生成代码样式

行内元素和块元素

  • 块元素：

    • 无论内容多少，该元素独占一行
    • （p、h1-h6…）

  • 行内元素

    • 内容撑开宽度，左右都是行内元素的可以排在一起
    • （a，strong，em…）

列表

什么是列表

列表就是信息资源的一种展现形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息

列表的分类

  • 有序列表
<ol>
	<li>Java</li>
	<li>Python</li>
	<li>运维</li>
	<li>C/C++</li>
</ol>

在这里插入图片描述

  • 无序列表
<ul>
	<li>Java</li>
	<li>Python</li>
	<li>运维</li>
	<li>C/C++</li>
</ul>

在这里插入图片描述

  • 定义列表
<!--自定义列表
dl：标签
dt：列表名称
dd：列表内容
-->
<dl>
    <dt>学科</dt>
    <dd>Java</dd>
    <dd>Python</dd>
    <dd>运维</dd>
    <dd>C/C++</dd>

    <dt>位置</dt>
    <dd>北京</dd>
    <dd>上海</dd>
    <dd>西安</dd>
    <dd>新疆</dd>
</dl>

在这里插入图片描述

表格

为什么使用表格

  • 简单通用
  • 结构稳定

表格基本结构

  • 单元格
  • 行
  • 列
  • 跨行（合并单元格）
  • 跨列
    在这里插入图片描述

视频和音频（媒体元素）

在这里插入图片描述

页面结构分析

在这里插入图片描述
在这里插入图片描述

iframe内联框架

在这里插入图片描述
在这里插入图片描述

初识表单post和get

在这里插入图片描述

<!--表单form
action：表单提交的位置，可以是网站，也可以是一个请求处理地址
method：post，get 提交方式
        get方式提交：可以在url中看到我们提交的信息，不安全，高效
        post：比较安全，可传输大文件
-->
<form action="firsthtml.html" method="get">
    <p>名字：<input type="text" name="username"></p>
    <p>密码：<input type="password" name="pwd"></p>

    <p>
        <input type="submit">
        <input type="reset">
    </p>
</form>

get请求：
在这里插入图片描述
post请求：
在这里插入图片描述

表单元素格式

在这里插入图片描述
在这里插入图片描述
处于相同组才能实现单选
在这里插入图片描述
checked默认选中
在这里插入图片描述
在这里插入图片描述

列表框文本域和文件域

在这里插入图片描述
在这里插入图片描述

搜索框滑块和简单验证

在这里插入图片描述
在这里插入图片描述

表单的应用

  • 隐藏域 （hidden）
    输入框会消失，但是键还在，可以设置默认值
<p>密码：<input type="password" name="pwd" value="123456" hidden></p>
  • 只读（readonly）
p>名字：<input type="text" name="username" value="admin" readonly></p>
  • 禁用（disabled）
p>性别：
<input type="radio" name="sex" value="boy" checked disabled></p>

增强鼠标可用性
点击文字跳入指定id的输入框

<p>
	<label for="mark">点我试试</label>
	<input type="text" id="mark">
</p>

表单初级验证

为什么要进行表单验证？

  • 保证数据安全性
  • 减少服务器压力

常用方式

  • placeholder（给用户提供提示信息）
 <p>名字：<input type="text" name="username" placeholder="请输入用户名"></p>

在这里插入图片描述

  • required（非空判断）
<p>名字：<input type="text" name="username" placeholder="请输入用户名" required></p>

在这里插入图片描述

  • pattern（正则表达式）
    在这里插入图片描述
Veyit
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML 知识点总结
m0_57202083的博客
08-12 2438
HTML实例 <!DOCTYPE html> <!-- 注:<!DOCTYPE>标签没有结束标签! --> <html><!-- 元素是 HTML 页面的根元素 --> <head><!-- (头部部分) --> <meta charset="utf-8"> <title>显示在浏览器标题栏中的标题</title> </head> <body>&.
html知识点
07-26
一、HTML知识点 1. HTML基本结构：一个HTML文档通常由<!DOCTYPE>声明、<html>根元素、头部元素和主体元素组成。<!DOCTYPE>声明指定了文档类型，中包含元数据如标题、字符集等，则包含实际的网页内容。 2. HTML标签...
HTML知识点总结大纲
super_Fake的博客
11-30 5786
HTML知识点总结 一.基本知识 HTML 指的是超文本标记语言: HyperText Markup Language HTML 标记标签通常被称为 HTML 标签 (HTML tag) <标签>内容</标签> HTML 元素包含了开始标签与结束标签，元素的内容是开始标签与结束标签之间的内容，元素属性是 HTML 元素提供的附加信息。 基本HTML 网页结构如下，body标签内的才是我们在浏览器上所视内容 <!DOCTYPE html>声明为 HTML5 文档 &
HTML基础知识点
qq_40046544的博客
07-27 8537
网页是一个包含HTML标签的纯文本文件，它可以存放在世界某个角落的某一台计算机中，是万维网中的一页，是超文本标记语言格式。它通常是由图片、文字、链接、声音、视频等元素组成。通过网页浏览器访问。HTML指的是超文本标记语言（HyperTextMarkupLanguage），它是用来描述网页的一种语言。web标准也成为网页标准，它是由一系列标准组成，这些标准大部分由W3C负责定制，也有一些标准由其他标准组织制定。绝对路径指目录下的绝对位置，可以直接到达目标位置，通常从盘符开始的路径。例如D从。...
HTML5前端知识图谱
kyl282889543的博客
02-02 8628
HTML5知识图谱HTML5知识概要 HTML5知识概要
HTML基础知识
xuan971130的博客
03-02 2882
一、基础知识： 1.网站：许多网页的集合。 2.HTML：超文本标记语言（Hyper Text Markup Language），用来描述网页的一种语言。不是一种变编程语言，而是一种标记语言。 3.浏览器内核（渲染引擎）：负责读取网页内容，整理讯息、计算网页的显示方式并显示页面。 4.Web标准的组成 ...
前端-HTML基础知识详解
qq_52262831的博客
12-23 4863
目录： 初始常用的HTML标签 资源路径 列表标签 表格标签 表单标签 表单提交
HTML基础知识点大全
m0_69674158的博客
05-04 6828
一、什么是HTML HyperText Markup Language，即超文本标记语言 二、第一个HTML <！doctpye html> <html> <head></head> <body></body> <html> 三、常用的标签🀄️🀄️🀄️ 1⃣️p 标签 ，段落标签，占整行 2⃣️img 图片标签： ①src 图片路径：绝对路径http://xxx.xx/xx/x.jpg 相对路径..
html最全知识点（超级详细）
热门推荐
xiaotai1234的博客
09-08 1万+
html最全知识点（超级详细） 一、网页基础知识 1.认识网页（了解） 2.五大浏览器介绍（记忆） 概述 各浏览器的市场份额 查看网站： http://tongji.baidu.com/data/browser 浏览器内核 3.Web标准（记忆） 为什么会有web标准 Web 标准构成 图解Web标准 把一个页面看成一个人 **结构标准：**决定是否有一个好的身体。 **样式标准：**决定是否化妆的美丽漂亮。 **行为标准：**决定是否有吸引人的行为。 二、HTML基础概念 1.HTML初
HTML基础知识点整理归纳
paparuazi的博客
06-21 6156
一、 HTML的基本结构 <head> <title>网页的标题</title> <meta charset="utf-8"/> </head> <body> 写网页的主体 </body> 注意：写完代码记得将格式保存为.html（推荐） htm xhtml HTML的基本结构详解 1.<html>内容</html> 解释：HTML文档的文档标记，也称为HTML开始标记
HTML5基础知识
qq_46485137的博客
02-13 4538
一、初识HTML HTML：Hyper Text Markup Language（超文本标记语言） 超文本包括：文字、图片、音频、视频、动画等 HTML5的优势： 跨平台、 W3C标准 World Wide Web Consortium（万维网联盟） 成立于1994年，Web及时领域最权威和具影响力的国际中立性技术标准机...
html知识大全
10-31
随着时代的不断进步，前端技术也日新月异，...自从html5登上历史舞台后，越来越多的网站开始去使用它例如百度，京东，甚至是苹果官网。由此看来html5对于前端人员来言学好它是必须的。那么我们应该怎样去学习html5呢？
HTML 知识点总结
01-02
HTML 知识点总结 HTML 知识点总结 HTML 知识点总结 HTML 知识点总结
前端之HTML知识点整理汇总(推荐)
09-28
下面小编就为大家带来一篇前端之HTML知识点整理汇总(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
HTML知识点汇总
01-19
一、HTML基础知识；二、文字与图像；三、超级链接；四、表单；五、表格；六、框架；七、网页多媒体；附录、HTML标签列表
[Vue3 + TS + Vite] 获取网页选中内容的字符串格式或HTML格式
qq_45831414的博客
07-08 278
【代码】[Vue3 + TS + Vite] 获取网页选中内容的字符串格式或HTML格式。
一文清晰了解HTML——简单实例
weixin_73074505的博客
07-08 241
1.img中src有绝对路径、相对路径及网络路径之分。其中相对路径有../上一目录 ./当前目录 （./可省略） 命令。 【上述为网络路径】 2. img还有width与heigh，单位可为px（像素）一般屏幕分辨率为1024*768；可为百分比，意为占body长或高的百分之多少。
html的作业
2301_79807099的博客
07-06 565
【代码】html的作业。
HTML 基础
最新发布
2302_77179144的博客
07-11 559
文章目录HTML 结构认识 HTML 标签HTML 文件基本结构快速生成代码框架HTML 常见标签注释标签标题标签: h1-h6段落标签: p换行标签: br格式化标签图片标签: img超链接标签: a表格标签列表标签表单标签form 标签input 标签label 标签select 标签textarea 标签无语义标签: div & span综合案例: 填写简历信息Emmet 快捷键HTML 特殊字符 HTML: 页面有哪些元素组成 CSS:这些元素的样式、布局、排版等 JS:这些元素之间如何交
Html知识点汇总.docx
08-29
"HTML知识点汇总" HTML（HyperText Markup Language）是一种标记语言，用于构建和组织网页的结构。它是Web开发的基础，允许开发者通过各种标签来指定网页内容的样式和布局。以下是对HTML部分核心知识点的详细说明：...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值