HTML和CSS基础系列（一）

最新推荐文章于 2024-11-19 20:40:54 发布
最新推荐文章于 2024-11-19 20:40:54 发布
阅读量378 收藏 1
点赞数
分类专栏： HTML&&CSS 文章标签： web HTML5 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42532128/article/details/107737059
版权
本文介绍了HTML5的doctype声明及其简化原因，探讨了不同DOCTYPE的类型，详细讲解了HTML5中的行内元素、块级元素和行内块级元素的特性，并提及了HTML5表单验证、全局错误监听方法、DOM的dataset属性以及HTML5的离线缓存机制。此外，还讨论了iframe的优缺点和相关属性，以及HTML元素title、h1、b、i、strong和em的用途与区别，以及img标签的title和alt属性的功能差异。
摘要由CSDN通过智能技术生成

文章目录

Doctype

<!DOCTYPE>声明位于HTML文档中的第一行，处于 <html> 标签之前。

<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。

HTML5 不基于 SGML，所以不需要引用 DTD。

HTML5 为什么只需要写 !DOCTYPE HTML

HTML5 不基于SGML，因此不需要对 DTD 进行引用，但是需要 doctype 来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；

而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

你知道多少种Doctype文档类型？

该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。

  • Strict：该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。
  • Transitional：该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。
  • Frameset：该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。允许框架集（Framesets）。

HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。

XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。必须以格式正确的 XML 来编写标记。

XHTML 1.1 该 DTD 等同于 XHTML 1.0 Strict，但允许添加模型。

行内元素和块级元素

块级元素

  • 总是在新行上开始
  • 高度，行高以及外边距和内边距都可控制
  • 宽度默认是它的容器的100%，除非设定一个宽度
  • margin和padding上下左右都有效
  • 它可以容纳内联元素和其他块元素

常用的块级元素：

  • <div>
  • <h1>~<hn>、<p>、<pre>、<article>、<address>
  • <form>、<footer>、<header>、<aside>、<nav>
  • <hr>
  • <table>、<th>、<tr>、<td>、<caption>
  • <ul>、<ol>、<li>
  • <dl>、<dt>、<dd>

行内元素

  • 不自动换行
  • 高，行高及外边距和内边距不可改变
  • 宽度就是它的文字或图片的宽度，不可改变
  • 内联元素只能容纳文本或者其他内联元素

对行内元素，需要注意：

  • 设置宽度width 无效。
  • 设置高度height 无效，可以通过line-height来设置。
  • 设置margin 只有左右margin有效，上下无效。
  • 设置padding 上下左右都有效，会撑大空间。

常用的行内元素：

  • <span>
  • <b>、<small>、<big>、<strong>、<em>、<code>、<abbr>、<cite>、<i>、<q>、<sub>、<sup>、<time>
  • <img>、<video>
  • <input>、<textarea>
  • <br>

另外，常见的空元素：<img>、<input>、<link>、<

