简单学习HTML

时间 2019-12-05

标签简单学习 html 栏目 HTML 繁體版

原文原文链接

　　最近忽然就对静态页面颇有兴趣，主要是看到几个比较酷炫的页面效果，也想本身作一下，可是个人前端页面就是菜鸡，还停留在html+css+jquery的简单使用上，并且还忘记得差很少了！javascript

　　并且我感受前端比后端麻烦一点，多是我没有什么审美吧，本身作的页面老是很丑陋，哈哈哈！就记录一下学习html的过程吧！学习主要是参考菜鸟教程，连接：https://www.runoob.com/html/html-tutorial.html css

1.EditPlus编辑器的简单使用html

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

　选择适合本身的编辑器，这里推荐几个，能够自行下载：java

Notepad++：https://notepad-plus-plus.org/
Sublime Text：http://www.sublimetext.com/
VS Code：https://code.visualstudio.com/

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

　　下面咱们就简单说说这个编辑器经常使用的用法，点击下面这个地方：后端

　　　几个经常使用的设置，咱们如今重点看看代码自动补全，后期能够根据咱们的须要设置文件模板；浏览器

　　随意看看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脚本弄出比较华丽的动态效果，因而一个看起来就很牛的页面就出来了。。。。。

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