HTML入门

最新推荐文章于 2022-09-11 17:42:34 发布

xycy123_com

最新推荐文章于 2022-09-11 17:42:34 发布

阅读量108

点赞数 1

文章标签： html 前端 html5 javascript

本文链接：https://blog.csdn.net/xycy123_com/article/details/116608246

版权

web前端学习路线：

web网页开发：主要学习HTML、DIV+CSS、javascript基础应用，通过该阶段的学习，我们能够最终实现一个静态但是具备动画交互效果的网站。
- 动态网站：具有数据交互功能，例如用户可以在网页或者网站上进行留言、评论、注册、登陆等等
- 静态网站：不具备数据交互功能，但通过会有动画效果（特效），例如：下拉菜单、页面弹框、轮播图

javascript高级编程：一门客户端语言，该阶段主要是深度研究该语言，使用更为高级的技术更好的实现动画效果，具体来说包括：面向对象编程、es6+、插件开发等等。
Nodejs全栈开发：nodejs是一门基于js(es)语法的服务端语言，用来进行服务端开发目的是为了实现动态数据交互的网站，它里面主要是一些核心模块的API以及一些基础应用，最后是MVC模型的框架开发。
- 通过node阶段学习使得我们的网站即有前台也有后端是一个完整的应用，所以我们成为"全栈开发"
- 关于全栈，它最早来自国外，就是国外的程序员基本上都是具备前后端开发能力的，前后端通吃的程序员称为"全栈工程师"。
- 该阶段学习目标是对整个网站开发的体系和流程有所了解并且能够独立网站中小型网站的搭建，最终来说是为了在面试的时候能吹出来牛逼。

框架开发实战：是企业级的开发模式，使用框架来实现快速开发，目前企业使用较多的是Vuejs、ReactJS。它们都是MVVM模式的框架。基本上来说学完框架之后在前端部分你已经到达葵花宝典的境界。
移动轻应用开发：其实也属前端领域，只是单独拿出来讲解，这里移动端轻应用开发是指使用H5技术实现移动APP的开发。全栈开发 = PC端 + 移动端 + 服务端。

关于网页和网站

通常在口语中，网站和网页的概念是几乎一致，只不过更精确的描述，网页是组成网站的一个个的个体。从技术上来说网页是可以由浏览器直接打开的静态文件。而网站是用来被访问的具有服务功能也就说它被搭建在服务器上面。

或者说，凡是具有域名和IP的才能称为网站，自己在电脑上写的页面只能称为网页。

网站包括了各个页面，它们之间是通过a链接来结合。

网页开发组成

要实现网页开发，需要使用HTML来编码，HTML是实现网页结构开发的标记语言，它好比是建造房子的骨架和砖块，接下来还需要使用DIV+CSS来排版、装饰和美化。以及javascript用来实现动画交互效果。

网站的组成

网站相比网页技术上的区别是网站具有服务功能，也就是有服务器。这里要明白就是一个完整的网站必须有前端（前台）和服务端（后台）组成：

前端：也叫客户端，用看来提供给用户使用，主要是浏览展示的功能
服务端：也叫服务器，提供服务的，主要用来管理网站的例如：添加新闻、审核评论等等

html初步

html简介

HTML：Hyper Text Markup Language（超文本标记语言），标记语言就是一种纯碎的解释性的语言，它没有什么逻辑只有一些基本的格式。

是一种文件格式，后缀： .html 或 .htm

文本：就是普通的文字内容，它以存储内容为主，不能排版也不能进行内容的多样化显示
超文本：就是“超级的文本”，显得很厉害的样子。其实就是写出来后，具有一定的"视觉效果"的代码内容，
它能够进行排版、以及嵌入资源文件（图片、视频、音频等等）

html规范

如上所述，html网页是由html标签按一定的规则组织起来的文件。

这个规则就是html语法规则，是我们需要遵循的标准（规范）。

谁制定的html标准？

w3c组织——一个非营利组织，全名叫world wide website combine(万维网联合会)

w3c组织制定了非常多的互联网技术标准（规范）。

谁领导w3c？

Tim Berners-Lee，蒂姆·伯纳斯-李——互联网之父，也是HTML创始人。

HTML迄今为止共有5个版本，现在老的项目中使用HTML4较多，新项目基本都使用HTML5来开发。HTML5相比较HTML4主要是新增了一些功能标签以及对移动端的支持较好。实际上HTML5最早是由WHATWG（web hypertext application tech work group）。

标签规范

html是由标签组成，就是用尖括号（“<”和”>”）括起来的一种特殊的代码形式，例如： 。浏览器在解释标签时是以<>为开始和结束的。如果写成<<我的梦>>，需要对尖括号进行转义<<我的梦>>

标签也叫“元素”，"选择器"，“标记”，其实就是预先规定好的一些代码，具有某些特定的含义和作用以及外观表现。

举例：

<br>、<h1></h1>、<p></p>

标签基本形式：

==<标签名属性名1=“值1” 属性名2=“值2” …>内容</标签名>==

一个完整标签，可能有包含的内容，以及标签的属性：

内容：是存储的信息，提供给用户查看，例如：<a href="">百度</a>
属性：修饰标签的，它可以是辅助的内容或者是包含样式：
- <img src="" alt="logo" />alt属性就是提供辅助内容表示该图片表达的含义
- some textsize和color属性用来控制样式

