复习html的第二章

news2024/11/20 1:44:11

什么是 HTML?

HTML 是用来描述网页的一种语言。

  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
  • HTML 不是一种编程语言,而是一种标记语言 (markup language)
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

  • HTML 标签是由尖括号包围的关键词,比如 <html>
  • HTML 标签通常是成对出现的,比如 <b> 和 </b>
  • 标签对中的第一个标签是开始标签,第二个标签是结束标签
  • 开始和结束标签也被称为开放标签闭合标签

HTML 文档 = 网页

  • HTML 文档描述网页
  • HTML 文档包含 HTML 标签和纯文本
  • HTML 文档也被称为网页

Web 浏览器的作用是读取 HTML 文档,并以网页的形式显示出它们。浏览器不会显示 HTML 标签,而是使用标签来解释页面的内容:

1.HTML JavaScript

JavaScript 使 HTML 页面更具动态性和交互性

HTML <script> 标签

HTML <script> 标签用于定义客户端脚本(JavaScript)。

<script> 元素即可包含脚本语句,也可通过 src 属性指向外部脚本文件。

JavaScript 的常见用途是图像处理、表单验证和内容的动态更改。

如需选取 HTML 元素,JavaScript 最常用 document.getElementById() 方法。

这个 JavaScript 示例向 id="demo" 的 HTML 元素内写入 "Hello JavaScript!":

<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>

以下是展示 JavaScript 能力的一些例子:

JavaScript 能够更改内容:

document.getElementById("demo").innerHTML = "Hello JavaScript!";

JavaScript 能够更改样式:

document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";

JavaScript 能够更改属性:

document.getElementById("image").src = "picture.gif";

HTML <noscript> 标签

HTML <noscript> 标签定义了替代内容,这些内容将显示给在浏览器中禁用了脚本或浏览器不支持脚本的用户:

<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
<noscript>抱歉,您的浏览器不支持 JavaScript!</noscript>

HTML Script 标签 

 2.HTML 文件路径

 

HTML 文件路径

文件路径描述了网站文件夹结构中某个文件的位置。

文件路径会在链接外部文件时被用到:

  • 网页
  • 图像
  • 样式表
  • JavaScript

绝对文件路径 

绝对文件路径是指向一个因特网文件的完整 URL:

<img src="https://www.baidu.com/images/picture.jpg" alt="flower">

 相对路径

相对路径指向了相对于当前页面的文件。

在本例中,文件路径指向了位于当前网站根目录中 images 文件夹里的一个文件:

<img src="/images/picture.jpg" alt="flower">

 3.HTML 头部元素

HTML <head> 元素

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

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

HTML <title> 元素

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

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

title 元素能够:

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

一个简化的 HTML 文档:

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document......
</body>

</html>

 HTML <base> 元素

<base> 标签为页面上的所有链接规定默认地址或默认目标(target):

<head>
<base href="http://www.baidu.com.cn/images/" />
<base target="_blank" />
</head>

 HTML <link> 元素

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

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

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

 HTML <style> 元素

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

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

<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 元素定义页面的描述:

<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />

HTML 头部元素

 4.HTML 布局

使用 <div> 元素的 HTML 布局

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

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

<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>

 使用 HTML5 的网站布局

HTML5 提供的新语义元素定义了网页的不同部分:

HTML5 语义元素

使用表格的 HTML 布局

注释:<table> 元素不是作为布局工具而设计的。

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

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

    <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

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

5.HTML 响应式 Web 设计

什么是响应式 Web 设计?

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

 创建您自己的响应式设计

创建响应式设计的一个方法,是自己来创建它:

<!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 帮助您开发在任何尺寸都外观出众的站点:显示器、笔记本电脑、平板电脑或手机:

<!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>

6.HTML 框架

 通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。

框架

通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架,并且每个框架都独立于其他的框架。

使用框架的坏处:

  • 开发人员必须同时跟踪更多的HTML文档
  • 很难打印整张页面

