最近突然就对静态页面很有兴趣，主要是看到几个比较酷炫的页面效果，也想自己做一下，但是我的前端页面就是菜鸡，还停留在html+css+jquery的简单使用上，而且还忘记得差不多了！

　　而且我感觉前端比后端麻烦一点，可能是我没有什么审美吧，自己做的页面总是很丑陋，哈哈哈！就记录一下学习html的过程吧！学习主要是参考菜鸟教程，链接：https://www.runoob.com/html/html-tutorial.html

1.EditPlus编辑器的简单使用

　　写前端页面还是有一款编辑器比较好，就好像写java需要IDEA或者eclipse一样，虽然你也可以一直用记事本写，那估计会劝退n多新人，用编辑器对新人比较友好，等以后变牛了之后再用记事本写吧！

　选择适合自己的编辑器，这里推荐几个，可以自行下载：

　　我看了很多的编辑器，最终用了一款叫做EditPlus的软件，为什么呢？因为简单，不需要什么插件，而且最初我是将这个软件当作是打开各种格式文件的工具来用的，今天才发现居然还能用于写很多变成语言编写代码，而且功能上也支持代码补全（功能比较弱，不支持代码提示），下载的话随便下载吧！貌似正版是需要收费，我下载的刚好就是正版（有的时候嫌找破解版太麻烦了），打开会出现下面这个提示（记住，别点击任何按钮），我们只需要用鼠标左键将这个框框拖到屏幕看不见的位置，OK了，这个软件照用不误，现在可以正常使用了。。。。

　　下面我们就简单说说这个编辑器常用的用法，点击下面这个地方：

　　　几个常用的设置，我们现在重点看看代码自动补全，后期可以根据我们的需要设置文件模板；

　　随意看看HTML补全代码：

　　我们就以h1标签为例，我们只需要输入h1,不区分大小写，然后回车（空格键也行）就会自动补全，貌似还有更牛的代码补全方式，一下子可以补全一大块代码，我们现在不需要，后面用到的时候再说

　　代码补全之后我们就需要测试一下标签有没有用，这里就会用到浏览器渲染（记住，千万不要用EditPlus默认的浏览器，默认的好像的IE浏览器，比较坑爹）：

　　

　　简单测试一下：

　　结果如下：

　　注意：用这个EditPlus这个编辑器有点不舒服的地方，就是用空格键也会自动补全，所以打出类似<h1 style="xx">这样的代码，在h1后面的那个空格会打不出来，查了好半天都没办法移除空格这个快捷键，emmmm。。。。暂时只能用下面这种方式，如果有其他的方式请在评论区告诉我，谢谢！

2.认识静态页面

　　记得最开始学html静态页面的时候学了好久都没入门，始终都是一脸蒙逼，始终都在想html和css、js到底有什么关系呢？举个很简单的例子，我们看的动漫一般是怎么制作出来的呢？首先，我们要用素描画出人物的全貌，然后进行上色，最后就是想办法让它动起来，这里的三个步骤就对应于html，css和js；

　　那么问题来了，什么是静态页面呢？我们用浏览器打开的一个页面很好看，就比如百度，下图所示，可以看作是由很多小块组成的，这些小块对应于HTML中是对应一个标签，也就是类似<div></div>这样的，我们可以在标签内部继续插入标签、图片、文字等等，然后我们可以用css对这些div标签进行染色和移动位置等，最后我们还可以添加一些特效让这个页面有些动画的特效，后面我们简单做一个类似这个百度首页的页面吧，就当练练手！

 3.简单介绍HTML页面

　　我们可以看到每一个新建的HTML文档都有一些相同的东西，那就是最简单的标签，下图所示：最上面的<!doctype html>表示这是一个html文档，然后整个文档都由一个<html></html>标签包着,在每一个html标签中，包括两个大标签，头（head）和身体（body），就跟一个人一样有头和身体；

　　在头部中有个<title>标签这里就是在浏览器中显示的标题，而且后面的css代码一般都是写在头部，用<style></style>包着；在身体中我们就可以再嵌套其他标签，而且还可以写js代码（js代码必须用<script></script>包着），不知道大家没有没发现我下面的这个h1标签中有个style，这个和再头部中的<style>标签中写的css代码是等效的，所以说css代码有两种写法，一种是直接写在html标签内部，另外一种是写在头部的<style></style>标签中。。。。

 4.HTML基本标签

　　这里的HTML标签大多是写在身体中，那么有一些什么标签呢？

　　（1）<p></p>，这个标签其实就是相当于新开一个段落

　　（2）<a href="xxx"></a>这个标签就是生成一个链接，经常网页上就有各种链接，点击文字就会进入href这个链接中去

