整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

Html学习笔记(主体结构&教程资料)

么是HTML?

  • HTML(Hypertext Marked Language)超文本标记语言
  • 文件的后缀名.html .htm
  • Hypertext可以在文件中标识图片、链接、表格、文本等。
  • Marked<或>以及字符串组成
  • 是一种编程语言
  • -浏览器解释的语言

HTML主体标记

代码分为三部分编写

<html>是网页文件的最外层标记
 <head>
之间的文本是头信息,不会显示在浏览器中,包括基本的描述,整个网页的公共属性
 </head> 
 <body>
是网页的主体部分,正文:文字、图片、链接、表单等
 </body>
</html>

HTML文档头部标记

<head>头部标记</head> 
<title></title>只能有一个 
<base/>只能有一个 
<link>可以有多个 
<meat>可以有多个 
<meat name="" content=""> 
<meat http-equiv="" content=""> 

title

定义网页标题,显示在浏览器的标题栏中 有利于搜素引擎(也是在搜索引擎中显示的标题)

base

基底网址标记

用于设定浏览器中文件的绝对路径

网页中的文件只需要写下文件的相对路径即可,这个路径就是base指定下的路径

link

设置外部文件的链接标记

用于确定本页面和其他文档之间的关系

meta

两种用法

<meta name="" contnet="">

<meta http-equiv="" content="">

name用于在网页中加入关于网页的描述信息

网页的关键字,网页描述信息

http-equiv:属性用于在HTME文档中模拟HTTP协议的

响应消息头,例如,告诉浏览器,是否缓存页面,

使用什么样的字符集显示网页内容

meta的name标签属性:不是自己定义的值

Keywords:网页的关键字

Description:网页的描述 Robots:index noindex follow nofollow all none Author

copyright:版本

mate标签的http-equiv属性设置

Content-Type :网页文档类型 ,刷新页面

<meta http-equiv="refresh" content="3; url=http://wwww.baidu.com/">
<meta http-equiv="Windows-Target" content="_top"
此条语句的作用:禁止别人把你的网页放在小窗体里,一旦链接到你的网页,会全屏显示 

Page=Enter和Page=Exit

<meta http-equiv="Page-Enter" content="revealTrans(Transition=5,Ouration=1.000)">
<meta http-equiv="Page-Exit" content="revealTrans(Transition=8,Ouration=1.000)">
为页面进入和退出特效,一共有23种

主体标记<body>

在它中放置网页中所有内容

<body bgcolor="#ff00ff" text="#00ff00" link="red"
alink=""(鼠标单击颜色) topmargin=""(顶部距离)
vlink=""(鼠标放在上时的颜色)
leftmargin=""(默认左距离) background=""(放置背景图片)>

只要是可以用样式控制的,就不用HTML本身的属性,可以用CSS控制

Id name class style 通用属性,所有的元素都可以使用

DTD

文档类型定义

<!DDCTYPE HTML PUBLIC"-//w3c//DTD XHML 1.0 Transition//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml-transition1.dtd"(dtd的地址,按照dtd地址的格式显示本页面)>

想要学习Html的伙伴,私信松鼠并回复:Html