框架结构标签(<frameset>)

  • 框架结构标签(<frameset>)定义如何将窗口分割为框架
  • 每个 frameset 定义了一系列行
  • rows/columns 的值规定了每行或每列占据屏幕的面积

 框架标签(Frame)

Frame 标签定义了放置在每个框架中的 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>

 基本的注意事项 - 有用的提示:

假如一个框架有可见边框,用户可以拖动边框来改变它的大小。为了避免这种情况发生,可以在 <frame> 标签中加入:noresize="noresize"。

为不支持框架的浏览器添加 <noframes> 标签。

重要提示:不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用!不过,假如你添加包含一段文本的 <noframes> 标签,就必须将这段文字嵌套于 <body></body> 标签内。(在下面的第一个实例中,可以查看它是如何实现的。)

 7.HTML 类

对 HTML 进行分类(设置类),使我们能够为元素的类定义 CSS 样式。

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

<!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>

分类块级元素

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

设置 <div> 元素的类,使我们能够为相同的 <div> 元素设置相同的类:

<!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>

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

<div class="cities">
<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>

分类行内元素

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

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

<!DOCTYPE html>
<html>
<head>
<style>
  span.red {color:red;}
</style>
</head>
<body>

<h1>My <span class="red">Important</span> Heading</h1>

</body>
</html>

8.HTML id 属性

HTML id 属性用于 为HTML 元素指定唯一的 id。

一个 HTML文档中不能存在多个有相同 id 的元素。

使用 id 属性

id 属性指定 HTML 元素的唯一 ID。 id 属性的值在 HTML 文档中必须是唯一的。

id 属性用于指向样式表中的特定样式声明。JavaScript 也可使用它来访问和操作拥有特定 ID 的元素。

id 的语法是:写一个井号 (#),后跟一个 id 名称。然后,在花括号 {} 中定义 CSS 属性。

下面的例子中我们有一个 <h1> 元素,它指向 id 名称 "myHeader"。这个 <h1> 元素将根据 head 部分中的 #myHeader 样式定义进行样式设置:

<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
</style>
</head>
<body>

<h1 id="myHeader">My Header</h1>

</body>

注释:id 名称对大小写敏感!

注释:id 必须包含至少一个字符,且不能包含空白字符(空格、制表符等)。

Class 与 ID 的差异

同一个类名可以由多个 HTML 元素使用,而一个 id 名称只能由页面中的一个 HTML 元素使用:

<style>
/* 设置 id 为 "myHeader" 的元素的样式 */
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}

/* 设置类名为 "city" 的所有元素的样式 */
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>

<!-- 拥有唯一 id 的元素 -->
<h1 id="myHeader">My Cities</h1>

<!-- 拥有相同类名的多个元素 -->
<h2 class="city">London</h2>
<p>London is the capital of England.</p>

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

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

通过 ID 和链接实现 HTML 书签

HTML 书签用于让读者跳转至网页的特定部分。

如果页面很长,那么书签可能很有用。

要使用书签,您必须首先创建它,然后为它添加链接。

然后,当单击链接时,页面将滚动到带有书签的位置。

首先,用 id 属性创建书签:

<h2 id="C4">第四章</h2>

然后,在同一张页面中,向这个书签添加一个链接(“跳转到第四章”):

<a href="#C4">跳转到第四章</a>

在 JavaScript 中使用 id 属性

JavaScript 也可以使用 id 属性为特定元素执行某些任务。

JavaScript 可以使用 getElementById() 方法访问拥有特定 id 的元素:

<script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>

本章总结

  • id 属性用于为 HTML 元素指定唯一的 id
  • id 属性的值在 HTML 文档中必须是唯一的
  • CSS 和 JavaScript 可使用 id 属性来选取元素或设置特定元素的样式
  • id 属性的值区分大小写
  • id 属性还可用于创建 HTML 书签
  • JavaScript 可以使用 getElementById() 方法访问拥有特定 id 的元素

我们的html复习第二章节就到这了,期待博主的下一篇,请关注博主吧

 

 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/669649.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

ECC加密算法详解+python实现

