前端学习笔记（四）HTML入门扩充

最新推荐文章于 2024-09-11 10:49:17 发布

handsomeDXhero

最新推荐文章于 2024-09-11 10:49:17 发布

阅读量203

点赞数 1

分类专栏：前端学习文章标签： html html5 css javascript

本文链接：https://blog.csdn.net/weixin_41972947/article/details/107232576

版权

前端学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

之前在学习HTML的时候，按照Web 前端怎样入门？中汪小黑的回答中所给的学习路线图，照着W3school的HTML基础教程，只学习到了HTML列表部分。在学习CSS的过程中，逐渐发现有一些HTML内容（块、类等等）并不熟悉。现在在开始着手做练手小项目静态网页之前，我想再把HTML的基础补习一下，把HTML基础教程全部看完，并且尽量手敲一下。

1.HTML块元素
<div>是块级元素（block level element），用来组合其他HTML元素。
<span>是内联元素（ inline element），用来作文本的容器。
这两者主要目的都是为了方便CSS设置样式。Div还可以用于文本布局。（以前用表格进行文本布局是不好的！）

2.HTML类：
对HTML元素（通常是div等）设置Class属性可以方便CSS来设置样式。例：

<div class="cities">

3.HTML布局：
Div元素常用作布局工具，方便通过CSS对其进行定位。
例：使用四个<div>来创建多列布局：（中间用到了之前所讲的CSS中的float，并且在页脚进行clear的手法）
HTML：

<body>

<div id="header">
<h1>City Gallery</h1>
</div>

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

<div id="section">
<h1>London</h1>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</div>

<div id="footer">
Copyright W3School.com.cn
</div>

</body>

CSS：

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

如果使用HTML提供的新语义元素定义网页布局：
header 定义文档或节的页眉
nav 定义导航链接的容器
section 定义文档中的节
article 定义独立的自包含文章
aside 定义内容之外的内容（比如侧栏）
footer 定义文档或节的页脚
details 定义额外的细节
summary 定义 details 元素的标题
HTML：

<body>

<header>
<h1>City Gallery</h1>
</header>

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

<section>
<h1>London</h1>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</section>

<footer>
Copyright W3School.com.cn
</footer>

</body>

CSS：

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

用<table>元素也可以进行布局，但是这样不好。就不贴代码了。

4.响应式web框架：即可以以可变尺寸传递网页的web设计。可以主要使用float来实现这个目的。例：

<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
.city {
float: left;
margin: 5px;
padding: 15px;
width: 300px;
height: 300px;
border: 1px solid black;
} 
</style>
</head>

<body>

<h1>W3School Demo</h1>
<h2>Resize this responsive page!</h2>
<br>

<div class="city">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>

<div class="city">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>

<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,and the most populous metropolitan area in the world.
</p>
</div>
</body>
</html>

还有一个方法，是使用现成的CSS框架。
CSS框架，说白了就是别人写好的CSS文件，里面对不同的class进行了格式定义。然后直接引用其中的class，就可以实现一些格式属性，不需要自己来写完整的CSS文件。例，以下的HTML文件引用了bootstrap框架，因此不需要自己写CSS文件或者其他样式，就可以让文本带有特别的样式属性，并且在不同尺寸的设备上都能合适地显示网页内容：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-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="jumbotron">
  <h1>W3School Demo</h1> 
  <p>Resize this responsive page!</p> 
</div>
</div>

<div class="container">
<div class="row">
  <div class="col-md-4">
    <h2>London</h2>
    <p>London is the capital city of England.</p>
    <p>It is the most populous city in the United Kingdom,
    with a metropolitan area of over 13 million inhabitants.</p>
  </div>
  <div class="col-md-4">
    <h2>Paris</h2>
    <p>Paris is the capital and most populous city of France.</p>
  </div>
  <div class="col-md-4">
    <h2>Tokyo</h2>
    <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
    and the most populous metropolitan area in the world.</p>
  </div>
</div>
</div>

</body>
</html>

5.HTML框架
通过使用frameset，可以将窗口分成几行或几列，分别显示来自不同的html文件。在下面的这个例子中，我们设置了一个两列的框架集。第一列被设置为占据浏览器窗口的 25%。第二列被设置为占据浏览器窗口的 75%。HTML 文档 “frame_a.htm” 被置于第一个列中，而 HTML 文档 “frame_b.htm” 被置于第二个列中：

<frameset cols="25%,75%">
   <frame src="frame_a.htm">
   <frame src="frame_b.htm">
</frameset>

注：这种情况下，两列内容的滚动条是分开的。

重要提示：不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用！不过，假如你添加包含一段文本的 <noframes> 标签，就必须将这段文字嵌套于 <body></body> 标签内。例：

<html>

<frameset cols="25%,50%,25%">
  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">

<noframes>
<body>您的浏览器无法处理框架！</body>
</noframes>

</frameset>

</html>

其他tips：
1）行和列框架可以混合嵌套使用。
2）noresize=“noresize”：使得框架不可调整尺寸。
3）导航框架（感觉比较常用）：导航框架包含一个将第二个框架作为目标的链接列表。名为 “contents.htm” 的文件包含三个链接。

<html>

<frameset cols="120,*">

  <frame src="/example/html/html_contents.html">
  <frame src="/example/html/frame_a.html" name="showframe">

</frameset>

</html>

4）框架内初始显示指定节：本例演示两个框架。其中的一个框架设置了指向另一个文件内指定的节的链接。这个"link.htm"文件内指定的节使用

 <a name="C10"> 进行标识。
<html>

