001+limou+HTML——(1)HTML入门知识

000、本人编写前言

前言:本笔记来源于莫振杰的书《HTML、CSS、Javascript从零到一快速上手》,经过修改制成的自学笔记,本书很适合小白学习入门web的相关知识,你也可以先看看我从中学到了什么,再考虑是否去认真学习这本书。

001、HTMl简介

(1)前端技术解说

①从“网页制作”到“前端开发”

  • “网页制作”是web1.0时代(2005前)的产品,主要是静态网页,即仅仅供用户浏览图片和文字,而无法与服务器进行数据交互的页面。那个时候的网页开发工具三大件:Dreamweaver、Fireworks、Flash
  • “前端开发”是web2.0时代(2005后)的产品,由网页制作演变而来,这个时候网页分成两种(静态网页和动态网页)这个时候的网页开发工具三大件:HTML、CSS、JavaScript

②从“前端开发”到“后端开发”

  • 前端开发最为核心的技术就是:HTML、CSS、Javascript。
  • “HTML控制网页结构,CSS控制网页外观、Javascript控制网页行为”相当于一个盖房子的流程

i、使用HTML设置网页的字体类型、背景颜色等
ii、使用CSS修饰字体类型、字体大小、背景颜色等
iii、使用Javascript定义鼠标事件,当鼠标挪到某个按钮时,按钮的颜色会改变

  • 掌握了前端技术的核心就可以开始开发网站了。但是开发的只是静态网页,只能用于浏览不能和服务器交互,因此学完三大核心后就还要学习后端技术
  • 几种常见的后端技术:PHP(比较通用的开源脚本语言)、JSP(类似ASp技术,可以在传统的HTML网页中插入Java程序段(scriptlet)和JSP标记(tag),从而形成JSP文件用JSP开发的网站是跨平台的,既可以在windows下运行也可以在Linux等操作系统上运行)、ASP.NET(前生就是ASP技术)

③学习路线推荐

  • HTML----CSS----Javascript----jQuery----HTML5----CSS3----ES6----移动web----Vue.js
  • 另外不一定要等到精通一门后才学习下一门(这也是很难的),很多技术都具有交叉关系。我很喜欢折本书里的一句话“只有‘通’十行,才可能做到‘精’一行”

(2)什么是HTML

①HTML全称是“HyperText Markup language”,即超文本标记语言,严格来说HTML不属于一种编程语言,而属于标记语言

②HTML通过多对标签来描述网页,学习HTML就相当于学习这些标签,用来搭建网页的骨架

<p>一段文字p>  

③有时候也会叫“标签”为“元素”,如把“p标签”说成“p元素”

④通过HTML标签来描述一个网页生成一个.html文件,再由浏览器解读(打开)这个文件,就可以将网页的效果呈现给用户

002、开发工具

前期只是写HTML的话,推荐使用VScode即可,安装一些有关web开发的插件吧,或者你有其他能编写HTML的编辑器也可以。

003、基本标签

HTML的基本结构如下:

DOCTYPE html>     
<html>              
    <head>          

    head>
    <body>          
       
    body>
html>

(1)文档声明

“!DOCTYPE html”标签是文档声明,表示这是一个HTML页面,最好是必须携带有这个标签

(2)html标签

告诉浏览器,这个页面是从开始,到结束的。

  • 有的时候还会在里面看到有一个属性为xmlns的代码,例如表示当前页面使用的是W3C的XHTML标准,不过这点可以暂时不理会

(3)head标签

是网页的头部,用于定义一些特殊的内容,例如:页面标题、定时刷新、外部文件等,一般来说只有六个标签能放在里面

  • title标签,定义网页标题
DOCTYPE html>
<html>
    <head>
        <title>网页标题title>
    head>
    <body>
        
    body>
html>
  • meta标签,定义页面的特殊消息,例如页面关键字、页面描述。这些信息很重要,是给搜索引擎蜘蛛看的,方便我们平时通过关键字等搜索得到这个页面,而mate标签有两个重要的属性(name、http-equiv)
    • name可以描述网页的信息,在实际开发中最重要的其实只有keywords和description
    • http-equiv可以描述网页所使用的编码和定义网页自动刷新跳转,如果不加上有可能会产生乱码的问题
DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="refresh" content="5;url=https://www.baidu.com"/>
        <title>网页标题title>
        <meta name="keywords" content="网页的关键字:学习HTML的练手网站"/>
        <meta name="description" content="网页的描述:本网站是一个新手学习使用的静态网站"/>
        <meta name="author" content="网页的作者:limou3434"/>
        <meta name="copyright" content="网页的版权信息:本站所有代码仅供本人使用,禁止转载"/>
    head>

    <body>
        
    body>
html>
  • style标签,用于定义页面的CSS样式,等学到了CSS后再进行讨论
  • link标签,用于引入外部样式文件(CSS文件),等学到了CSS后再进行讨论
  • script标签,用于定义页面的Javascript代码,也可以引入外部的JavaScript文件,等学到了Javascript后再进行讨论
  • base标签,这个标签我们暂时忽略不讲,只需要知道有这个标签就好了

(4)body标签

是网页的身体,大部分的网页标签都会被写在这里面,比如在里面写入p标签(段落标签,显示一段文字)

DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="refresh" content="5;url=https://www.baidu.com"/>
        <title>网页标题title>
        <meta name="keywords" content="网页的关键字:学习HTML的练手网站"/>
        <meta name="description" content="网页的描述:本网站是一个新手学习使用的静态网站"/>
        <meta name="author" content="网页的作者:limou3434"/>
        <meta name="copyright" content="网页的版权信息:本站所有代码仅供本人使用,禁止转载"/>
    head>

    <body>
        <p>网页第一段内容……p>  
        <p>网页第二段内容……p> 
        <p>网页第三段内容……p>
        <p>网页第四段内容……p>
        <p>网页第五段内容……p>
        <p>网页第六段内容……p>
        <p>网页第七段内容……p>
    body>
html>

(5)注释标签用于编写注释

用于编写注释


/*这也是一段注释*/

你可能感兴趣的:(HTML学习笔记,javascript,前端,dreamweaver)