网站开发html_网页基础代码大全
网页的标准是W3C,目前模式是HTML、CSS和JavaScript。
HTML,全称“Hyper Text Markup Language(超文本标记语言)”,简单来说,网页就是用HTML语言制作的。HTML是一门描述性语言,是一门非常容易入门的语言
CSS,全称“(层叠样式表)”。以后我们在别的地方看到“层叠样式表”、“CSS样式”,指的就是CSS
HTML是网页的结构,CSS是网页的外观,而JavaScript是页面的行为
HTML 标签
1. 在HTML中规定标签使用英文的的尖括号即`<`和`>`包起来,如`<html>`、`<p>`都是标签。 2. HTML中标签**通常**都是成对出现的,分为开始标签和结束标签,结束标签比开始标签多了一个`/`,如`<p>标签内容</p>`和`<div>标签内容</div>`。开始标签和结束标签之间的就是标签的内容。 3. 标签之间是可以嵌套的。例如:div标签里面嵌套p标签的话,那么`</p>`必须放在`</div>`的前面。 4. HTML标签不区分大小写,`<h1>`和`<H1>`是一样的,但是我们通常建议使用小写,因为大部分程序员都以小写为准。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
<!DOCTYPE HTML>
是文档声明,必须写在HTML文档的第一行,位于<html>
标签之前,表明该文档是HTML5文档。
<html></html>
称为根标签,所有的网页标签都在<html></html>
中。<head></head>
标签用于定义文档的头部,它是所有头部元素的容器。常见的头部元素有<title>
、<script>
、<style>
、<link>
和<meta>
等标签,头部标签在下一节中会有详细介绍。- 在
<body>
和</body>
标签之间的内容是网页的主要内容,如<h1>
、<p>
、<a>
、<img>
等网页内容标签,在<body>
标签中的内容(图中淡绿色部分内容)最终会在浏览器中显示出来。
HTML文档包含了HTML标签及文本内容,不同的标签在浏览器上会显示出不同的效果,所以我们需要记住最常见的标签的特性
head标签
我们首先来介绍一下head
标签的主要内容和作用,文档的头部描述了文档的各种属性和信息,包括文档的标题、编码方式及URL等信息,这些信息大部分是用于提供索引,辩认或其他方面的应用(移动端)的等。 以下标签是可以用在head
标签中的:
<head lang='en'>
<title>标题信息</title>
<meta charset='utf-8'>
<link>
<style type='text/css'></style>
<script type='text/javascript'></script>
</head>
title标签
<title>
标签:在<title>
和</title
>标签之间的文字内容是网页的标题信息,它会显示在浏览器标签页的标题栏中。可以把它看成是一个网页的标题。主要用来告诉用户和搜索引擎这个网页的主要内容是什么,搜索引擎可以通过网页标题,迅速的判断出当前网页的主题。t
<!DOCTYPE HTML>
<html>
<head>
<title>蒂法</title>
</head>
<body></body>
</html>
meta标签
Meta标签介绍:
元素可提供有关页面的原信息(mata-information),针对搜索引擎和更新频度的描述和关键词。
标签位于文档的头部,不包含任何内容。
提供的信息是用户不可见的。 meta标签的组成:meta标签共有两个属性,它们分别是http-equiv属性和name属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能。
常用的meta标签:
- http-equiv属性
它用来向浏览器传达一些有用的信息,帮助浏览器正确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值。
<!--重定向 2秒后跳转到对应的网址,注意分号-->
<meta http-equiv="refresh" content="2;URL=http://www.baidu.com">
<!--指定文档的内容类型和编码类型 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!--告诉IE浏览器以最高级模式渲染当前网页-->
<meta http-equiv="x-ua-compatible" content="IE=edge">
- name属性
主要用于页面的关键字和描述,是写给搜索引擎看的,关键字可以有多个用 ‘,’号隔开,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<meta name="description" content="拉拉">
其他标签
<!--标题-->
<title>路飞学城</title>
<!--icon图标(网站的图标)-->
<link rel="icon" href="fav.ico">
<!--定义内部样式表-->
<style></style>
<!--引入外部样式表文件-->
<link rel="stylesheet" href="mystyle.css">
<!--定义JavaScript代码或引入JavaScript文件-->
<script src="myscript.js"></script>
testHTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--指定文档的内容类型和编码类型 --> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <!--重定向 2秒后跳转到对应的网址,注意分号--> <!--<meta http-equiv="refresh" content="2;URL=http://www.baidu.com">--> <!--标题--> <title>蒂法</title> <!--icon图标(网站的图标)--> <link rel="icon" href="juhua.png"> </head> <body> <h1>海燕</h1> <p>在苍茫的大海上,</p> <p>狂风卷集着乌云。</p> <p>在乌云和大海之间,</p> <p>海燕像黑色的闪电,</p> <p>在高傲地飞翔。</p> <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6> <!--定义JavaScript代码或引入JavaScript文件--> <script src="myscript.js"></script> </body> </body> </html>
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/167454.html原文链接:https://javaforall.cn
相关文章
- 前端网页介绍
- 《安富莱嵌入式周报》第280期:支持在线仿真编程的网页版电子开发,CAN总线防攻击实现,BigFAT 规范打破了 FAT 每个文件 4GB 的限制
- 06_Linux基础-NGINX和浏览器、网页的关系-云服务器ssh登陆-安装NGINX-上传网页-压缩命令-xz-gzip-bzip2-zip-tar-配置N
- 网页抓包
- 【手把手】制作一个简单的HTML网页
- 羊了个羊APP/H5网页/小程序游戏系统开发搭建教程及部署源码
- HTML5期末大作业:大学生个人网站设计——我们的班级(7页) HTML+CSS+JavaScript 学生DW网页设计作业成品 html网页制作代码大全 html5网页设计作业代码
- 复制粘贴网页上的文字有的字粘贴不上_网页无法复制的文字怎么复制
- 【移动端网页布局】移动端网页布局基础概念 ② ( 视口 | 布局视口 | 视觉视口 | 理想视口 )
- 【移动端网页布局】移动端网页布局基础概念 ① ( 移动端浏览器 | 移动端屏幕分辨率 | 移动端网页调试方法 )
- 【移动端网页布局】移动端网页布局基础概念 ④ ( 物理像素 | 物理像素比 | 代码示例 - 100 像素在 PC浏览器 / 移动端浏览器 显示效果 )
- 【移动端网页布局】移动端网页布局基础概念 ③ ( meta 视口标签简介 | 利用 meta 视口标签 设置 网页宽度 / 是否允许用户缩放 / 初始缩放比例 / 最小缩放比例 / 最大缩放比例 )
- 爬虫第二课:解析网页中的元素详解编程语言
- SEO网页标题(title)该怎么写?
- Linux 中使用命令快速打开网页(linux打开网页命令)
- Javascript打印网页部分内容的脚本
- jQuery切换网页皮肤并保存到Cookie示例代码
- C#获取网页HTML源码实例