(教学思路 html一) HTML讲述介绍及基本结构

简介:
什么是 HTML ?介绍 HTML 的作用?
HTML 被译为“超文本标记语言”,用它可以设计出一个标准的网页,无论网页包括动画、多媒体、图形等各种复杂的元素,基础构架都是 HTML ,现在你们做的都是静态的网页,这种语言不带有逻辑功能,比如:你不能用html的命令标记写运算。
    举例说明重要:你以后需要制作动态网页时,也需要用到 HTML 的知识基础,添加数据绑定、调整显示位置,同时将来写的动态网页到客户端也就是我们阅读网页时,都会以html的源文件形式呈现出来。
学习方法
既然 HTML 被称为标记语言,那么学习 HTML 重要的关键就是记住标记,多动手实践、要有耐心、要美观、要提高性能、重视作业。
编译环境和开发工具
    任何文本编辑器都可以编写 HTML ,比如,写字板、 word 、最常用的就是记事本和 html 的开发工具 Dreaweaver ,是一种所见即所得的一种工具,同时它也能切换到一个文本编辑器,去除掉废代码,提高网页的质量,上传和下载快捷。
  • 如何创建一个自定义的名字叫“加油”的html页面?同时编写html页面呢?
        我们以记事本作为html的编译工具,首先在你创建的目录下新建一个记事本,重命名这个记事本,并且将记事本的扩展名.txt改为.html后(加油.html),原来的记事本样子的文件图标就会变成e图片,这就是一个网页,双击进入后,就会用你所在机器默认的浏览器打开这个网页,这是为什么呢?原因很简单,因为扩展名变了,系统就会根据扩展名,找到相应的打开方式的工具,打开这个文件。当然现在这个网页是空白的,因为你还没有添加网页的标记以及你想实现的网页效果。接下来,在浏览器中找到查看工具栏,找到源文件,单击源文件标签,就会自动打开一个记事本,在这里你就可以添加标记实现网页效果了。当你写在记事本中编写完源代码时,保存本记事本,然后刷新“加油.html"这个页面,你所写的代码就会呈现在这个网页中,现在我们体验一下。……
        用这个查看源文件的方式,你可以查看网站上任意网页的源代码文件,这种学习方法也是非常可取的,如果你想实现这个网页效果,学习一下别人是如何写的,吸取经验。下面我们就来具体学习一下html的基本结构:
        
 
1.         HTML 文档结构:不分大小写
<Html>       Html 文档以<html> 开始
<Head>    文档头开始
      中间定义了 网页的标题等
</Head>  文档头结束
<Body>     文档体开始
       文件主体:一个网页所展现出的文字、图片等都是在文档的主体部分进行定义的。
</Body>    文档体结束
</Html >    Html 文档以<html> 结束
 
2.           标记语法
2.1  什么是标记
HTML 用于描述功能的符号称为“标记”。标记在使用时必须用尖括号“<> ”括起来,有些标记必须成对出现。
目的是让浏览器知道我这对标签内部的都是html 的标签功能,执行的是html 的命令。
2.2     标记类型和语法
基本结构:  双标记  < 标记> 文本内容(施加作用的部分)</ 标记>
            单标记  它单独使用就能完整的表达意思。<br>  表示换行
注:标记可以成对嵌套,但不能交叉嵌套
<p><b> 这是正确的代码:文字将是黑体</b></p>
-----<b></b>这对标记代表标记中间显示的字将以黑体的形式展现的页面上,在你编写html的代码时,你手动输的换行和空格,浏览器是不识别的,会以一整个段落的格式展现,所以要想将这一大段分成若干个小段就用了<p></p>这对标记,它中间的文字将以一个段落的形式出现。
比较一下下面这对标记与上面的不同:
<p><b> 这是不正确的代码:文字将是黑体 </p></b> 这种写法是不正确的,b标签在文字的内部第一个开头,就必须在文字的内部第一个结束。
2.3     标记属性
大多数标记是在始标记内包含一些属性。
比如<hr> 的作用是在网页中插入一条水平线:粗细是2 ,黑色<hr size= 2   color=black> ,水平线还有其他的属性,当你不标明特殊时,都是采用默认值的。比如粗细的默认是1 ,你可以根据你要显示的效果修改属性值。属性值可以加引号也可以不加。
3.           编写HTML 文件的注意事项
1.         所有标记都要用<> 括起来,这样浏览器就知道,尖括号内的标记是HTML 的命令。
2.         对于成对出现的标记,最好同时输入双标记,以免忘记。
3.         采用标记嵌套的方式可以为同一信息应用多个标记。
4.         在代码中,不区分大小写。
5.         任何空格或回车在代码中都无效,分别是&nbsp <br>. 因此,建议不同的标记间用回车键换行再编写。
6.         标记中不要有空格,否则浏览器可能无法识别。
4.           起始标记
5.           文件头部内容
<Head></Head> 标记对构成HTML 文档的开头部分,头部内容不直接在网页上显示。
5.1.  Title 标记 <Title> 设置网页标题,请在此输入标题名</Title>  只要在网页中设置网页标题,就可以在浏览器上显示出来。
5.2.  Base 标记 <Base href=”URL”> 设置基底网址:当网页代码运行后,把鼠标放到设置好的链接到设置好的基底网址的链接上时,在状态栏就会显示出  基底网址。
5.3.  Link 标记 <Link rev=”RELATIONSHIP” reL=”RELATIONSHIP” href=”URL”>
 LINK  标记连接外部样式表文件,这种方法适合在同一网站的不同网页重复使用样式,这样就可以通过只修改一个样式表文件而改变整个网站的多个网页的外观。  LINK  标记有三个用来表示如何连接文件的属性,  rel属性和type 属性表明要连接的外部文件的种类,如果连接的是 CSS 样式表文件则 rel =" stylesheet type =" text/css href 属性指定想要连接的外部文件的地址,此处不做详解,我们会在以后的课程中接触样式表的基本用法。
 
