1. 首页
  2. 文章中心
  3. web前端

WEB前端学习笔记-HTML(下)

106 阅读 0 评论
我是靠谱客的博主 寂寞柚子，这篇文章主要介绍WEB前端学习笔记-HTML(下)，现在分享给大家，希望可以做个参考。

HTML 类

对 HTML 进行分类（设置类），使我们能够为元素的类定义 CSS 样式。

为相同的类设置相同的样式，或者为不同的类设置不同的样式。

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
background-color:black;
color:white;
margin:20px;
padding:20px;
}
</style>
</head>
<body>
<div class="cities">
<h2>London</h2>
<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>
</div>
</body>
</html>

上面这段代码中使用了一个内联的样式表（style）其中,它定义了类别：.cities的样式。
分类块级元素

HTML <div>元素是块级元素。它能够用作其他 HTML 元素的容器。

设置 <div>元素的类，使我们能够为相同的 <div>元素设置相同的样式。

分类行内元素

HTML<span>元素是行内元素，能够用作文本的容器。

设置 <span>元素的类，能够为相同的 <span>元素设置相同的样式。

复制代码
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
<style>
span.red {color:red;}
</style>
</head>
<body>
<h1>My <span class="red">Important</span> Heading</h1>
</body>
</html>

HTML 布局

网站常常以多列显示内容（就像杂志和报纸）。
使用 <div> 元素的 HTML 布局

注释：<div>元素常用作布局工具，因为能够轻松地通过 CSS 对其进行定位。

这个例子使用了四个 <div> 元素来创建多列布局：

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<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:

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<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>

使用 HTML5 的网站布局

HTML5 提供的新语义元素定义了网页的不同部分：
这里写图片描述

这个例子使用<header>, <nav>, <section>, 以及 <footer> 来创建多列布局：

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<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:

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<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;
}

使用表格的 HTML 布局
注释：<table>元素不是作为布局工具而设计的。

<table> 元素的作用是显示表格化的数据。

使用 <table>元素能够取得布局效果，因为能够通过 CSS 设置表格元素的样式：

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
<body>
<table class="lamp">
<tr>
<th>
<img src="/images/lamp.jpg" alt="Note" style="height:32px;width:32px">
</th>
<td>
The table element was not designed to be a layout tool.
</td>
</tr>
</table>
</body>

CSS:

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
<style>
table.lamp {
width:100%;
border:1px solid #d4d4d4;
}
table.lamp th, td {
padding:10px;
}
table.lamp td {
width:40px;
}
</style>

HTML 响应式 Web 设计
什么是响应式 Web 设计？
•RWD 指的是响应式 Web 设计（Responsive Web Design）
•RWD 能够以可变尺寸传递网页
•RWD 对于平板和移动设备是必需的

创建您自己的响应式设计
创建响应式设计的一个方法，是自己来创建它：

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!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>

使用 Bootstrap

另一个创建响应式设计的方法，是使用现成的 CSS 框架。

Bootstrap 是最流行的开发响应式 web 的 HTML, CSS, 和 JS 框架。

Bootstrap 帮助您开发在任何尺寸都外观出众的站点：显示器、笔记本电脑、平板电脑或手机：

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!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>

HTML 脚本

HTML script 元素

<script>标签用于定义客户端脚本，比如 JavaScript。

script 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。

必需的 type 属性规定脚本的 MIME 类型。

JavaScript 最常用于图片操作、表单验证以及内容动态更新。

下面的脚本会向浏览器输出“Hello World!”：

复制代码
1
2
3
4
<script type="text/javascript">
document.write("Hello World!")
</script>

HTML 头部元素

HTML<head>元素

<head>元素是所有头部元素的容器。<head>内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。

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

HTML<title>元素

<title> 标签定义文档的标题。

title 元素在所有 HTML/XHTML 文档中都是必需的。

title 元素能够：
•定义浏览器工具栏中的标题
•提供页面被添加到收藏夹时显示的标题
•显示在搜索引擎结果中的页面标题

一个简化的 HTML 文档：

复制代码
1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>

HTML<base> 元素

<base> 标签为页面上的所有链接规定默认地址或默认目标（target）：

复制代码
1
2
3
4
<head>
<base href="http://www.w3school.com.cn/images/" />
<base target="_blank" />
</head>

<link> 标签定义文档与外部资源之间的关系。

<link>标签最常用于连接样式表：

复制代码
1
2
3
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

HTML <style>元素

<style>标签用于为 HTML 文档定义样式信息。

您可以在 style 元素内规定 HTML 元素在浏览器中呈现的样式：

复制代码
1
2
3
4
5
6
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

HTML <meta> 元素

元数据（metadata）是关于数据的信息。

<meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。

典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。

<meta>标签始终位于 head 元素中。

元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

针对搜索引擎的关键词

一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。

下面的 meta 元素定义页面的描述：

复制代码
1
<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />

下面的 meta 元素定义页面的关键词：

复制代码
1
<meta name="keywords" content="HTML, CSS, XML" />

name 和 content 属性的作用是描述页面的内容。

HTML <script>元素

<script> 标签用于定义客户端脚本，比如 JavaScript。

我们会在稍后的章节讲解 script 元素。

这里写图片描述

此外，还有其他一些html的知识点，都可以访问http://www.w3school.com.cn/html/html_entities.asp得到解决。
这三篇关于html的知识都是从上述网站复制粘贴过来的，主要是为了能够在短时间之内加深学习，为了后来的javascript学习做一些铺垫。好，html的知识暂时整理到这里。

最后

以上就是寂寞柚子最近收集整理的关于WEB前端学习笔记-HTML(下)的全部内容，更多相关WEB前端学习笔记-HTML(下)内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
点赞(70)

相关文章

JavaWeb 实训项目报错记录：重定向后页面样式失效
JavaWeb 实训项目报错记录：重定向后页面样式失效
java ajax无权限跳转_ajax请求重定向后页面不跳转问题 (使用拦截器)
java ajax无权限跳转_ajax请求重定向后页面不跳转问题 (使用拦截器)
# Java后端实现页面跳转Java后端实现页面跳转
# Java后端实现页面跳转Java后端实现页面跳转
python派森编程_用python进行编程
python派森编程_用python进行编程
WEB前端学习笔记-HTML(下)
WEB前端学习笔记-HTML(下)
派森个人学习笔记------2020.08.28
派森个人学习笔记------2020.08.28
web前端--10个妨碍进步的学习方式1.前言2.具体情况3.小结
web前端--10个妨碍进步的学习方式1.前言2.具体情况3.小结
每天学习30分钟新知识之html教程1属性块div将 HTML 元素组合起来。响应式 Web 设计
每天学习30分钟新知识之html教程1属性块div将 HTML 元素组合起来。响应式 Web 设计

评论列表共有 0 条评论

立即
投稿
返回
顶部