即可领取Html的教学资料和教学视频了(注意回复的大小写要一致哦~


互联网时代人们通过上网浏览信息,打开浏览器上网看到丰富的图文、视频、音乐等多媒体信息,一系列信息反馈和视觉冲击之后,您有没有想过,互联网这么发达的时代,您觉得花一点点时间学会做个网站页面不真香?

概念须知:超文本标记语言

“超文本标记语言“(HTML)作为文档信息载体。当我们用html创建文档时,它将我们的语言转换成计算机可以理解的语言。这使得计算机能执行特定任务至关重要。人与计算机交互,需要一套编辑规范,编辑者(相对于计算机,这里指写html的人)使用html标签(机器识别的关键字)对内容做排版,填写内容,然后定义板块的样式和动画后的一份字符串文本,发布到远程服务器,最终被机器解析成网络传输报文协议,传输到前端(一般情况下就是我们的浏览器),就能够呈现出大家熟悉的网站页面了。

简单的html

这里有一个小的指导教程,大家可以跟着来学习

一、 准备工具

编辑器 - windows系统自带的记事本工具(右击鼠标快捷键-> 新建 -> 文本文档 )

浏览器

二、 实现步骤

电脑桌面上右击鼠标,新建文本文档,helloword.html,需要注意修改.txt后缀名为.html



2.输入以下内容

<html>

<head>

<title>第一个页面</title>

</head>

<body>

<h1>您的成果</h1>

<p>hello word!</p>

</body>

</html>

用浏览器打开这个文档,可以通过修改打开方式也可以把文档拖到浏览器快捷键图标上面选择浏览器打开,预览成果。



三、总结一下您做的事情

使用windows系统的文本文档工具写了一份文本。这是一份主要信息内容(“第一个页面”、“您的成果”、“hello word!”),和信息结构化载体关键字(“html”,“head“,“title“,“body”,“h1”,“p”)的文本,组成了一份带结构的文本。我为什么称之为带结构呢?主要原因是,读者阅读需要清楚知道内容排版、模块、段落信息等等,例如:一份word文档,首行就是一个大标题,其次副标题,然后就是段落内容,其组成成分可能有图片、视频、跳转链接、注释等,它们组成了一个word文档的结构,按word文档结构规范编辑word文档是掌握word的基本要领。掌握html,需要认识html的基本结构。按照教程的html内容,它组成了html的最基本结构,<html> </html>, 可告知浏览器其自身是一个 HTML 文档。<head></head>,可告知浏览器这里是文档的头部。<body></body> 这里是文档的主体。“<>” 告知浏览器,将要用到元素标签,即“<html>”用了html标签。“<>”是标签的开始,“</>”则是标签的结束。标签是HTML语言中最基本的单位,标签的组合使用即是自由组合,也是相互约束的。例如:“<title></title>”标签,告诉浏览器本页的标题,只能在“<head></head>”标签里面使用。掌握html需要知道各种标签的作用范围,定义和用法。以上 “<h1></h1>” 是文档内容大标题,副标题有 “<h12></h2>” 、 “<h3></h3>” ..... “<h5></h5>”。“<p></p>” 标签定义了段落内容,每一次 “<p></p>”,文本内容将产生一个段落。编写html为了方便阅读,需要有良好的编写格式。每一个子标签需要顶格,“<head>"相对“<html>顶格了,我是通过输入Tab实现的。平级的标签不需要顶格,例如 ,案例中的排版 “<h1>" “<p>" 是相对于“<body>"平级的。



如何实现网络上常见的html页面效果

充分利用html标签,完成页面内容的布局,需要掌握以下要点

掌握基本的html标签,参考网络学习资源链接:https://www.w3school.com.cn/html/html_basic.asp掌握html排版技巧,使得页面内容整整齐齐

使用css,层叠样式定义,它主要是负责控制内容展示的形式,并不具有具体信息内容,它能控制html元素的布局、属性、例如在css里面,定义了某类元素的名字(.className = {}),这类元素统一长度为10px( .className = {width:10px} ),之后通过把名字赋予元素(<div class="className" > <div>),拥有class="className"的元素都会显示出长度为10px的样子。

参考内容https://www.w3cschool.cn/css/

使用script,可以控制元素的响应动作,例如移动元素、改变元素的大小,颜色、切换图片、提交表单、校验内容等等。页面常用的是javascript,需要较轻的编程知识,但是由于javascript的出现,使得页面的前端开发技术的进步,永无止境。

参考内容 https://www.w3school.com.cn/tags/tag_script.asp

总结

html如此简单,只要您不被标签内容影响了您对超文本的阅读理解,了解html标签对内容做了结构化,掌握起来,便能够进入互联网的大舞台时代了!

获得精彩内容,记得关注哦!

tml简介:

  1. 通俗讲是用来做网页的语言

  2. 超文本标记语言

  3. 网页可以添加文字、视频、音乐、特效

  4. 结构包括头部、身体组成网页。

html工具:

  1. 编程工具:dreamever HBuilder notepad++ 电脑自带记事本也可以不过得换下后缀改为.html

  2. 作图工具:photoshop

  3. 动画:Flash

  4. 特效:javascript语言

注:要是没有下载途径下载这些软件的话私信我给你们发过去哈

编程开始:

以HBuilder为例

  1. 打开软件 新建web项目

  2. 给项目命名 项目名称写你的项目名字Html-01

  3. 项目命名

  4. 打开右侧index.html文件开始编程

  5. 编程代码

  6. 运行程序,上方运行即可

  7. 运行效果图

  8. 运行效果图

  9. 试着在改成这样代码看看效果

  10. 加的属性

  11. 加属性后的运行效果

  12. 加属性后效果

第一次发文章也是小菜鸟,希望可以找到对编程感兴趣的人一起学习交流!