前端开发自学之路：html学习笔记

最新推荐文章于 2024-04-26 16:47:03 发布

Vivian小姐

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量743

点赞数

分类专栏： HTML 文章标签： javascript css html html5

本文链接：https://blog.csdn.net/qq_43819274/article/details/108838991

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前端开发自学之路：html学习

文章目录

- 前端开发自学之路：html学习

教程：https://www.w3school.com.cn/html/html_jianjie.asp
HTML4.01速查手册：https://www.w3school.com.cn/html/html_quick.asp

2020/11/04 简介-编辑器-基础-元素-属性-标题-段落

重点知识点：

< br/>表示换行
html标签最好用小写、属性最好用小写、属性值一般用""，但如果包含"可以用单引号
html标签列表：https://www.w3school.com.cn/tags/index.asp
html标准属性：https://www.w3school.com.cn/tags/html_ref_standardattributes.asp
默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。
当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

2020/11/5 样式-格式化

在这里插入图片描述

2020/11/10 引用-计算机代码-注释

注意：

< code>元素不保留多余的空格和折行，如需解决该问题，您必须在 < pre> 元素中包围代码

2020/11/11 CSS-链接-图像-表格

注意：
1.< img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。
2.假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。
3.图片的映射（w3school）
在这里插入图片描述

外部样式表：
< head>
< link rel=“stylesheet” type=“text/css” href=“mystyle.css”>
< /head>
内联样式：在标签里指定个别样式
内部样式表：
在这里插入图片描述

<!DOCTYPE HTML>
<html>
<body background="/i/eg_background.jpg">

<!--静图和动图-->
<p><img src="/i/eg_mouse.jpg" width="100" height="100"/></p>
<p><img src="/i/ct_netscape.jpg"/></p>
<p><img src="http://www.w3school.com.cn/i/w3school_logo_white.gif"/></p>
<p><img src="/i/eg_cute.gif" width="100" height="100"/></p>

<!--替换文本属性alt-->
<p><img src="boat.gif" alt="Big Boat"/></p>

<!--图片的对齐方式-->
<p>--<img src="/i/eg_cute.gif" align="bottom"/>--</p>
<p>--<img src="/i/eg_cute.gif" align="middle"/>--</p>
<p>--<img src="/i/eg_cute.gif" align="top"/>--</p>
<p>--<img src="/i/eg_cute.gif" align="right"/></p>
<p><img src="/i/eg_cute.gif" align="left"/>--</p>
</body>
</html>

在这里插入图片描述

<!--表格基本格式-->
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

2020/11/19 列表-块-类

列表

<html>
<body>

<!--无序列表-->
<!--type:disc\circle\square-->
<ul type="disc">
	<li>123456</li>
</ul>

<!--有序列表-->
<!--type:A(大写字母顺序)、a（小写字母）、I（罗马字母顺序）、i（小写罗马字母）-->
<ol start="50" type="">
	<li>123456</li>
	<li>123456</li>
</ol>

<!--自定义列表-->
<!--dt列表项、dd列表描述-->
<dl>
	<dt>123456</dt>
	<dd>123456</dd>
</dl>

</body>
</html>

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> 元素可用于为部分文本设置样式属性。

<html>
<head>
<style>
.cities{
	background-color:black;
    color:white;
    margin:20px;
    padding:20px;
}
span.red{
	color:red;
}
</style>
</head>

<body>
<div class="cities">
<h3>London</h3>
<p>hhhhhhhhhhhhhhhhhhhhhh<span class="red">important</span></p>
</div>
</body>
</html>

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

布局：

<html>
<head>
<style>
#header{
	background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
#nav{
	line-height:30px;
    background-color:#eeeeee;
    height:30px;
    width:100px;
    float:left;
    padding:5px;
}
#section{
	width:350px;
    height:90px;
    float:left;
    padding:10px;
}
#footer{
	background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px;
}
</style>
</head>

<body>
<div id="header">
<h1>London</h1>
</div>

<div id="nav">
London<br>
Paris<br>
Tokyo<br>
</div>

<div id="section">
<p>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</p>
</div>

<div id="footer">
Copyright?
</div>
</body>
</html>

另一种写法：