5.4.  Meta 标记   定义文件的信息:作者信息、网页过期时间、关键字等
<Meta http-equiv=”Content-Type” content=”text/html; charset=gb2312” >
比如:<meta name=”keywords” content=” 计算机、英语”> 当利用搜索引擎搜索计算机或英语的图书时,输入任何关键字都可以搜索到该网页。
6.          文件主体: 
<Body></Body> 标记对之间的内容是HTML 文档的主要部分,在此标记对之间可包含众多的标记和信息
7.          网页链接
7 1 网页链接的概述:链接在网页制作中是一个必不可少的部分,在浏览网页时,单击一张图片或者一段文字就可以弹出一个新的网页,这些功能都是通过超链接来实现的。
7.2  链接的分类:
  外部链接、内部链接、邮件链接。
7.3 超链接的路径
绝对路径:绝对路径是指完整的描述文件位置的路径 http://www.163.com
相对路径:所谓相对路径,顾名思义就是自己相对与目标位置 , 它包含了从当前文件指向目的文件的路径。采用相对路径是建立两个文件之间的相互关系,可以不受站点和所处服务器的影响。  (此处不做祥解)
7.4 外部链接
7.5  内部链接
有时候,当某页的内容很多时,我们可以利用网页的内部链接,以便使用者快速的找到资料。
§  内部链接就是网页中的书签  <a Name=” 书签名称”> 书签内容</a>
§  <a name=” 标签a”> 美容方法:保证睡眠……</a>
<a href=”# 标签a”> 想知道美容方法吗?</a>
演示例子:
    7.6  邮件链接:邮件链接可使访问者在浏览页面时,只需单击电子邮件链接就能打开默认的邮件编辑软件,向指定的地址发送邮件  <a Href=”mail to:wangfang224120999@sina.com”> 王方的邮箱</a>
本文转自叶子文文博客51CTO博客,原文链接http://blog.51cto.com/leafwf/185767如需转载请自行联系原作者

叶子文文
相关文章
|
1月前
|
数据可视化 前端开发
HTML基础结构和常用标记的例子
HTML基础结构和常用标记的例子
15 0
|
1月前
|
移动开发 HTML5
HTML发展史和HTML结构
【2月更文挑战第17天】HTML发展史和HTML结构。
17 2
|
1月前
|
移动开发 搜索推荐 开发者
HTML基础结构
HTML基础结构
|
7月前
HTML table 标准结构
HTML table 标准结构
27 0
|
4天前
vscode快捷HTML结构 | Emmet
vscode快捷HTML结构 | Emmet
11 1
|
4月前
|
前端开发
【零基础入门前端系列】—图片和HTML的基本结构(三)
【零基础入门前端系列】—图片和HTML的基本结构(三)
|
4月前
|
前端开发
HTML+CSS制作DNA双螺旋结构
HTML+CSS制作DNA双螺旋结构
|
11月前
|
移动开发 前端开发 HTML5
《智能前端技术与实践》——第 2 章 前端开发基础 ——2.2 HTML基础——2.2.1 HTML 文档基本结构(上)
《智能前端技术与实践》——第 2 章 前端开发基础 ——2.2 HTML基础——2.2.1 HTML 文档基本结构(上)
|
11月前
|
移动开发 前端开发 HTML5
《智能前端技术与实践》——第 2 章 前端开发基础 ——2.2 HTML基础——2.2.1 HTML 文档基本结构(中)
《智能前端技术与实践》——第 2 章 前端开发基础 ——2.2 HTML基础——2.2.1 HTML 文档基本结构(中)
129 0
|
11月前
|
编解码 前端开发 JavaScript
《智能前端技术与实践》——第 2 章 前端开发基础 ——2.2 HTML基础——2.2.1 HTML 文档基本结构(下)
《智能前端技术与实践》——第 2 章 前端开发基础 ——2.2 HTML基础——2.2.1 HTML 文档基本结构(下)