html是什么?html文档基本结构
html(hyper text markup language):超文本标记语言.它不是一种编程语言,而是一种标记语言,它有一套标记标签(markup tag).html使用标记标签来描述网页.html文档也叫web页面
你可以使用html来建立自己的web站点.
网页主要由3部分组成:
■html:结构(structure)
■css:表现(presentation)
■javascript:行为(behavior)
html实例:
<!doctype html>
<html>
<body>
<h1>我是第一个标题</h2>
<p>我是第一个段落</p>
</body>
</html>
●<html>元素定义了整个html文档,这个元素有个开始标签<html>,有个结束标签</html>
●<head>元素必须包含文档的标题(title),可以包含脚本,样式,meta信息以及其他更多的信息
●<body>元素定义文档的主体,<body>元素包含文档的所有内容(比如文本,超链接,图像,表格和列表等等)
二 创建你的第一个html页面
html文件是文本文件,因此你可以使用任何文本编辑器来创建你的第一个网页.
给大家推荐几款常用的编辑器:
●Notepad++
●Sublime Text
●HBuilder
●EditPlus
在编辑器中输入:
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>我的第一个段落.</p>
</body>
</html>
保存为first.html(后缀名也可以是.htm,推荐使用.html)
注意:对于中文网页需要使用<meta charset="utf-8">声明编码,否则会出现乱码.有些浏览器会设置GBK为默认编码,则你需要设置为<meta charset="gbk">
<title>标签定义了html文档的标题,在所有html文档中是必需的
<title>元素:
●定义浏览器工具栏中的标题
●提供页面被添加到收藏夹时的标题
●显示在搜索引擎结果的页面标题
<html>
<head>
<meta charset="utf-8">
<title>我的第一个页面</title>
</head>
<body>
<p>我的第一个段落.</p>
</body>
</html>
在editplus中运行的结果:
HTML script 元素
<script> 标签用于定义客户端脚本,比如 JavaScript。
script 元素既可包含脚本语句,也可通过 src 属性指向外部脚本文件。
必需的 type 属性规定脚本的 MIME 类型。
JavaScript 最常用于图片操作、表单验证以及内容动态更新。
下面的脚本会向浏览器输出“Hello World!”:
<script type="text/javascript"> document.write("Hello 天华信息教育!") </script>
<noscript> 标签
<noscript> 标签提供无法使用脚本时的替代内容,比方在浏览器禁用脚本时,或浏览器不支持客户端脚本时。
noscript 元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。
只有在浏览器不支持脚本或者禁用脚本时,才会显示 noscript 元素中的内容:
<script type="text/javascript"> document.write("Hello 天华信息教育!") </script> <noscript>Your browser does not support JavaScript!</noscript>
实例
如何将脚本插入 HTML 文档。
<html> <body> <script type="text/javascript" > document.write("<h1>Hello 天华信息教育!</h1>") </script> </body> </html>
HTML基础教程:脚本
如何应对不支持脚本或禁用脚本的浏览器。
<html> <body> <script type="text/javascript"> document.write("Hello 天华信息教育!") </script> <noscript>Sorry, your browser does not support JavaScript!</noscript> <p>不支持 JavaScript 的浏览器将显示 noscript 元素中的文本。</p> </body> </html>
HTML基础教程:脚本
希望以上可以解决你们心中的一些疑惑,其中可能会有不对的地方或是需要改进的地方,欢迎留言纠正。感觉还不错欢迎关注收藏转载哦
有一个好的编辑器我们可以方便地的开发项目,编写代码,配置和管理我们的项目。所以我们开始编写html代码之前需要搭建开发环境。
基于html项目的开发和代码编写现在网上有很多编辑器,也有免费的,也有收费的编辑器。基于在Windows系统环境下开发和编写html代码最简单的编辑器就是Windows自带的记事本,我们可以使用记事本编辑html代码。
使用记事本编写html的步骤是首先新建一个文本文档,按照html的语法规则编写相关的代码和保存文件,然后把文件的后缀名改为.html,使用电脑上的浏览器打开就可以查看我们代码的运行结果。
虽然记事本也能编写html代码,但是效率不高也不方便,所以我们使用专业的编辑器来开发项目,编写代码和管理项目。
常用html代码编写的免费软件有HBuilderX,vs code,Sublime Text 等等。
HBuilderX官网下载地址:
https://www.dcloud.io/hbuilderx.html
vs code的官网下载地址:
https://code.visualstudio.com/
Sublime Text官网下载地址:
http://www.sublimetext.com/
我们以后的教程都使用HBuilderX,所以下面为了同学们的学习方便,对HBuilderX的下载和安装做详细的教程。
一,下载
首先访问HBuilderX的官网网址:
https://www.dcloud.io/hbuilderx.html
打开上面的HBuilderX下载网址后点击页面上download,在弹出的对话框里选择适合自己电脑的HBuilderX版本下载。
在Windows10环境下下载后的文件是一个压缩的.zip文件。
二,安装
鼠标右击下载下来的压缩文件进行解压。
解压完成后是一个名为HBuilderX的文件夹。
解压完成后鼠标双击HBuilderX文件夹:
双击运行名为HBuilderX.exe的应用程序文件即可启动HBuilderX编辑器:
因为HBuilderX是一个绿色软件所以没有桌面快捷方式和开始菜单快速启动程序,我们可以右击HBuilderX.exe文件创建桌面快捷方式。
小百科:
绿色软件指一类小型软件,多数为免费软件,最大特点是软件无需安装便可使用,可存放于闪存中,移除后也不会将任何记录留在本机计算机上。通俗点讲绿色软件就是指不用安装,下载直接可以使用的软件。绿色软件不会在注册表中留下注册表键值,所以相对一般的软件来说,绿色软件对系统的影响几乎没有,所以是很好的一种软件类型。
三,新建项目
HBuilderX编辑器初次启动时的默认界面是下图所示:
按照下图所示可以创建一个新的名为demo1空白项目:
名为demo1的空白项目创建成功后的界面如下图所示:
接下来在刚我们新建的demo1项目下创建名为helloworld的html文件
鼠标右击创建的demo1项目选择新建在选择.html文件:
在弹出的对话框里填入html文件的名称:
编写一段代码:
运行:
在浏览器上观察效果:
好了,到这里html的开发环境搭建和HBuilderX的安装教程结束了。
下面再给大家教一下怎样修改HBuilderX的主题风格,HBuilderX自身提供了修改软件主题的功能,使用者可以自身需求和喜好修改HBuilderX的风格。在喜欢自己喜欢的环境下做开发也是令人羡慕的一件事。
按照以下步骤可以修改HBuilderX的主题,默认主题是绿柔,我们可以改成雅黑,雅蓝或者自定义主题:
雅黑主题:
雅蓝主题:
好了本节全部内容全部结束了,希望我准备的内容对你有所帮助
你的支持是我的最大动力,若觉得我的教程还可以或对你有帮助为我点赞加关注!谢谢!
*请认真填写需求信息,我们会在24小时内与您取得联系。