前端基础之——HTML页面基本元素（一）

亦凉 2021-09-22 06:36 303阅读 0赞

前言：作为一个java工程师，前端对于我来说很弱，要想成为全栈工程师，那么前端必然也需要会，所以这里看了一本秘籍为《HTML+CSS+网页开发技术精解》，做一个笔记，和总结。如果涉及侵权，请通知本人，本人在三个工作日删除。

学习图：

![20170608104537491][]

# 一、html篇 #

## 1、html基础（略）若有不懂请自己补充html的概念 ##

## 2、页面基本元素 ##

这些元素是构成页面的基础，它们各有自己相应的作用，掌握这些页面的基本元素是定义 HTML 页面的关键，这些设置决定了页面的文档类型和现实效果，同时也直接影响页面中各种元素能否正常显示。

**本节要点：**

1.  **页面头部元素<head>**  
    
2.  **页面标题元素<title>**  
    
3.  **元信息元素<meta>**  
    
4.  **页面主体元素<body>**

学习图： ![20170608113046576][]

### 2.1 页面头部元素 <head> ###

### 2.2 页面标题元素 <title> ###

页面头部元素和页面标题元素是头部信息的主要组成。详细介绍（略）

### 2.3 元信息元素 <meta> ###

meta 元素提供的信息不显示在页面中，一般用来定义页面信息的说明、关键字、刷新等。

在HTML中，meta标记不需要设置结束标记，在一个尖括号内就是一个meta内容。

在一个HTML页面中可以有多个 meta 元素。meta 元素的属性有 name 和 http-equiv，其中 name 属性主要用于描述网页，以便于搜索引擎查找、分类。

#### 2.3.1 元信息元素名称属性 name、content ####

name 属性提供了由<meta>标签定义的名称/值对中的名称，HTML 标准没有指定任何预先定义的<meta>名称，通常情况下，可以自由使用对自己和源文档的阅读者来说都有意义的名称。  
content 属性提供了名称/值对中的值，该值可以是任何有效的字符串（如果值中包含空格，就要用引号括起来）。Content 属性始终要和 name 或 http-equiv 属性一起使用。

基本语法：

语法介绍：  
在该语法中，name 为属性名称，设置为 generator，也就是设置编辑工具，在 content 中定义具体的编辑工具名称。  
案例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta name="generator" content="FrontPage">
    <title>元信息元素名称属性</title>
    </head>
    <body>
    </body>
    </html>

代码分析：  
在代码中，加粗部分的标记定义编辑工具为 FrontPage

#### 2.3.2 元信息元素的附加属性 http-equiv ####

http-equiv 类似于 http 的头部协议，它回应给浏览器一些有用的信息，以帮助正确和精确地显示网页内容。content-type 设定页面使用的字符集，用以说明网页制作所使用的文字语言，浏览器会根据此来调用相应的字符集显示页面内容。  
基本语法

语法介绍：  
在该语法中，http-equiv 用于传送 HTTP 通信协议的标头，而在 content 中才是具体的属性值。charset 用于设置网页的内码语系，也就是字符集的类型，国内常用的是 GB 码，charset 往往设置为 GB2312，即简体中文也可设置为UTF-8

案例代码：

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=euc-jp" />
    <title>Untitled Document</title>
    </head>
    <body>
    </body>
    </html>

代码分析：  
在代码中，加粗部分的标记是告诉浏览器等设备，文件为 html 文件，且使用了日语编码。

**作用：设置使用字符集编码**

#### 2.3.3 设置页面关键字 ####

在搜索引擎中，检索信息都是通过输入关键字来实现的。关键字是整个网站登录过程中最基本也是最重要的一步，是进行网页优化的基础。关键字在浏览时是看不到的，它可以供搜索 引擎使用。当用关键字搜索网站时，如果网页中包含该关键字，就可以在搜索结果中列出来。

基本语法：

语法介绍：  
在该语法中，name 为属性名称，这里是 keywords，也就是设置网页的关键字属性，而在content 中则定义具体的关键字。  
案例代码：

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta name="keywords" content=" 插入关键字">
    <title>插入关键字</title>
    </head>
    <body>
    </body>
    </html>

代码分析：  
在代码中，加粗部分标记为插入关键字。

### 2.3.4定义页面的跳转 ###

使用<meta>标记可以使网页在经过一定时间后自动刷新，这可以通过将 http-equiv 属性值设置为 refresh 来实现。content 属性值可以设置为更新时间