　　（3）<img src="xxx" width="xxx" height="xx" />这个标签就是插入一张图片，src表示图片的url地址，width图片长度，height图片宽度；而这里可以看出标签有两种，一种是两个标签<p></p>，另一种是<img />，

而且每一个标签内部都有一个特殊的东西，比如h1标签中的style，img标签中的src、widfth、height等，这些也叫做属性

　　（4）<h>标签，有很多个，其实就是字体逐渐变大的过程，可以用于标题；

　　（5）<hr>标签，就是一条黑色直线;<br>标签是换行

　　（6）粗体b和斜体i

　　（7）class属性和id属性，这两个属性很重要，是为了可以唯一的标识一个标签，因为在html文档中可能有多个相同的标签，那么我们怎么样确定其中哪一个标签呢？每个标签都可以有这两个属性，其中，每个标签的id属性值一定要唯一，class属性值可以相同；这两个属性是写css经常要用到的东西

　　补充一点：有的时候这种style中的css代码太多了很影响整个html的布局，我们可以将整个css代码提取出来在外面新建一个文档，然后在头部那里用link标签引用一下就可以了，例如：

<head>
//  ./mystyle.css就是外界的当前目录下css文件的url地址
<link rel="stylesheet" type="text/css" href="./mystyle.css">

</head>

　　（8）表格标签table：如果我们要在页面上画一个表出来，那么必须用到一些表格的标签，table表示整个表格（属性border表示表格最外边沿线的宽度），tr表示行，th表示第一行的每一列（也叫做表头），td表示从第二行开始的每一列

（9）无序列表标签ul和有序列表ol

　  （10）块级标签<div></div>,这个标签是最常用的标签了，这个标签有什么用呢？说实话没有什么特殊的效果，既然如此为什么要用这个啊？你想想啊，一个页面上有很多个不同的标签（几百上千个），我们每次都要去修改一个个的标签的内容有点太坑爹了，我们可以将页面分成一块块的，每一块就是一个div标签，div标签内部还可以嵌套各种标签，这样布局起来我们只需要对div标签进行操作了，更方便布局！！！

<body>

 <div id="container" style="width:500px">

    <div id="header" style="background-color:#FFA500;">

    <h1 style="margin-bottom:0;">主要的网页标题</h1>

    </div>

    <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">

    <b>菜单</b><br>

    HTML<br>

    CSS<br>

    JavaScript

    </div>

    <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">

    内容在这里

    </div>

    <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">

    </div>

  </div>

 </body>

　　

　　（11）表单标签form，就是每次用户名密码登录的那个界面，通常配合input标签一起使用，这个也是很常用的一个标签，其中input标签中的type属性决定这个input标签具体有什么用，name属性和value属性值是以键值对的形式传给后端，后端可以进行逻辑判断并进行后续处理。。。

<form>

        First name: <input type="text" name="firstname"><br>

        Last name: <input type="text" name="lastname"><br>

        Password: <input type="password" name="pwd"><br>

        单选：<br>

        <input type="radio" name="sex" value="male">Male<br>

        <input type="radio" name="sex" value="female">Female<br>

        多选：<br>

        <input type="checkbox" name="vehicle" value="Bike">I have a bike<br>

        <input type="checkbox" name="vehicle" value="Car">I have a car<br>

        <input type="submit" value="提交">

 </form>

（12）<ifram>标签，这个标签可以在页面中显示一个小页面，src表示小页面的url地址，我这里是我本地的一个特效html；这个标签和a标签一起使用可以看到很有趣的东西；

　　<iframe src="./star.html" name="iframe_a"></iframe>

    <p><a href="http://www.baidu.com" target="iframe_a">点击这里进入百度</a></p>

---------------------------------------------------------------------------------------------------------------------------

　　到这里基本的html标签就说的差不多了，后面碰到新的再学一下就ok了，下面我们来看一些其他的有趣的东西；

5.颜色

　　在页面上我们可以调整任意标签文字的颜色，只需要用css代码中声明一个color属性然后赋值就可以了，计算机中的任何颜色都可以由三种颜色 红，绿，蓝的组合得到，而且计算机中每种颜色都数值化以便我们进行调整，每种颜色的数值都是0到255，所以计算机中颜色共有255x255x255=1600多万种颜色，使用颜色有两种用法：一种是RGB表示，一种是颜色十六进制表示，我们随便看看这两种方式：

　　注意这个不用记，我们只需要用的时候去查颜色对照表就行了，或者自己慢慢调试到自己喜欢的颜色；

