关于HTML网页制作的基础知识你懂多少?

共 3473字,需浏览 7分钟

 ·

2021-03-26 06:01

关注我们“Python日志”


哈喽宝贝们

又到周一了

打工人认真上班的时间

土豆也在认认真真打工




页面基础元素:<html>


<html>是页面的基础元素,主要用来定义页面的开始和结束部分。元素语法结构如下<html>....</html>(开头标记为<>,结束标记为</html>)先介绍一下完整的HTML文件的基本结构


<html>           文件开始标记<head>          文件头开始标记.........                文件头部分的内容</head>         文件头结束标记<body>          文件主体开始标记.........                文件主题部分的内容</head>         文件主题结束标记</html>          文件结束标记



在<html>和</html>之间写入想要编辑的页面内容就构成了一个简单的页面



文本显示方向属性:dir


【作用与语法】dir属性用来指定浏览器文本显示的方向,同时也决定浏览器滚条的位置。dir属性的语法结构如下


<html dir="浏览器中文本的方向">......</html>(在元素名称和属性之间要加入空格)



dir属性可以取两个值,ltr(left title right)和rtl(right title left),分别表示从左向右显示和从右向左显示


指定语言属性:lang


【作用与语法】lang属性用来指定文档中所使用的语言。lang属性的语法结构如下


<html lang="指定的语言">包含的内容部分</html>



lang属性的取值可以使用ISO标准中的语言代码。在<html>元素中加入lang属性,使浏览器更好的显示界面,并不会更改页面的文字编码


ISO标准中语言代码的取值及含义


语言名称写法语言名称写法
英语en法语fr
汉语zh德语de
日语ja意大利语it




页面头部元素:<head>


【作用与语法】HTML的头部元素是以<head>为开始标记,以</head>为结束标记。它用于包含当前文档的相关信息,可包含<title>元素、<meta>元素等,分别用来定义页面的标题、编码。使用<head>元素可以将基本信息部分和页面主体内容区分开来。<head>元素的语法结构如下


<head>......</head>



 页面标题元素:<title>


【作用与语法】HTML页面的标题一般是用来说明页面用途的,它显示在浏览器的标题栏中。在HTML文档中,标题信息设置在页面的头部,也就是<head>和</head>之间。<title>元素的语法结构如下。


<title>......</title>    (说明:在标记中间的“......”就是标题的内容,它位于HTML文档的头部,即<head></head>之间)




元信息元素:<meta>


【作用与语法】元信息元素<meta>用来定义页面的附加信息,其中包括页面的作者、版权、关键字等相关信息。<meta>元素的语法结构如下。


<meta 属性=“属性值”/>



<meta>元素是一个自封闭的元素,通过其中的属性来添加各种附加信息。<meta>元素在不适用任何属性时,对页面没有影响。


元信息元素名称属性:name


【作用与语法】name属性用来制定文档中附加信息的名称。例如,最常用的值“keywords”用来定义文档中的关键字,方便搜索引擎的搜索。name属性的语法结构如下。


<meta name="信息名称"/>



在<meta>元素中,名称必须对应有相关的值才能生效




元信息元素的值:content


【作用与语法】content属性用来指定文档中附加信息的值,它与name属性成对出现。content属性的语法结构如下


<meta name="信息名称" conten="附加信息的值"/>



<meta>元素中所定义的“keywords”信息是用来为搜索引擎定义关键字的,所以对页面显示效果并不产生影响,故页面显示效果并无太大变化


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


【作用与语法】http-equiv属性和name属性类似,用来指定附加信息的名称。在浏览器加载页面之前,服务器会把http-equiv属性定义的相关信息发送给浏览器,便于在浏览器中正确显示页面。http-equiv属性的语法结构如下


【作用与语法】<meta http-equiv="信息名称"content="附加信息的值">



说明:和name属性相似,http-equiv属性一般要和conten属性成对出现




 定义页面的跳转


【作用与语法】在浏览器网页的时候经常会看到一些欢迎信息的页面,并经过一段时间后,这一页面会自动转到其他页面,这就是网页的跳转。使用HTML中的HTTP代码就可以很轻松的实现这一功能。页面跳转的语法结构


<meta http-equiv="refresh" content="跳转时间"url="链接地址">



说明:在该语法中,refresh表示网页的刷新,而在content中则设定刷新的时间和刷新后的地址,时间和链接地址之间用分号相隔。默认情况下,跳转时间是以秒为单位的


基本设置元素:<base>


在HTML中,基本设置元素<base>使用来定义相对路径的根目录。使用<base>元素,可以方便的定义页面中的超级链接。语法结构如下


<base 属性="属性值"/>



<base>元素在不使用任何属性时,对页面没有影响。<base>元素中可以使用的属性有链接路径属性href和链接窗口属性target




 链接路径属性:href


【作用与语法】href属性用来指定文档中相对链接的根目录。文档中的所有链接(包括图片、音频等内容)都按照href属性所指定的根目录显示。href属性的语法结构如下


<base href="指定路径">包含的内容部分</base>



 链接窗口属性:tager


target用来指定链接目标文件显示的窗口。其中可以指定目标文件显示在框架中,也可以指定目标文件显示在id标记的窗口中(关于框架和id标记会在后面详细讲解),同时还可以使用HTML中指定的值。语法结构如下


<a href="链接的路径" target="目标窗口或指定值">链接的文本</a>



在target属性中指定的取值及其含义,如下表


target属性的取值及含义


代码属性值含义代码属性值含义
_self在当前窗口显示_parent在父窗口显示
_blank在新的窗口显示_top取消框架并在当前窗口显示


 类型属性:media


【作用与语法】media属性用来指定<style>元素中所包含内容作用的媒体。一般情况下,制作的网页可能在不同的浏览设备中使用,指明使用的媒体将有助于页面的显示。media属性的语法结构如下


<style media="媒体类型"></style>



media属性中可以使用多种媒体,具体的取值及含义如下表


media属性的取值及含义


代码属性值含义代码属性值含义
screen电脑显示器aural音频设备
tv电视tty文本
print打印机all所有设备


好啦,本期关于网页的一些基础就先到这里啦

我们下期再见哦






关注我们
Python日志
一个正经搞知识的公众号


内容源自网络



浏览 26
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报