<html>
<head>
<style>
header{
	background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
nav{
	line-height:30px;
    background-color:#eeeeee;
    height:30px;
    width:100px;
    float:left;
    padding:5px;
}
section{
	width:350px;
    height:90px;
    float:left;
    padding:10px;
}
footer{
	background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px;
}
</style>
</head>

<body>
<header>
<h1>London</h1>
</header>

<nav>
London<br>
Paris<br>
Tokyo<br>
</nav>

<section>
<p>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</p>
</section>

<footer>
Copyright?
</footer>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<style>
table.lamp{
	width:100%;
    border:1px solid #d4d4d4;
}
table.lamp th, td{
	padding:10px;
}
table.lamp th{
	width:40px;
}
</style>
</head>

<body>
<table class="lamp">
<tr>
	<th>
    	<img src="/images/lamp.jpg" alt="Note" style="height:32px;width:32px">
    </th>
    <td>
    	The table here
    </td>
</tr>
</table>
</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewpoint" content="width=device-width,inital-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>

<body>
<div class="container">
<div class="jumpotron">
	<h1>W3school</h1>
    <p>hhhhhhhhhhhhhh</p>
</div>
<div>

<div class="container">
<div class="row">
	<div class="col-md-4">
    <h2>london</h2>
    <p>hhhhhhhhh</p>
    </div>
    <div class="col-md-4">
    <h2>paris</h2>
    <p>hhhhhhhhh</p>
    </div>
    <div class="col-md-4">
    <h2>tokyo</h2>
    <p>hhhhhhhhh</p>
    </div>
</div>
</div>
</body>
</html>

在这里插入图片描述
html框架：
注意点：

假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 < frame> 标签中加入：noresize=“noresize”。
为不支持框架的浏览器添加 < noframes> 标签。
重要提示：不能将 < body>< /body> 标签与 < frameset>< /frameset> 标签同时使用！不过，假如你添加包含一段文本的 < noframes> 标签，就必须将这段文字嵌套于 < body>< /body> 标签内。

内联框架：

背景：

<!--设置颜色，三种方式-->
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
<!--可以设置为图片（相对路径和绝对路径）-->
<body background="clouds.gif">
<body background="http://www.w3school.com.cn/clouds.gif">

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

脚本：

<html>
<body>

<!--脚本-->
<script type="text/javascript">
<!--放在注释内可以防止老浏览器无法解析直接显示的情况-->

<!--
document.write("Hello World!")
//-->

</script>

<!--只有在浏览器不支持脚本或者禁用脚本时，才会显示 noscript 元素中的内容：-->
<noscript>Sorry, your browser does not support JavaScript!</noscript>
 
</body>
</html>

文件路径：
在这里插入图片描述

注意：好习惯
使用相对路径是个好习惯（如果可能）。
如果使用了相对路径，那么您的网页就不会与当前的基准 URL 进行绑定。所有链接在您的电脑上 (localhost) 或未来的公共域中均可正常工作。

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

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

<!DOCTYPE html>
<html>
<!--头部head-->
<head>
<!--meta相当于字典，可以用来做索引-->
<meta name="author" content="by vivian"/>

<!--http-equiv的用法可查-->
<meta http-equiv="Content-Type" content="text/html";charset=gb2312/>
<meta http-equiv="Content-Language" content="zh-cn"/>

<!--标题title-->
<title>不会显示的title</title>
<!--base为页面上的所有链接规定默认地址或默认目标（target）-->
<base target="_blank"/>


</head>

<body>
<p><a href="http://www.w3school.com.cn" target="_blank">链接</a></p>
<!--不用指定target也会新开一页-->
<p><a href="http://www.w3school.com.cn" >链接</a></p>
</body>
</html>

在这里插入图片描述

实体：（类似于要显示保留字）
HTML 中有用的字符实体
注释：实体名称对大小写敏感！
在这里插入图片描述

URL：
在这里插入图片描述

web服务器：
如果希望向世界发布您的网站，那么您必须把它存放在 web 服务器上。
选择 ISP 时的注意事项：

24 小时支持
确保 ISP 提供 24 小时支持。不要使自己置于无法解决严重问题的尴尬境地，同时还必须等待第二个工作日。如果您不希望支付长途电话费，那么免费电话服务也是必要的。
每日备份
确保 ISP 会执行每日备份的例行工作，否则您有可能损失有价值的数据。
流量
研究一下 ISP 的流量限制。如果出现由于网站受欢迎而激增的不可预期的访问量，那么您要确保不会因此支付额外费用。
带宽或内容限制
研究一下 ISP 的带宽和内容限制。如果您计划发布图片或播出视频或音频，请确保您有此权限。
E-mail 功能
请确保 ISP 支持您需要的 e-mail 功能。
数据库访问
如果您计划使用网站数据库中的数据，那么请确保您的 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测试：
在这里插入图片描述

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> 输入类型
在这里插入图片描述

input属性：
value 属性规定输入字段的初始值：

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

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

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

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

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

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

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

maxlength 属性规定输入字段允许的最大长度：
如设置 maxlength 属性，则输入控件不会接受超过所允许数的字符。
该属性不会提供任何反馈。如果需要提醒用户，则必须编写 JavaScript 代码。
注释：输入限制并非万无一失。JavaScript 提供了很多方法来增加非法输入。如需安全地限制输入，则接受者（服务器）必须同时对限制进行检查。

<input type="text" name="firstname" maxlength="10">

在这里插入图片描述

< select>下拉列表：
在这里插入图片描述
< textarea> 文本框

< button> 可点击按钮

HTML5 表单元素
HTML5 增加了如下表单元素：
< datalist>
< keygen>
< output>
注释：默认地，浏览器不会显示未知元素。新元素不会破坏您的页面。

< datalist> 是< input>的预定义选项列表
在这里插入图片描述

2020/11/25 HTML5-简介-支持-元素-语义-迁移-代码约定

什么是 HTML5？
HTML5 是最新的 HTML 标准。
HTML5 是专门为承载丰富的 web 内容而设计的，并且无需额外插件。
HTML5 拥有新的语义、图形以及多媒体元素。
HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建。
HTML5 是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
Content of the document......
</body>
</html>

HTML5 - 新特性
HTML5 的一些最有趣的新特性：
新的语义元素，比如 < header>, < footer>, < article>, and < section>。
新的表单控件，比如数字、日期、时间、日历和滑块。
强大的图像支持（借由 < canvas> 和 < svg>）
强大的多媒体支持（借由 < video> 和 < audio>）
强大的新 API，比如用本地存储取代 cookie。

HTML5 - 被删元素
以下 HTML 4.01 元素已从 HTML5 中删除：
< acronym>< applet>< basefont>< big>< center>< dir>< font>< frame>< frameset>< noframes>< strike>< tt>

HTML5 语义元素
什么是语义元素？
语义元素清楚地向浏览器和开发者描述其意义。
非语义元素的例子：< div> 和 < span> - 无法提供关于其内容的信息。
语义元素的例子：< form>、< table> 以及 < img> - 清晰地定义其内容。

HTML5 中新的语义元素
许多网站包含了指示导航、页眉以及页脚的 HTML 代码，例如这些：< div id=“nav”> < div class=“header”> < div id=“footer”>。
HTML5 提供了定义页面不同部分的新语义元素：
< article>
< aside>
< details>
< figcaption>
< figure>
< footer>
< header>
< main>
< mark>
< nav>
< section>
< summary>
< time>
在这里插入图片描述

<!DOCTYPE html>
<html>
<body>

<!--定义文档中的节-->
<section>
<h1>WWF</h1>
<p>hhh</p>
</section>

<!--定义独立的自包含的内容（论坛、博客、新闻）-->
<article>
	<!--文档或节的规定页眉、介绍性内容-->
	<header>
    <h1>header</h1>
    <p>introduction</p>
    </header>
    
	<h1>title</h1>
	<p>hhh</p>
    
    <!--文档或节的规定页脚、信息-->
    <footer>
    <p>footer</p>
    </footer>
</article>

<!--大型链接块-->
<nav>
<a href="/html/">html</a>
<a href="/css/">css</a>
</nav>

<!--主内容之外的某些内容（比如侧栏）-->
<aside>
<h4>title</h4>
<p>hhhh</p>
</aside>

<!--图片标题组合-->
<figure>
<img src="pic_mountain.jpg" alt="the pulpit rock" width="304" height="228">
<figcaption>Fig1. -The Pulpit Rock</figcaption>
</figure>

</body>
</html>

Vivian小姐

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
前端开发自学之路：html学习笔记

前端开发自学之路：day1一个小示例：<html> <body> <h1>hello world</h1> <p>你好啊，祝华晨宇出道7周年快乐！！！</p> </body></html>
复制链接

扫一扫