　　由于这两种形式颜色都不好记忆，于是就设计了一些英语单词和这些常用的颜色对应，我们可以直接用这些单词就好，比如red，green等，比较详细的可以看看菜鸟教程https://www.runoob.com/html/html-colornames.html，这里大概列举了一些颜色对应的英语单词。。。。

6.HTML脚本

　　什么叫做脚本呢？大白话说一下就是根据我们鼠标的点击，会动态的生成需要的html标签，页面就会发生变化了，这个脚本语言最常用的就是js，记住哦，js代码必须下载身体标签中的<script>标签中，我们随便看看一个例子：

　　可以看到堆出现这个弹窗，这是最简单的js脚本了，下面我们简单说说js脚本中一些其他的东西，建议自己去学一下js这个脚本语言（全称是javascript，注意，和java没什么鸟关系），很容易，就是一些数据类型，循环呀，函数什么的，可以说门槛极低，即使是零基础快的话几天应该也差不多了，要多用就可以了；

　　而且在脚本中，js脚本是基于事件的，说起来很抽象，什么是事件呢？举个很简单的例子：我们打开一个页面，只要我们的鼠标移动了或者点击了什么按钮，脚本都可以捕捉到这个变化，是不是很厉害，这个变化就是一个事件，根据这个事件我们可以添加一下特效，根据上面的例子修改一下，点击一下这个按钮就会出现弹窗；

<body>

    <button type="button" onclick="myFunction()">点我一下你就知道！</button>

    <script>

        function myFunction(){

            alert("hello,我是java小新人");

        }

        </script>

 </body>

------------------------------------------------------------------------------------------------------------------------------------------------------------------

 7.特殊符号

　　在html标签中有一些特殊符号是不能直接用的，为什么呢？看下面这个简单的例子，我想在页面上显示这样一句话：这里不是</button>点我一下你就知道！，然而当浏览器解析到第一个</button>标签就以为是结束标签，于是显示的结果和我们要额不一样下图所示！！！所以我们要对<、>等特殊符号做一些处理，防止这种情形发生；

<button type="button" onclick="myFunction()">这里不是</button>点我一下你就知道！</button>

　　我随便截了一下图，这个也不用记，用到的时候来查一下就可以了，我们直接用表中的实体名称来代替特殊符号即可：

　　修改后的代码和显示的结果为：

<button type="button" onclick="myFunction()">这里不是&lt;/button &gt;点我一下你就知道！</button>

8.URL路径

　　这个其实很容易，我们经常用www.baidu.com这种方式进行访问百度首页，那么这些单词代表什么意思呢？我们随便说一下，比如有一个URL为 http://www.runoob.com/html/html-tutorial.html ，对应的语法规则是：scheme://host.domain:port/path/filename，说明如下：

    • scheme - 定义因特网服务的类型。最常见的类型是 http
    • host - 定义域主机（http 的默认主机是 www）
    • domain - 定义因特网域名，比如 runoob.com
    • :port - 定义主机上的端口号（http 的默认端口号是 80）
    • path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
    • filename - 定义文档/资源的名称

　　新手看这个肯定看不懂，我就用大白话来说说：schema表示一些协议，或者叫做约束，其实就是两台电脑通信的约定规则，一般有如下几种；

　　host.domain一起看作是每台电脑上网的ip地址，port表示电脑通信的端口，path表示目标计算机的某个文件夹，filename表示该文件夹下确定的文件；

9.总结

　　看起来这么多，其实内容不多，就是一些最基本的html标签，记住html标签是浏览器内部去解析的，所有说到的标签总结：https://www.runoob.com/html/html-quicklist.html，除了这些标签之外我们还简单的使用的使用了一下CSS对标签内容进行渲染，并且用了一下简单的js脚本，其实一个网页做的怎么样，最重要的首先是布局（用的最多的是div标签），然后经过一些有艺术细胞的人用CSS进行渲染，再由js脚本弄出比较华丽的动态效果，于是一个看起来就很牛的页面就出来了。。。。。

　　当然后续会用到很多的前端框架，暂时也不熟悉就不瞎说了！

