本章主要介绍前端设计中html页面设计
先对网页与网站、浏览器以及web标准的概念做个简单介绍:
网站:在因特网上根据一定的规则,使用HTML等制作的用于展示特定内容相关的网页集合。
网页:网站中的一页,通常是HTML格式,使用浏览器来阅读。常见以.htm或者.html后缀结尾,故也称为HTML文件。网页是构成网站的基本元素。
常用浏览器:IE、Firefox、Chrome、Safar和Opera等
浏览器内核主要负责了网页内容的读取、整理讯息、计算网页的显示方式并显示页面。
web标准:是由w3c组织和其他标准化组织制定的一系列标准集合。
web标准由结构(HTML)、表现(CSS)、行为(JavaScript)构成。其中最为重要的就是结构(HTML)的编写。
一、HTML(超文本标记语言--用来制作网页的一种语言)
HTML不是一种编程语言,而是一种标记语言。
所谓超文本:
1、超越了文本限制(可以加入图片、声音、多媒体等)。
2、超级链接文本(可以从一个文件跳转到另一个文件)。
标记语言是一套标记标签。
- 基本结构标签:每一个网页都会有一个基本的结构标签(也称为骨架标签)。页面内容在这些标签上书写。(可以使用开发工具VScode或者使用记事本来编写代码)
<html></html>HTML标签
<head></head>文档头部
<title></title>页面标题
<body></body>文档主题
例如:
<html>
<head>
<title>页面设计1</title>
</head>
<body>
前端设计
</body>
</html>
- 对于基本骨架的解释:(在VScode中输入!加回车即可)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
(1)<!DOCTYPE>:文档类型声明标签,作用就是告诉浏览器使用的是哪种HTML版本来显示网页。例如<!DOCTYPE html>就表示使用的是HTML5版本。
(2)lang用来定义当前文档显示的语言:en表示是一个英文网页、zh-CN表示是一个中文网页。但是文档内部使用的语言不受影响。就是说你可以在显示为英文网页的基础上在页面的body部分编写中文文档后,显示结果不受影响。
(3)charset字符集:是多个在字符的集合,以便计算机能够识别和存储各种文字。
在HTML代码编写中,使用<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码。
代码中使用的是:UTF-8,这是万国码,基本包含了全世界所有国家需要用到的字符。不写可能会造成乱码。
- HTML常用标签解释(会在文档最后附上一些常用标签的合集)
标题标签<h1>-<h6>:可作为标题使用,并且依据重要性依次递减(其中<h1></h1>标题显示的字体最大,<h6></h6>标题显示的字体最小)。
段落和换行标签:<p></p>标签用于定义段落,可以将整个网页分为若干个段落。
<br/>表示换行标签,是一个单标签。作用是可以强制换行。
使用了换行标签与段落标签后,显示页面上有所不同。使用了段落标签后,段落之间会有一些垂直距离,而换行标签则没有。
文本格式化标签:为了突出文档中某些文字的重要性,比普通文字更重要。下面是对于文本进行操作的一些标签。(其中加粗与倾斜较为常用)
加粗:<strong></strong>或者<b></b>
倾斜:<em></em>或者<i></i>
删除线:<del></del>或者<s></s>
下划线:<ins></ins>或者<u></u>
分块标签<div>和<span>标签:是没有语义的,就是一个盒子,用来装内容的。
<div>标签用来布局,一行只能放一个(div可译为分割、分区的意思)。而<span>标签一行可以放置多个<span>(span可译为跨度、跨距的意思)。
图像标签:(这是一个单标签)
<img src = "图像URL" />,其中src是使用图像标签必须包括的一个属性,用于指定图像文件的路径和文件名。
其他属性:
alt | 文本 | 替换文本,当图像显示不出来时,显示的文本信息 |
title | 文本 | 提示文本,鼠标放在图像上时显示出来的文字 |
width | 像素 | 设置图片显示的宽度 |
height | 像素 | 设置图片显示的高度 |
border | 像素 | 设置边框粗细 |
其中当更改图片中width、height属性时,只用更改一个,显示时会自动调好图片大小。
图片中的路径问题:需要采用路径方式来指定图像文件的位置。(相对路径和绝对路径)
相对路径:以引用文件所在位置为参考,而建立的目录路径。
绝对路径:是指目录下的绝对位置,通常是指盘符开始的路径或者是完整的网络地址。
超链接标签:<a>标签,能实现从一个页面链接到另一个页面。
语法格式:<a href = "跳转目标" target = "目标窗口的弹出方式">文本或图像</a>
对各属性的解释:href--用于指定链接目标的url地址。
target--用于指定页面的打开方式。(默认:_self(不写出时,默认为_self在当前窗口打开)打开新窗口:_blank(当要打开新窗口时,使用))。
链接可分为以下6种:
注释和特殊字符:
使用<!--注释-->(ctrl+/)
特殊字符:空格: <:< >:> &:&(这几个较为常用,其他使用时上网百度即可)。
常用标签:
标题标签<h1></h1>...<h6></h6> | 作为标题使用,依据重要性递减 |
段落标签<p></p> | 可将整个网页分为若干段落 |
换行标签<br/> | 强制换行 |
图像标签<img src = "图像URL" /> | 用于插入图像 |
链接标签<a href = "跳转目标" target = "目标窗口弹出方式">文本或图像</a> | 实现页面的跳转 |
<div></div>和<span></span>标签 | 页面分块,布局 |
HTML中表单写于下一个博客,未完。