一.前言 目前比较受欢迎的加密算法一共存在两种&#xff0c;一种是基于大整数因子分解问题&#xff08;IFP&#xff09;的RSA算法和基于椭圆曲线上离散对数计算问题&#xff08;ECDLP&#xff09;的ECC算法。之前对RSA算法进行过很详细的讲解&#xff0c;但是ECC加密算法还没有…

科普文章:会议论文VS期刊论文,两者有何区别?学界的认可度两者一致吗?

文章目录 一、会议论文和期刊论文的概念1.1 会议论文1.2 期刊论文1.3 总结 二、不同之处2.1 内容的不同2.2 审稿周期的不同2.3 认可度的区别 三、投稿的一些建议四、自己的一点小想法 计算机深度学习方向研一学生一枚&#xff0c;论文才有想法&#xff0c;下一步打算开始写了&a…

业务流程绕过测试-业务安全测试实操(18)

业务流程绕过测试,业务上限测试 业务流程绕过测试 测试原理和方法 该项测试主要针对业务流程的处理流程是否正常,确保攻击者无法通过技术手段绕过某些重要流程步骤,检验办理业务过程中是否有控制机制来保证其遵循正常流程。例如业务流程分为三步:第一步,注册并发送验证码:…

JS 循环链表

文章目录 导文循环链表的概念循环链表具有以下几个特点&#xff1a;实现一个循环列表 导文 循环链表是一种特殊的链表数据结构&#xff0c;其中最后一个节点指向链表的头节点&#xff0c;形成一个循环的环状结构。与普通链表不同&#xff0c;循环链表没有明确的结束点&#xff…

【后端面经-java】java线程池满的处理策略

【后端面经-java】java线程池满的处理策略 1. 线程池介绍1.1 基本作用1.2 处理流程1.3 线程池大小设置1.4 线程池参数 2. 线程池满的处理策略2.1 默认--拒绝策略handler 3. 参考资料 1. 线程池介绍 1.1 基本作用 对多个线程使用的资源进行集中管理。 降低资源消耗&#xff1…

【数据挖掘实战】——科大讯飞:跨境广告ROI预测(Baseline)

&#x1f935;‍♂️ 个人主页&#xff1a;Lingxw_w的个人主页 ✍&#x1f3fb;作者简介&#xff1a;计算机科学与技术研究生在读 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4a…

前端Vue自定义列表表格信息展示可用于商品规格参数展示

前端Vue自定义列表表格信息展示可用于商品规格参数展示 &#xff0c; 下载完整代码请访问uni-app插件市场地址&#xff1a;https://ext.dcloud.net.cn/plugin?id13131 效果图如下&#xff1a; #### 使用方法 使用方法 <!-- table-list:表格数组 数组里对象可自定义字段 …

Kubernetes 和 Prometheus

资源监控系统是容器编排系统必不可少的组件&#xff0c;也是服务治理的核心之一。而 Prometheus 本质上是一个开源的服务监控系统和时序数据库&#xff0c;是 CNCF 起家的第二个项目&#xff0c;目前已经成为 Kubernetes 生态圈中的监控系统的核心。 Prometheus 的核心组件 Pro…

Run in PaddleX 2.0,一站式搞定飞桨精选模型开发全流程!

2020年4月&#xff0c;飞桨推出了 PaddleX 全流程开发工具&#xff08;以下简称 PaddleX 1.0 系列&#xff09;&#xff0c;其在社区收获了广泛的影响力。PaddleX 1.0 系列采用本地单机版的方式&#xff0c;将深度学习开发全流程从数据准备、模型训练与优化到多端部署端到端打通…

【支付系统】如何生成订单号

通常我们都会用数据库中的主键作为订单号,而id的生成方式又以自增,uuid,雪花id最为常见.但是这些并不适合作为订单号.订单号一般要体现出年月日等信息.方便快速定位是哪个时间的订单.如果我们直接使用时间作为id,会有重复的可能.这里就给大家介绍一种最为简单的一种方式. 时间自…

企业进销存管理系统的设计与实现_kaic