<frameset cols="20%,80%">

 <frame src="/example/html/frame_a.html">
 <frame src="/example/html/link.html#C10">

</frameset>

</html>

5）使用导航框架跳转至指定的节：本例演示两个框架。左侧的导航框架包含了一个链接列表，这些链接将第二个框架作为目标。第二个框架显示被链接的文档。导航框架其中的链接指向目标文件中指定的节。

<html>

<frameset cols="180,*">

<frame src="/example/html/content.html">
<frame src="/example/html/link.html" name="showframe">

</frameset>

</html>

6.内联框架iframe：用于在网页内显示网页。（套娃）

在这里插入图片描述
可以用width和height为inframe设置尺寸，用frameborder设置边框。
Iframe还可以用作链接的目标（target，即点击链接后打开网页显示的位置，如新标签页等）例：

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>

7.HTML脚本：<script>标签用于定义客户端脚本，比如JavaScript。
Script元素既可以包含脚本语句，也可以通过src属性指向外部脚本。
<noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。
如何应付老式的浏览器
如果浏览器压根没法识别 <script> 标签，那么 <script> 标签所包含的内容将以文本方式显示在页面上。为了避免这种情况发生，你应该将脚本隐藏在注释标签当中。那些老的浏览器（无法识别 <script> 标签的浏览器）将忽略这些注释，所以不会将标签的内容显示到页面上。而那些新的浏览器将读懂这些脚本并执行它们，即使代码被嵌套在注释标签内。例（JavaScript）：

<script type="text/javascript">
<!--
document.write("Hello World!")
//-->
</script>

8.HTML文件路径：
文件路径会在链接外部文件时被用到，包括网页、图像、样式表、JavaScript。
相对路径（使用相对路径是个好习惯！）：
<img src="picture.jpg"> picture.jpg 位于与当前网页相同的文件夹
<img src="images/picture.jpg"> picture.jpg 位于当前文件夹的 images 文件夹中
<img src="/images/picture.jpg"> picture.jpg 当前站点根目录（最上级目录）的 images 文件夹中
<img src="../picture.jpg"> picture.jpg 位于当前文件夹的上一级文件夹中
绝对文件路径：
绝对文件路径是指向一个因特网文件的完整URL，例：
<img src="https://www.w3school.com.cn/images/picture.jpg" alt="flower">

9.HTML头部元素
<head>元素是所有头部元素的容器。以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script>以及 <style>。
（1）HTML <title> 元素
<title> 标签定义文档的标题。
title 元素在所有 HTML/XHTML 文档中都是必需的。
title 元素能够：
定义浏览器工具栏中的标题
提供页面被添加到收藏夹时显示的标题
显示在搜索引擎结果中的页面标题
（2）HTML <link> 元素
<link> 标签定义文档与外部资源之间的关系。
<link> 标签最常用于连接样式表：

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

（3）HTML <style> 元素
<style> 标签用于为 HTML 文档定义样式信息。
您可以在 style 元素内规定 HTML 元素在浏览器中呈现的样式：

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

（4）HTML <meta> 元素
元数据（metadata）是关于数据的信息。
<meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。
典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
<meta> 标签始终位于 head 元素中。
元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。
针对搜索引擎的关键词
一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。
下面的 meta 元素定义页面的描述：
<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />
下面的 meta 元素定义页面的关键词：
<meta name="keywords" content="HTML, CSS, XML" />
name 和 content 属性的作用是描述页面的内容。
（5）HTML <script> 元素
<script> 标签用于定义客户端脚本，比如 JavaScript。

10.HTML字符实体
HTML中某些字符是预留的，比如大于号>，小于号<等。
例：小于号写作<或<
最常用的是不间断空格 ，因为浏览器会自动把HTML中的空格缩减为一个。所以如果想使用空格，就需要用这个。
字符实体很多，实际使用时需要参考参考手册。写实体名会更方便记忆一些，但可能有的浏览器不支持实体名，而数字是支持性更好的。

11.HTML URL（uniform resource locator统一资源定位符）
网址，比如 http://www.w3school.com.cn/html/index.asp，遵守以下的语法规则：
scheme://host.domain:port/path/filename
解释：
scheme - 定义因特网服务的类型。最常见的类型是 http
host - 定义域主机（http 的默认主机是 www）
domain - 定义因特网域名，比如 w3school.com.cn
:port - 定义主机上的端口号（http 的默认端口号是 80）
path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename - 定义文档/资源的名称
注：scheme也有多种，具体使用的时候再好好了解吧~

URL字符编码：URL只能使用ASCII字符集来通过因特网进行发送。因此其他字符（包括中文等）会被替换为%加两位16进制数字。URL不能包含空格，一般用+代替。具体URL编码参考要参考URL编码参考手册。

12.HTML web server
发布自己的网页，需要把它存放在web服务器上。具体可参考web主机教程。

13.HTML颜色
颜色由红绿蓝混合而成，三个两位的16进制数字。例如#000000是黑色，#FF0000是红色。
大多数浏览器也支持颜色名（brackets的自动补全功能会显示，非常方便）。颜色名有很多，但是仅有16种颜色被W3C的HTML4.0标准支持。
最初，有216种跨平台web安全色。但是不知道现在这么做的意义还大不大。

14.DOCTYPE声明（文档类型）
Web中文档的类型非常多，在html文件的开头进行声明，浏览器才能正确地显示文档。
例：< !DOCTYPE >，它不是HTML标签，它只是为浏览器提供一项声明。

附上来自W3School的HTML4.01速查手册
https://www.w3school.com.cn/html/html_quick.asp