前端开发自学之路：html学习笔记_&lt；!doctype html&gt；&lt；html&gt；&lt；body&gt；

2401_84619606

于 2024-06-20 12:24:39 发布

阅读量373

点赞数 3

分类专栏：资料作者\/ 是vip1024c 文章标签： html 学习笔记

本文链接：https://blog.csdn.net/2401_84619606/article/details/139829123

版权

资料作者\/ 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

是vip1024c

13 篇文章 0 订阅

订阅专栏

Big Boat

----


![在这里插入图片描述](https://img-blog.csdnimg.cn/20201120111131423.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzODE5Mjc0,size_16,color_FFFFFF,t_70#pic_center)

100	200	300
400	500	600


##### 2020/11/19 列表-块-类


列表

123456

123456
123456

123456


div和span  
 **HTML 块元素**  
 大多数 HTML 元素被定义为块级元素或内联元素。  
 编者注：“块级元素”译为 block level element，“内联元素”译为 inline element。  
 块级元素在浏览器显示时，通常会以新行来开始（和结束）。  
 例子：< h1>, < p>, < ul>, < table>


**HTML 内联元素**  
 内联元素在显示时通常不会以新行开始。  
 例子：< b>, < td>, < a>, < img>


**HTML < div> 元素**  
 HTML < div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。  
 < div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。  
 如果与 CSS 一同使用，< div> 元素可用于对大的内容块设置样式属性。  
 < div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 < table> 元素进行文档布局不是表格的正确用法。< table> 元素的作用是显示表格化的数据。


**HTML < span> 元素**  
 HTML < span> 元素是内联元素，可用作文本的容器。  
 < span> 元素也没有特定的含义。  
 当与 CSS 一同使用时，< span> 元素可用于为部分文本设置样式属性。

London

hhhhhhhhhhhhhhhhhhhhhhimportant


##### 2020/11/20 布局-RWD-html框架-内联框架-背景-脚本-文件路径-头部-实体-URL-URL编码-web服务器-颜色-颜色名-文档类型


**布局：**

London
Paris
Tokyo

hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh


另一种写法：

London

hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh


![在这里插入图片描述](https://img-blog.csdnimg.cn/20201120105816418.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzODE5Mjc0,size_16,color_FFFFFF,t_70#pic_center)

	The table here


![在这里插入图片描述](https://img-blog.csdnimg.cn/2020112011174453.png#pic_center)  
 **RWD**(respond web design)——响应式web设计  
 创建响应式web的方法一个是自己设计它  
 另一个创建响应式设计的方法，是使用现成的 CSS 框架。  
 **Bootstrap** 是最流行的开发响应式 web 的 HTML, CSS, 和 JS 框架。  
 Bootstrap 帮助您开发在任何尺寸都外观出众的站点：显示器、笔记本电脑、平板电脑或手机：

W3school

hhhhhhhhhhhhhh

london

hhhhhhhhh

paris

hhhhhhhhh

tokyo

hhhhhhhhh


![在这里插入图片描述](https://img-blog.csdnimg.cn/20201120114148929.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzODE5Mjc0,size_16,color_FFFFFF,t_70#pic_center)  
 **html框架：**  
 **注意点：**


1. 假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 < frame> 标签中加入：noresize=“noresize”。
2. 为不支持框架的浏览器添加 < noframes> 标签。
3. 重要提示：不能将 < body>< /body> 标签与 < frameset>< /frameset> 标签同时使用！不过，假如你添加包含一段文本的 < noframes> 标签，就必须将这段文字嵌套于 < body>< /body> 标签内。  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20201120115205466.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzODE5Mjc0,size_16,color_FFFFFF,t_70#pic_center)  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20201120115717478.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzODE5Mjc0,size_16,color_FFFFFF,t_70#pic_center)  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20201120132716345.png#pic_center)  
 内联框架：  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20201120133431749.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzODE5Mjc0,size_16,color_FFFFFF,t_70#pic_center)  
 **背景：**


注意：  
 < body> 标签中的背景颜色（bgcolor）、背景（background）和文本（text）属性在最新的 HTML 标准（HTML4 和 XHTML）中已被废弃。W3C 在他们的推荐标准中已删除这些属性。  
 应该使用层叠样式表（CSS）来定义 HTML 元素的布局和显示属性。


**脚本：**

Sorry, your browser does not support JavaScript!


**文件路径：**  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20201120142840772.png#pic_center)  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20201120142909567.png#pic_center)  
 注意：好习惯  
 使用相对路径是个好习惯（如果可能）。  
 如果使用了相对路径，那么您的网页就不会与当前的基准 URL 进行绑定。所有链接在您的电脑上 (localhost) 或未来的公共域中均可正常工作。


**头部：**  
 以下标签都可以添加到 head 部分：< title>、< base>、< link>、< meta>、< script> 以及 < style>


1. < title>元素在所有 HTML/XHTML 文档中都是必需的。  
 title 元素能够：  
 定义浏览器工具栏中的标题  
 提供页面被添加到收藏夹时显示的标题  
 显示在搜索引擎结果中的页面标题
2. < base> 标签为页面上的所有链接规定默认地址或默认目标（target）：
3. < link> 标签定义文档与外部资源之间的关系。  
 < link> 标签最常用于连接样式表
4. < style> 标签用于为 HTML 文档定义样式信息。  
 您可以在 style 元素内规定 HTML 元素在浏览器中呈现的样式
5. 元数据（metadata）是关于数据的信息。  
 < meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。  
 典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。  
 < meta> 标签始终位于 head 元素中。  
 元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

不会显示的title

链接


![在这里插入图片描述](https://img-blog.csdnimg.cn/20201120150548606.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzODE5Mjc0,size_16,color_FFFFFF,t_70#pic_center)


**实体：**（类似于要显示保留字）  
 HTML 中有用的字符实体  
 注释：实体名称对大小写敏感！  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20201120152558756.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzODE5Mjc0,size_16,color_FFFFFF,t_70#pic_center)


**URL：**  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20201120153520348.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzODE5Mjc0,size_16,color_FFFFFF,t_70#pic_center)  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20201120153538774.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzODE5Mjc0,size_16,color_FFFFFF,t_70#pic_center)  
 **web服务器：**  
 如果希望向世界发布您的网站，那么您必须把它存放在 web 服务器上。  
 选择 ISP 时的注意事项：


1. 24 小时支持  
 确保 ISP 提供 24 小时支持。不要使自己置于无法解决严重问题的尴尬境地，同时还必须等待第二个工作日。如果您不希望支付长途电话费，那么免费电话服务也是必要的。
2. 每日备份  
 确保 ISP 会执行每日备份的例行工作，否则您有可能损失有价值的数据。
3. 流量  
 研究一下 ISP 的流量限制。如果出现由于网站受欢迎而激增的不可预期的访问量，那么您要确保不会因此支付额外费用。
4. 带宽或内容限制  
 研究一下 ISP 的带宽和内容限制。如果您计划发布图片或播出视频或音频，请确保您有此权限。
5. E-mail 功能  
 请确保 ISP 支持您需要的 e-mail 功能。
6. 数据库访问  
 如果您计划使用网站数据库中的数据，那么请确保您的 ISP 支持您需要的数据库访问。  
 在您选取一家 ISP 之前，请务必阅读 W3School 的 Web 主机教程。


**颜色：**  
 提示：仅有 16 种颜色名被 W3C 的 HTML 4.0 标准支持，它们是：aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white、yellow。


**文档类型：**  
 < !DOCTYPE> 声明  
 Web 世界中存在许多不同的文档。只有了解文档的类型，浏览器才能正确地显示文档。  
 HTML 也有多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面。这就是 < !DOCTYPE> 的用处。  
 < !DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。  
 带有 HTML5 DOCTYPE 的 HTML 文档：**< !DOCTYPE html>**


HTML测试：  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20201120165232467.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzODE5Mjc0,size_16,color_FFFFFF,t_70#pic_center)


##### 2020/11/20 XHTML-简介-元素-属性


**XHTML:**  
 什么是 XHTML？  
 XHTML 指的是可扩展超文本标记语言  
 XHTML 与 HTML 4.01 几乎是相同的  
 XHTML 是更严格更纯净的 HTML 版本  
 XHTML 是以 XML 应用的方式定义的 HTML  
 XHTML 是 2001 年 1 月发布的 W3C 推荐标准  
 XHTML 得到所有主流浏览器的支持


与 HTML 相比最重要的区别：


文档结构  
 XHTML DOCTYPE 是强制性的  
 < html> 中的 XML namespace 属性是强制性的  
 < html>、< head>、< title> 以及 < body> 也是强制性的  
 元素语法  
 XHTML 元素必须正确嵌套  
 XHTML 元素必须始终关闭  
 XHTML 元素必须小写  
 XHTML 文档必须有一个根元素  
 属性语法  
 XHTML 属性必须使用小写  
 XHTML 属性值必须用引号包围  
 XHTML 属性最小化也是禁止的


其他：  
 在 XHTML 中有哪些不同的 DTD：Strict, Transitional（最常用）, Frameset  
 id属性可替代下列元素的 name 属性： a、applet、frame、iframe、img 以及 map


##### 2020/11/22 HTML表单-表单元素-输入类型-输入属性


**表单：**  
 **表单元素：**  
 **< input> 输入类型**  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20201120171552242.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzODE5Mjc0,size_16,color_FFFFFF,t_70#pic_center)  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20201120171607585.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzODE5Mjc0,size_16,color_FFFFFF,t_70#pic_center)  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20201122102759541.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzODE5Mjc0,size_16,color_FFFFFF,t_70#pic_center)  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20201122104720223.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzODE5Mjc0,size_16,color_FFFFFF,t_70#pic_center)  
 **input属性：**  
 value 属性规定输入字段的初始值：


readonly 属性规定输入字段为只读（不能修改）：


disabled 属性规定输入字段是禁用的。  
 被禁用的元素是不可用和不可点击的。  
 被禁用的元素不会被提交。


size 属性规定输入字段的尺寸（以字符计）：


maxlength 属性规定输入字段允许的最大长度：  
 如设置 maxlength 属性，则输入控件不会接受超过所允许数的字符。  
 该属性不会提供任何反馈。如果需要提醒用户，则必须编写 JavaScript 代码。  


### 最后

本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于**前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等**


![](https://img-blog.csdnimg.cn/img_convert/25e44388906b420a7ca36ad9656fe43d.webp?x-oss-process=image/format,png)

**前端视频资料：**
eadonly>

disabled 属性规定输入字段是禁用的。
被禁用的元素是不可用和不可点击的。
被禁用的元素不会被提交。

<input type="text" name="firstname" value="John" disabled>

size 属性规定输入字段的尺寸（以字符计）：

<input type="text" name="firstname" value="John" size="40">

maxlength 属性规定输入字段允许的最大长度：
如设置 maxlength 属性，则输入控件不会接受超过所允许数的字符。
该属性不会提供任何反馈。如果需要提醒用户，则必须编写 JavaScript 代码。

最后

本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等

[外链图片转存中…(img-R54uhvD4-1718857466672)]

前端视频资料：

2401_84619606

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
前端开发自学之路：html学习笔记_&lt；!doctype html&gt；&lt；html&gt；&lt；body&gt；

本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等[外链图片转存中…(img-R54uhvD4-1718857466672)]boat.gif。
复制链接

扫一扫