基本语法：

语法介绍：  
refresh 出现在 http-equiv 属性中，使用 content 属性表示刷新或跳转的开始时间与跳转的网址。默认情况下，跳转时间以秒为单位。

案例代码：

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="refresh" content="5;url=index1.html">
    <title>定义页面的跳转</title>
    </head>
    <body>
    5 秒后自动跳转
    </body>
    </html>

注意：index1.html要存在，或者写成http:www.baidu.com就可以跳转到百度首页了

**提示：使用 http-equiv 属性中的 refresh 不仅能够实现页面之间的跳转，还可以完成页面自身的自动刷新。** 将url改成自己的名字即可

### **2.3.5 定义页面的作者信息**（就将content设置成作者名字即可）<meta name="author" content=" 老马"> ###

### 2.3.6  定义页面的版权信息（就将content设置成版权即可）<meta name="copyright" content=" 老马工作室"> ###

此外在head中还经常定义JavaScript的内容。后期在讲解。

## 2.4 页面主体元素 <body> ##

网页的主体部分包括要在浏览器中显示处理的所有信息。在网页的主体标记中有很多的属性设置，包括网页的背景设置、文字属性设置和链接设置等。

### 2.4.1 主体元素的背景属性 bgcolor ###

背景颜色的设计是最为简单的，但同时也是最为常用和最为重要的，因为相对于背景图片来说，它在显示速度上有绝对的优势。在网页文件中，一般通过<body>标签的 bgcolor 属性来指定页面的颜色背景。

语法： <body bgcolor="背景颜色">

该语法中的 body 就是页面的主体标记，bgcolor 的值可以是一个已命名的颜色，也可以是一个十六进制的颜色值。在 HTML 4.01 中，不赞成使用 body 元素的 bgcolor 属性。

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>主体元素的背景属性</title>
    </head>
    <body bgcolor="#C21647" >
    </body>
    </html>

背景则为红色

### 2.4.2 主体元素的背景图片属性 background ###

使用恰当的图片作为背景，能够使页面看上去更加生动美观。使用 background 属性可以将图片设置为背景，还可以设置背景图片的平铺方式、显示方式等。

语法：<body background="图片的地址">（图片的地址可以是相对地址，也可以是绝对地址。）

默认是平铺。

### 2.4.3 主体元素的文本属性 text ###

text 属性可以设置 HTML 文档的文本颜色。在没有对文字的颜色进行单独定义时，这一属性可以对页面中所有的文字起作用。

语法：<body text="文字的颜色">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>页面背景图片</title>
    </head>
    <body background="C:\Users\mch\Desktop\t0115e42ca3ffd6e8f8.jpg" text="#ff0cc0">
    <p>人生亦生活，生活亦人生，生活中的爱情，爱情中的生活，二者相互共存 ，彼此易同化，让人难以捉摸，我们总
    有一种感觉，生活中缺少了什么，只为了一个残忍而偏激的解释，就说少了一份真感情，而感情又是个抽象的东西 ，比如
    说 ，一个男孩对一个女孩说 “我爱你 ”，然后他们在一起，就童话而言，这是个美丽的结局，但不幸的是，生活并不是童
    话。</p>
    </body>
    </html>

### 2.4.4 未访问过的链接属性 link ###

超链接是网页中最重要、最根本的元素之一。网站中的一个个网页是通过超链接的形式关联在一起的，正是因为有了网页之间的链接才形成了这纷繁复杂的网络世界。超链接中以文字链接最多，在默认情况下，浏览器以蓝色作为超链接文字的颜色，访问过的文字颜色则变为暗红色。可以通过 link 参数修改链接文字的颜色。

语法：<body link="颜色"> 这一属性的设置与前面几个设置颜色的参数类似

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title>页面背景图片</title>
    </head>
    <body background="C:\Users\mch\Desktop\t0115e42ca3ffd6e8f8.jpg" text="#ff0cc0" link="#FF6600">
    <a href="#"> 链接的文字</a>
    </body>
    </html>

### 2.4.5 激活的链接属性 alink ###

使用 alink 可以设置正在访问的文字颜色。也就是鼠标点下但是还不要松开时的颜色，松开后会变成未点击的颜色。

### 2.4.6 已访问过的链接属性 vlink ###

使用 vlink 可以设置已访问过的超链接颜色。（不好用，未点击时就变成了已经访问过的颜色）