简单学习HTML的更多相关文章

  1. Log4j简单学习笔记

    log4j结构图: 结构图展现出了log4j的主结构.logger:表示记录器,即数据来源:appender:输出源,即输出方式(如:控制台.文件...)layout:输出布局 Logger机滤器:常 ...

  2. shiro简单学习的简单总结

    权限和我有很大渊源. 培训时候的最后一个项目是OA,权限那块却不知如何入手,最后以不是我写的那个模块应付面试. 最开始的是使用session装载用户登录信息,使用简单权限拦截器做到权限控制,利用资源文 ...

  3. CentOS 简单学习 firewalld的使用

    1. centos7 开始 使用firewalld 代替了 iptables 命令工具为 firewall-cmd 帮助信息非常长,简单放到文末 2. 简单使用 首先开启 httpd 一般都自带安装了 ...

  4. Windows 下 Docker 的简单学习使用过程之一 dockertoolbox

    1. Windows 下面运行 Docker 的两个主要工具1): Docker for Windows2): DockerToolbox区别:Docker For Windows 可以理解为是新一代 ...

  5. 在MVC中实现和网站不同服务器的批量文件下载以及NPOI下载数据到Excel的简单学习

    嘿嘿,我来啦,最近忙啦几天,使用MVC把应该实现的一些功能实现了,说起来做项目,实属感觉蛮好的,即可以学习新的东西,又可以增加自己之前知道的知识的巩固,不得不说是双丰收啊,其实这周来就开始面对下载在挣 ...

  6. Linux——帮助命令简单学习笔记

    Linux帮助命令简单学习笔记: 一: 命令名称:man 命令英文原意:manual 命令所在路径:/usr/bin/man 执行权限:所有用户 语法:man [命令或配置文件] 功能描述:获得帮助信 ...

  7. OI数学 简单学习笔记

    基本上只是整理了一下框架,具体的学习给出了个人认为比较好的博客的链接. PART1 数论部分 最大公约数 对于正整数x,y,最大的能同时整除它们的数称为最大公约数 常用的:\(lcm(x,y)=xy\ ...

  8. mongodb,redis简单学习

     2.mongodb安装配置简单学习                   配置好数据库路径就可以mongo命令执行交互操作了:先将服务器开起来:在开个cmd执行交互操作                 ...

  9. html css的简单学习（三）

    html css的简单学习(三) 前端开发工具:Dreamweaver.Hbuilder.WebStorm.Sublime.PhpStorm...=========================== ...

  10. html css的简单学习（二）

    html css的简单学习(二) <!Doctype html>告诉浏览器,这是一个html文档.lang="en" 默认是en,表示英语:zh-Hans 中文简体:z ...

随机推荐

  1. ASP.NET4.0中JavaScript脚本调用Web Service 方法

    环境:VS2019  .net 4.0 framework 根据教材使用ScriptManager在JavaScript中调用Web service 时,失败.现将过程和解决方法记录如下: 1.定义W ...

  2. js截取指定字符前面或后面的内容

    function getCaption(obj,state) { var index=obj.lastIndexOf("\-"); if(state==0){ obj=obj.su ...

  3. 小程序填坑——bindconfirm事件

    一.介绍 当你要在手机软键盘中触发一些方法,就可以使用input标签的bindconfirm事件.这个事件的作用是当你在软键盘上点击确认的时候,将触发你指定的方法. 还可以使用confirm-type ...

  4. AI: Web: 2 Vulnhub Walkthrough

    靶机下载链接: https://www.vulnhub.com/entry/ai-web-2,357 主机端口扫描: 尝试SQL注入,未发现有注入漏洞,就注册创建于一账户 http://10.10.2 ...

  5. 如何减小ABAP业务代码的复杂度

    在程序开发的过程中,相同的功能往往有不同的实现方式.对于可以实现同样功能的不同代码,复杂度是用于比较其质量优劣的重要指标. 在本文中,代码复杂度是指代码被理解/修改的难易程度.越容易被理解.修改的代码 ...

  6. （好文转载与总结）Windows10安装ubuntu18.04

    Windows10中安装Ubuntu,期间踩了非常多的坑,最终安装成功了,梳理下来Windows10装Ubuntu的步骤还是比较简明的. 制作Ubuntu系统U盘 Windows磁盘为新系统进行分区, ...

  7. SQLserver还原失败(数据库正在使用,无法获得对数据库的独占访问权)

    问题描述: Sql server还原失败(数据库正在使用,无法获得对数据库的独占访问权) 数据库还原的时候还有其他进程连在上面,导致无法获得独占造成的. 这个问题的原因在于有用户连接了当前要做还原的数 ...

  8. 灵魂拷问：创建 Java 字符串，用""还是构造函数

    在逛 programcreek 的时候,我发现了一些小而精悍的主题.比如说:创建 Java 字符串,用 "" 还是构造函数?像这类灵魂拷问的主题,非常值得深入地研究一下. 01.& ...

  9. Unity 声音处理 之 语音识别

    音量检测 检测当前麦克风的输入音量 using System.Collections; using System.Collections.Generic; using UnityEngine; usi ...

  10. 安装指定版本的tensorflow（我报错了）

    安装命令如下: pip install tensorflow-gpu==1.10.0 -i https://pypi.tuna.tsinghua.edu.cn/simple 慎用,反正我报错了,而且还 ...