网页的标准是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文档。

  1. <html></html> 称为根标签,所有的网页标签都在<html></html>中。
  2. <head></head> 标签用于定义文档的头部,它是所有头部元素的容器。常见的头部元素有<title><script><style><link><meta>等标签,头部标签在下一节中会有详细介绍。
  3. <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标签:


  1. 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">

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



网页开发(HTML 基础)的更多相关文章

  1. 微信公众平台开放JS-SDK(微信内网页开发工具包)

    微信公众平台开放JS-SDK(微信内网页开发工具包),这次开放接口是质的飞跃,是对开发者和广大用户一个利好的消息.未来的公众号图文消息会更丰富多彩,准备脑洞大开吧!(第三方平台正式支持接入微信公众平台 ...

  2. [HTML]网页开发学习笔记

    为了要开发一套教学使用的教师管理系统,(客户需求使用网页做教师控制端口)我便学习了一下HTML网页开发. 很不错的学习开发的网站:http://www.w3school.com.cn/index.ht ...

  3. HTML5游戏开发技术基础整理

    随着HTML5标准终于敲定.HTML5将有望成为游戏开发领域的的热门平台. HTML5游戏能够执行于包含iPhone系列和iPad系列在内的计算机.智能手机以及平板电脑上,是眼下跨平台应用开发的最佳实 ...

  4. 用做网页开发经历了三个阶段(附长篇讨论) good

    用做网页开发经历了三个阶段:第一阶:傻干阶段使用Intraweb,傻瓜型,无需知道javascript,html,css,会pascal就可以了. 第二阶:困惑阶段使用Intraweb,有很多限制,比 ...

  5. JAVA开发语言基础

    很多时候我们都不知道,为什么android最开始要用java作为基础语言 看看知乎上都是怎么回答的 为什么java最初成为android开发的基础语言 ------------------------ ...

  6. JavaWeb开发技术基础概念回顾篇

    JavaWeb开发技术基础概念回顾篇 第一章 动态网页开发技术概述 1.JSP技术:JSP是Java Server Page的缩写,指的是基于Java服务器端动态网页. 2.JSP的运行原理:当用户第 ...

  7. Web开发——HTML基础

    文档资料参考: 参考:MDN官网 参考:http://www.runoob.com,W3School 参考:https://developer.mozilla.org/zh-CN/docs/Learn ...

  8. IOS-网络(网页开发-UIWebView,HTML,CSS,JavaScript,OC和JS代码互调)

    一.网页基础 // // ViewController.m // IOS_0218_网页开发1 // // Created by ma c on 16/2/18. // Copyright © 201 ...

  9. R Shiny app | 交互式网页开发

    网页开发,尤其是交互式动态网页的开发,是有一定门槛的,如果你有一定的R基础,又不想过深的接触PHP和MySQL,那R的shiny就是一个不错的选择. 现在R shiny配合R在统计分析上的优势,可以做 ...

  10. Python全栈开发【基础四】

    Python全栈开发[基础四] 本节内容: 匿名函数(lambda) 函数式编程(map,filter,reduce) 文件处理 迭代器 三元表达式 列表解析与生成器表达式 生成器 匿名函数 lamb ...

随机推荐

  1. JAVA NIO Selector Channel

    These four events are represented by the four SelectionKey constants: SelectionKey.OP_CONNECT Select ...

  2. 知乎上看到的一篇讲解Epoll的文章,较形象生动

    作者:蓝形参链接:https://www.zhihu.com/question/20122137/answer/14049112来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  3. java面向对象的一些知识

    (1)this和super关键字的用法 this表示调用本类实例方法和成员变量,this引用就是对一个对象的引用,如this.name  表示本类成员变量name,静态方法中不能使用this关键字. ...

  4. kafka-spark偏移量提交至redis kafka1.0版本

    kafka版本 1.0.0 spark版本 spark-streaming-kafka-0-10_2.11/** * @created by imp ON 2019/12/21 */class Kaf ...

  5. Spark学习进度-实战测试

    spark-shell  交互式编程 题目:该数据集包含了某大学计算机系的成绩,数据格式如下所示: Tom,DataBase,80 Tom,Algorithm,50 Tom,DataStructure ...

  6. 风炫安全WEB安全学习第十八节课 使用SQLMAP自动化注入(二)

    风炫安全WEB安全学习第十八节课 使用SQLMAP自动化注入(二) –is-dba 当前用户权限(是否为root权限) –dbs 所有数据库 –current-db 网站当前数据库 –users 所有 ...

  7. CSS 奇技淫巧:动态高度过渡动画

    这个问题源自于掘金上的一个留言,一个朋友问到,为什么我下面这段代码的高度过渡动画失效了? 伪代码大概是这样: { height: unset; transition: all 0.3s linear; ...

  8. 深入理解MySQL索引(下)

    先创建一个T表. mysql> create table T ( ID int primary key, k int NOT NULL DEFAULT 0, s varchar(16) NOT ...

  9. mybatis入门教程之搭建一个简单的mybatis项目并启动它

    一.准备条件: 1.依赖jar包:mybatis核心包(必须).lombok插件包(非必须)以及MySQL数据库连接驱动包(必须) <dependency> <groupId> ...

  10. Java 使用URL类通过url下载网络资源

    主要用到的类 地址类: URL http类: HttpURLConnection 输入流: InputStream 输出流: FileOutputStream 上代码 package com.demo ...