注意事项：
- 标签名是一个“单词”（有的单词可能只有一个字母）。不能写成：<123><我的梦>
- 属性名也是一个“单词”，表示对该标签的进一步“修饰”（设定）。
- 有的标签没有“内容部分”，则后面的结尾标签部分不用写——这种称为“单标签”。
 -  <img /> <link /> <hr />。。。。

——绝大多数标签都是“双标签”，只有很少几个是单标签。

- 不同的标签有不同的属性，不同的属性有不同的含义（或作用）。
- 有的属性可以出现在所有标签上——叫做通用属性，例如：ｔｉｔｌｅ

标签可以嵌套，但是一定是对称的嵌套：

这是合法的嵌套标签

这是非法的嵌套（×）

网页结构标签

网页结构标签就是组成网页最基本的结构，所有的网页都必须有的部分：

html 声明标签：声明HTML文档类型
head头标签：存储网页或者基本信息，例如：页面标题、说明的关键字、外部链接等等，实际上head是给搜索引擎。
body主体标签：网页主体内容，所以页面可视提供给用户看的内容都写在body里面。

站点准备

在文件系统中，设置一个www或者web文件夹作为你的站点或者代码的根地址，切记该目录的地址中尽量不要使用中文。

接下来选择一款适配自己习惯的编辑器来开发网页，推荐的有：Sumlime、Vs code、nodepad++等等。目前位为止不建议使用像 Webstrom、Hubilder、等等一些IDE（集成开发环境），这些都是做项目比较合适的软件，如果仅仅是平时联系代码还是选用轻量级的编辑器即可。

关于Vs Code使用

它是微软推出的一款专用、智能、高效的、优雅的、牛逼的开发软件，对常规的语言支持较好，尤其是typescript。它是工作区的形式展开的：

添加工作区：在界面左侧的空白区域鼠标右键选择”将文件夹添加到工作区“，你可以将你的www目录整体添加进来。在最近的vs code初始化会工作区中生成first project，你可以删除，也可以用起来。我们主要是在站点www下新建目录和文件：
安装中文包：进入扩展，输入chinese，然后点击安装，重启VS Code后能自动切换中文界面

html体验

html文件是以.html或者.htm结尾。其实很多的文件类型它的后缀名都是三个字母：word文件后缀是.doc,excel是.xls，text记事本文件是.txt等等。

代码的缩进：代码要使用TAB键来缩进（排版），一个TAB是四个空格
代码的预览：在VS Code中通过鼠标右键选择open in browser 在浏览器中打开，如果没有该选项那需要去商店下载：

下载完毕后，即可在鼠标右键看到该菜单。

<html>
    <head>
        <title>这是网页标题</title>
    </head>
    <body>
        网页的正文内容，写完后 使用ctrl + s来保存，
        接下来 使用浏览器来预览（看效果）。鼠标右键，选择`open in browser`
    </body>
</html>

使用代码模板

使用编辑器能够实现快速开发，在vs code中，新建一个html文件然后进入页面输入!，按TAB 能够帮助我们自动生成一个标准的HTML模板文件内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

doctype 用来声明文档类型，是H5支持的文档类型
head中除了title以外还有三个基础的meta标签：
- <meta charset="utf-8"> 用来声明当前文档的编码类型，常用的是"utf-8"和"gbk"。主要是让浏览器来识别当前文档以何种形式解码，避免出现乱码，尤其是中文。建议统一使用"utf-8"，这就需要在你编辑器中设置默认编码为utf-8。
- <meta name="viewport" content="width=device-width, initial-scale=1.0">该行代码用来设置视口，主要为了兼容移动端，在后面H5中会详细介绍

<meta http-equiv="X-UA-Compatible" content="ie=edge">设置浏览器的兼容性，让IE以最新模式来加载。

头标签

标签名说明<meta>定义对页面的描述：
网页描述和关键字<meta charset="utf-8"><br /><meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" />
<br />
<meta name="description" content="web 技术教程。" />
<br />
<meta http-equiv="refresh" content="5"/>每5秒刷新一次页面
<link>标签定义两个连接文档之间的关系。href ,rel ,type
<script>标签定义一段脚本，比如 JavaScript。type,src
<style>标签定义文档中的样式。
type,media<title>标签定义文档的标题。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta http-equiv="refresh" content="3,url=http://www.baidu.com">
    <title>Document</title>
    <script>
        //表示js代码的标签 让js和页面中的html分离
        alert('hello 0812');
    </script>
</head>
<body>
    
</body>
</html>

html注释

注释的含义：

就是不作为有效代码的内容，目的主要是给“人”看，帮助人们记录和理解代码的解释性文字。

各种语言都有自己的注释语法形式。

关于注释：最重要的是养成写注释的习惯！

其实，很多时候注释可能比代码本身更重要，例如：<水经注>

想知道更多请关注我的博客

xycy123_com

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML入门

web前端学习路线：web网页开发：主要学习HTML、DIV+CSS、javascript基础应用，通过该阶段的学习，我们能够最终实现一个静态但是具备动画交互效果的网站。动态网站：具有数据交互功能，例如用户可以在网页或者网站上进行留言、评论、注册、登陆等等静态网站：不具备数据交互功能，但通过会有动画效果（特效），例如：下拉菜单、页面弹框、轮播图 javascript高级编程：一门客户端语言，该阶段主要是深度研究该语言，使用更为高级的技术更好的实现动画效果，具体来说包括：面向对象编程.
复制链接

扫一扫