### 2.4.7 IE 浏览器中的左边界属性 leftmargin ###

在 HTML 页面中，可以定义页面的左边距，即内容和浏览器左侧边框之间的距离，设定合适的左边距可以防止网页外观过于拥挤。

基本语法：<body leftmargin=左边距的值> （在默认情况下，边距的值以像素为单位。）

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title>IE 浏览器中的左边界属性</title>
    </head>
    <body leftmargin="50">
    设置页面的左边距为 50 像素
    </body>
    </html>

### 2.4.8 IE 浏览器中的上边界属性 topmargin ###

在 HTML 页面中，可以定义页面的左边距，即内容和浏览器上侧边框之间的距离，设定合适的上边距可以防止网页外观过于拥挤。

基本语法：  
<body topmargin=上边距的值>(一般以像素为单位）

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title>IE 浏览器中的左边界属性</title>
    </head>
    <body leftmargin="50" topmargin="50" >
    设置页面的上边距为 50 像素 <br/>
    设置页面的左边距为 50 像素
    </body>
    </html>

**提示：一般网站的页面左边距和上边距都设置为 0，这样看起来页面不会有太多的空白。**

### 2.4.9 主体元素的背景图片滚动属性 bgproperties ###

在默认情况下，如果页面的内容较长，当拖动浏览器滚动条的时候，背景会随着文字内容的滚动而滚动，所谓背景图像固定，是指不论浏览器的滚动条如何拖动，背景都永远固定在相同的位置，并不会随着文字滚动而滚动。

基本语法：  
<body background="图像的地址" bgproperties=fixed>  
语法介绍：  
Internet Explorer 和 Netscape Navigator6 都支持 <body>标签的 bgproperties 属性扩展。但它只有与 background 属性扩展一起使用时才有效bgproperties 属性只有一个值 fixed。它把背景图像冻结在浏览窗口，这样就不会随着其他窗口的内容而滚动了。

测试一下不好用。但是至少也是一种方法

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>主体元素的背景图片滚动属性</title>
    </head>
    <body background="images/company_ditu.jpg"bgproperties=fixed>
    <p> </p>
    <p> 每个梦想都值得灌溉</p>
    <p> 眼泪变成雨水就能落下来</p>
    <p> 每个孩子都应该被宠爱</p>
    <p> 他们是我们的未来</p>
    <p> 这是最好的未来</p>
    <p> 我们用爱铸造完美现在</p>
    <p> 千万溪流汇聚成大海 </p>
    <p> 每朵浪花一样澎湃</p>
    <p> 这是最好的未来</p>
    <p> 不分你我彼此相亲相爱</p>
    <p> 千山万水证明这关怀</p>
    <p> 幸福永远与爱同在</p>
    </body>
    </html>

## 2.5 创建样式元素 <style> ##

基本语法：  
<style type="text/css">  
</style>

语法介绍：  
style 元素只能在 HTML 文档的 head 内使用。Microsoft Internet Explorer 4.0 及以后版本允许多个样式块。此元素在 Internet Explorer 3.0 及以上版本的 HTML 中可用，在 Internet Explorer 4.0 及以上版本的脚本中可用。

<html>
    <head>
    <style type="text/css">
    h1 {color: red}
    h3 {color: blue}
    </style>
    </head>
    <body>
    <h1>This is header 1</h1>
    <h3>This is header 3</h3>
    </body>
    </html>

这段代码首先在 head 内使用 style 定义了 h1 和 h3 两个样式，然后在 body 正文内应用这两个样式。

## 2.6 脚本元素 <script> ##

基本语法：  
<script type="text/javascript">  
……  
</script>

语法介绍：

![20170724171406238][]

案例代码：

<html>
    <body>
    <script type="text/javascript">
    document.write("<h1>Hello kete!</h1>")
    </script>
    </body>
    </html>

代码分析：  
这段代码使用 script 定义了一段 JavaScript 代码，使用 document.write 输出标题文字“Hellokete!”  
也可以用alert（“输出alert”）来演示弹框。

总结

![20170726092359978][]

其它相关内容见下一章节

[20170608104537491]: /images/20210920/dc9c4f43802e43868ba74393ef439f3c.png
[20170608113046576]: /images/20210920/7a977154e50b476c8098408530f5c589.png
[20170724171406238]: /images/20210920/9072e5709f0e4b36bf6ecdfc319cafdc.png
[20170726092359978]: /images/20210920/da998309447f40069588bd694d3cdcaf.png