摘 要 企业的进销存管理系统在日常经营过程中起着至关重要的作用&#xff0c;直接影响产品生产 的成本、进度、质量和企业效益。本论文项目以某化工企业对进销存管理系统的需求为 背景&#xff0c;针对企业存在的部门运作独立、信息资源共享度低等造成的进销存管理低率低下、 有…

【console】console用法大全:

文章目录 一、console.log普通信息/console.info提示性信息/console.error错误信息/console.warn警示信息二、console.time()和console.timeEnd()>查看执行所用时间三、console.group()和console.groupEnd()>让控制台输出的语句产生不同的层级嵌套关系四、console.profil…

什么是HTTP 500内部服务器错误,要怎么修复

HTTP 500是一种原始的错误代码&#xff0c;它指示网站服务器在处理请求时发生了内部错误&#xff0c;不过具体错误原因是不确定的。一般情况下&#xff0c;这种错误通常是由服务器程序上的bug或者配置问题造成的。当服务器收到请求时&#xff0c;尝试执行它时&#xff0c;但是发…

使用径向基函数(RBF)神经网络对我们自己的excel数据进行分类---包括详细的python代码,RBFRegressor

文章目录 一、 径向基神经网络&#xff08;Radial Basis Function Neural Network&#xff09;是什么&#xff1f;二、径向基函数(RBF)神经网络对我们自己的excel数据进行分类---包括详细的python代码总结 一、 径向基神经网络&#xff08;Radial Basis Function Neural Networ…

Go 将引入标准库 v2 版本,首个动手的是:math/rand/v2!

大家好&#xff0c;我是煎鱼。 最近 Go 核心团队负责人 Russ Cox&#xff08;下称&#xff1a;rsc&#xff09;发起了一项 “讨论”。希望正式开启 Go 标准库的 v2 版本&#xff0c;相当于老树发新芽了。 Go 标准库升级 v2 原因 这次会发起这个提案的最直接原因是&#xff1a;我…

编译原理笔记8:语法分析(2)上下文无关文法 CFG

目录 CFG 概述及其四元组表示产生式集合表示 CFGCFG&#xff0c;用推导&#xff0c;产生语言直接推导由 CFG 产生语言在&#xff1f;为啥从右往左叫规范&#xff1f;凭什么歧视左&#xff1f; 总结一下这些奇奇怪怪的东西 前几篇博客中说到的词法分析&#xff0c;做的是从 【xy…

驱动开发:内核注册表增删改查

注册表是Windows中的一个重要的数据库&#xff0c;用于存储系统和应用程序的设置信息&#xff0c;注册表是一个巨大的树形结构&#xff0c;无论在应用层还是内核层操作注册表都有独立的API函数可以使用&#xff0c;而在内核中读写注册表则需要使用内核装用API函数&#xff0c;如…

Spring Cloud灰度部署

1、背景(灰度部署) 在我们系统发布生产环境时&#xff0c;有时为了确保新的服务逻辑没有问题&#xff0c;会让一小部分特定的用户来使用新的版本&#xff08;比如客户端的内测版本&#xff09;&#xff0c;而其余的用户使用旧的版本&#xff0c;那么这个在Spring Cloud中该如何…

第五届双态IT北京用户大会回顾 | 基于运维数据治理的数智化转型

专题演讲人&#xff1a;擎创科技CTO 葛晓波 文末附有本场专题演讲视频 ●前言 各行业的云原生发展程度各有不同&#xff0c;并不是所有业务应用都适合云原生的形态&#xff0c;如若过度追求云原生化反而会使得企业运维压力骤增&#xff0c;运维成本激增。 从数字化转型的角度…

软考:软件工程:软件定义,特点,软件生命周期,软件危机,软件开发模型

软考&#xff1a;软件工程: 提示&#xff1a;系列被面试官问的问题&#xff0c;我自己当时不会&#xff0c;所以下来自己复盘一下&#xff0c;认真学习和总结&#xff0c;以应对未来更多的可能性 关于互联网大厂的笔试面试&#xff0c;都是需要细心准备的 &#xff08;1&#…