最低0.47元/天 解锁文章
html与css基础
xiaowu1127的博客
10-20 851
html与css基础
html+css基础代码
06-16
本资料包“html+css基础代码”显然是为了帮助初学者理解这两门语言的基础知识。 HTML是一种标记语言，它使用一系列预定义的标签来告诉浏览器如何呈现网页内容。例如，`<html>`标签定义整个HTML文档的开始，`<head>`...
HTML与CSS基础
Zzy2372的博客
10-09 868
H5+CSS3 第一章：HTML基础 1，HTML简介 HTML (Hyper Text Markup Language) 超文本标记语言 超文本 不仅仅包含文本信息，还包括图片，视频，音频… 标记：用来描述超文本的标签 百度一下 语言：高级计算机语言 2，HTML历史 创始人： Tim Berners-Lee（蒂姆·伯纳斯-李）【互联网之父、W3C创始人、HTML设计者】 1980年，物理学家蒂姆·伯纳斯-李在欧洲核子研究中心（CERN）在承包工程期间，为使CERN的研究人员使用并共享文档，他
HTML+CSS基础
最新发布
z_y_j229970438的博客
11-19 1134
HTML 指的是超文本标记语言 (Hyper Text Markup Language) 语 言：人们用于交流的工具，计算机语言是人与计算机交流的工具。超文本：就是指页面内可以包含图片、链接，甚至音乐、视频等非文字元素。标 记：一种标记符，可以告诉浏览器如何显示其中的内容。，就是一种标记符。我们可以在浏览器里打开任意一个网站页面，它就是一个HTML，当然你所见到的网页都离不开HTML，作为专业的前端工程师，HTML是必学的技能之一。
html和css基础
浮若于心
10-04 471
1、标题标签 <hn></hn> 特点：加粗并变大 2、段落标签 <p> 特点：将内容单独放在一个段落里面有换行的效果 3、换行标签 <br /> 特点：就是换行的意思 4、分割线标签 <hr /> 特点：在页面上添加一条分割线 5、快捷键 ctrl + c 复制 ctrl + v 粘贴 ctrl + s 保存 ctrl + x ...
HTML和CSS基础
qq_42571665的博客
12-23 600
HTML和CSSHTML文本列表链接多媒体表单结构CSS选择器selector层叠样式表文本样式colorfont-familyfont-sizefont-stylefont-weighttext-aligntext-decoration盒模型margin外边距Padding（内边距）Border（边框）displayFlexFloatViewportPosition HTML 文本 code 标签是一个短语标签，用来定义计算机代码文本。 h1-h6六个不同的 HTML 标题 p 标签定义段落 block
Ruby_piscine：进入ruby，html和css的一系列基础项目
02-10
Ruby_piscine：进入ruby，html和css的一系列基础项目
好知网（html和css基础考试试题）.rar
08-24
- **元素与标签**：HTML由一系列的元素组成，每个元素都有其特定的标签，例如`<html>`表示文档的根元素，`<head>`包含了元数据，`<body>`则包含网页的主要内容。 - **文本元素**：如`<h1>`到`<h6>`定义标题，`<p>`...
pc网页html css基础
03-10
**CSS基础知识** 1. **选择器**：CSS通过选择器来定位HTML元素，如标签选择器（`p {color: red;}`），类选择器（`.class-name {property: value;}`），ID选择器（`#id-name {property: value;}`）。 2. **属性与值...
HTML + CSS零基础经典教程系列
06-15
CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。? 这两种语言是组成网页的最基本的内容，也是前端工程师的基本功。 本课程就是带着想入门或者对前端感兴趣的同学从零开始去学习，...
HTML和CSS简单基础
李李的博客
09-22 163
网页由三部分组成：内容、表现和行为。 这第三部分内容一般依靠 HTML、CSS和JavaScript技术来实现。 Hyper Text Markup Language（HTML） 超文本标记语言 HTML通过标签来标记要显示的网页中的各个部分。 书写规范： <html> <!--表示整个HTML页面的开始 --> <head> <!--头信息--> <title>标题&lt
HTML和CSS基础知识
m0_59583208的博客
01-14 383
（2） 绝对定位：position: absolute---- 参考body标签的左上角原点位置进行定位---释放原有空间位置---脱标（脱离标准流布局）----参考自己默认的原位置进行定位---不释放原有空间位置---没有脱标（脱离标准流布局）----参考浏览器窗口的左上角原点位置进行定位---释放原有空间位置---脱标（脱离标准流布局）（1）后代选择器---选择器1 选择器2{样式属性声明}，选择器1中的所有选择器2。（3）id选择器（#id名{样式属性声明}）---id名称在项目中是唯一的。
HTML基础和css基础学习
lxt118518的博客
10-14 282
第三天： 今天是学习的第三天，依旧学习的是HTML的知识 今日学习内容 1、表格标签 为啥使用表格标签？ 简单通用，结构稳定，基本结构 单元格 行 列 跨行 跨列 <!--表格table 行tr 列td border：宽度 --> 代码： <table border="1px"> <tr> <!--colspan跨列--> <td colspan="2">1-1</td>
HTML和CSS基础讲解
上善若泪
03-14 2241
文章目录1 HTML/CSS1.1 网站生成HTML静态页面的好处1.1.1 网站的访问速度更快1.1.2 网站运行更安全1.1.3 网站更容易被搜索到1.2 盒子模型1.3 行内元素,块级元素,空(void)元素,可变元素1.4 CSS实现垂直水平居中1.5 src与href的区别1.6 什么是CSS Hack1.7 同步和异步区别1.8 CSS中长度单位1.9 优雅降级和渐进增强1.10 CSS样式表控制背景图片大小1.10.1 背景图片的导入1.10.2 背景小图片展示1.10.3 背景大图片控制1.
HTML和CSS基础知识汇总
Venus熊的博客
08-02 652
今天学习了HTML的一些基础知识，总结为以下几个方面。 一、概念 html是一种超文本标记语言，超文本顾名思义就是不单只是文本而且包含图片、视频、音频、连接等非文字元素。注：标记语言不是编程语言。 html文件后缀名为.html或者.htm，但是一般使用前者更多。 HTML与HTML5的区别在于后者是HTML的下一代标准。 二、HTML文档 HTML5的文档类型<!DOCTYPE html> <html></html>:HTML的根元素，用来包含HTML文档.
html+css notes (ongoing 20/4/12)
weixin_45743001的博客
03-03 619
HTML+CSS 笔记 注释 <!-- 注释内容 --> 元素 <a>内容</a> 超链接 <a href="https://www.baidu.com" title="baidu">百度</a> 属性的种类 全局属性：title 局部属性: 元素的种类 空元素：没有结束标记 <meta charset="UTF-8">...
HTML和CSS基础UI设计教程与实践
DESIGN-master”表明这是一个包含多个文件的项目，且这些文件可能按照某种层次结构组织起来，例如，可能会有一个包含所有CSS样式文件的目录，一个包含所有HTML页面的目录，以及可能的图片、脚本和资源目录。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值