一个程序猿必须掌握的HTML的常识

首先什么是HTML

HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言，无需编译，浏览器可以直接识别和执行
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面
HTML不能进行逻辑执行（如：if语句，for循环等）

注意：HTML标签是由尖括号括起来的词，如，。标签通常成对出现，例如和。
一对中的第一个标签是开始标签;第二个标签是结束标签。如是开始标签，而是结束标签，我们还可以将开始标签称为起始标签，结束标签称为闭合标签。HTML文档结构至少要包括head, body两部分

前端：

HTML（超文本传输语言）

**1.**以<>作为基础的表达式，描述语言，HTML文档结构至少要包括head, body两部分
head表示头部信息

可以引用外部资源（如：CSS，JS(JavaScript)）
标题的设置
设置页面（编码格式……）

body表示主题内容

绘制的具体页面内容

<html><head></head><body></body>
</html>

2.在body中写入内容
注意：一定要设置编码格式，否则会出现中文乱码

<body><meta charset="UTF-8">欢迎来到Java~</body>

结果展示

**3.**使用title设置标题
注意：一定要设置编码格式，否则会出现中文乱码

<head><meta charset="UTF-8"><title>我是一个html页面</title></head>

结果展示

4.创建超链接
href表示点击跳转到目标地址

<body><a href="https://www.baidu.com">点击跳转到百度</a></body>

结果显示

5.换行操作

6.图片标签
如：将桌面的html.png图片放入这个html当中
单行标签，并且src要传入参数你的图片地址在哪里

    <body><img src="html.png"></body>

结果展示

6.标题标签< h1>…< h6>越往下小

    <body><h1>我是标题一</h1><h2>我是标题二</h2><h3>我是标题三</h3><h4>我是标题四</h4><h5>我是标题五</h5><h6>我是标题六</h6></body>

结果展示

7.表单 form（提交数据）和input标签（可以是文本框，密码框，按钮……）

    <body><form method="get" action="/login">姓名：<input name="username" type="text"><br>密码：<input name="password" type="text"><br><input value=" 提  交 " type="submit"></form></body>

显示结果

js的计本操作

<html>
<head><meta charset="UTF-8">
<title>我是一个html页面</title><script>//使用js代码输出html标签//document.writeln("<h1>我是标题一</h1>>");//使用for循环输出html的六个标签// for (var i=1;i < 7;i++){//     document.writeln("<h"+i+">我是标题"+i+"</h"+i+">");// }// function myalert() {//     alert("你好我是弹窗")// }// function myalert(name) {//     alert("你好："+name)// }function myrandom() {//产生一个随机数//表示会产生一个0~1的随机数//Math.random()//表示会产生一个0~9的随机数///var num = Math.random()*10;//产生一个整数的随机数// var nums = parseInt(Math.random()*10);//表示将产生的随机数弹窗//alert(num)//表示将产生的随机数展示在控制台，相当于Java中的system.out.println//console.log(nums);//if语句和Java的几乎没有什么差别// if(nums > 5){//     alert("数字比较大")// }else {//     alert("数字比较小")// }//方法一：通过id操作html元素，比如写一个将下面的id="div1"中的”我叫div~“变成”你好，世界~“//document.getElementById("div1").innerHTML = "<h1>你好，世界~</h1>>"//方法二：通过name修改,因为那么可能相同，所以要指定第几个那么document.getElementsByName("divname")[0].innerHTML = "<h1>你好，世界~</h1>>"}</script>
</head>
<div id="div1" name="divname">
我叫div~
</div>
<body>
<form method="get" action="/login">姓名: <input name="username" type="text"><br>密码: <input name="password" type="text"><br><!--<input value=" 提 交 " type="submit"><br>--><!--<input value=" 提 交2 " type="button" onclick="javascript:alert(111)">//方法一，直接写入alert--><!--<input value=" 提 交3 " type="button" onclick="myalert()">//方法二，自己写一个弹窗的方法--><!--<input value=" 提 交4 " type="button" onclick="myalert('我是弹窗')"> //自己写一个带有参数的弹窗方法--><input value=" 提 交 " type="button" onclick="myrandom()">  //展示产生的随机数展示在控制台
</form>
</body>
</html>

简单实现一个登录页面

代码

<html>
<head><meta charset="UTF-8"><title>登录页面</title><!--给所有的div设置相同的样式--><style>div{/*比如让每一个div距离底部相距10px*/margin-bottom: 10px;}</style><script>/*** 首先理解id和那么的区别？* 1.id（身份证）只能有一个，而name（姓名）可以重名多个* 2.getElementByID(xxx)->拿到的就是一个元素* 3.getElementByName(xxx)->拿到的就是一组元素** id是给（前端）js使用的  而name是给（后端）表单使用的**/function subForm() {//首先对表单中的必填字段（姓名和密码）做非空校验//那么首先得拿到值才能进行判断 ，所以给他们都起一个id，虽然那么也可以拿到，但是需要用数组var name = document.getElementById("uname").value;var pwd = document.getElementById("pwd").value;//虽然这个能够判断姓名是否为空，但是客户端也可以输入空格，所以为了这种情况呢，需要使用trimif(name.trim()===""){alert("请先输入姓名");//光标回执大输入的控件上，也就是当提示你输入姓名的时候，你点击确认之后，光标就会回到姓名框里面，然后就可以很方便的继续输入,使用focusdocument.getElementById("uname").focus();//如果没有输入姓名的话，后面的逻辑就不要执行了return false;}else if(pwd.trim()===""){alert("请先输入密码");document.getElementById("pwd").focus();return false;}//然后实现一个提交form表单，同样也需要给form标定定义一个id,然后使用submit进行提交document.getElementById("form1").submit();}//写一个清空表单的方法，也就是清空输入的姓名和密码function myClear() {//首先得先拿到姓名和密码,然后让他们的value等于null就是清空了document.getElementById("uname").value = "";document.getElementById("pwd").value = "";}</script>
</head><body>
<!--可以使用css来美化页面，也就是在div里面调整style,margin-top表示距离顶部多大距离;margin-left表示距离左边多大距离-->
<div style="margin-top: 100px;margin-left: 500px">
<form id="form1" method="POST" action="/longin"><!--为了是登录姓名，密码和提交按钮不离的那么近，我们可以将它们分别放在div里面--><div><!--我们可以使用placeholder来提示用户，让他在这里输入姓名-->姓名: <input id="uname" name="username" type="text" placeholder="请输入姓名"></div><div><!--因为密码不能够是单纯的数字，所以我们需要将他的type换成pawwword类型的-->密码: <input id="pwd" name="password" type="password" placeholder="请输入密码"></div><div style="margin-left: 40px"><!--我们可以让提交按钮也剧中，就是在div里面设置它的style--><input value=" 提 交 " type="button" onclick="subForm()"><!--我们可以使用&nbsp提交按钮和清空按钮离一个空格那么远-->&nbsp<!--写一个清空方法，也就是当你输入的姓名或者密码错误时，你可以点击清空，然后就可以清空所有内容，然后重新输入--><input value=" 清 空 " type="button" onclick="myClear() "></div></form>
</div>
</body>
</html>

输入姓名和密码之后点击提交
展示效果

原生JS存在两个问题：
1.原生JS写法比较繁琐
2.不同的浏览器对应不同的厂商，不同的厂商对于JS写法的支持是不一样的，兼容性非常差（对于早期的浏览器）所以我们使用jQuery，jQuery本质上是js库（插件），作用是方便操作HTML，方便写JS

下面实现一个jQuery版的登录页面

<html>
<head><meta charset="UTF-8">
<title>我是一个html页面</title><!--引入外部jQuery ，只需要将外部jQuery的地址传给src就可--><script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script><script>function myjQuery() {//用户名的非空校验//如何拿到name属性呢？使用jQuery，然后前面加上#，就可拿到用户输入的姓名了var name = jQuery("#uname").value;//然后对用户输入的内容进行判断if(name.value().trim()===""){alert("请先输入姓名");//将光标移动到输入的姓名控件上name.focus;//如果没有输入，那么就没有必要往下执行了，直接返回falsereturn false;}//密码非空校验var pwd = jQuery("#pwd");if(pwd.value().trim() === ""){alert("请先输入密码")pwd.focus();return false;}//提交form表单jQuery("#form1").submit();}//清空表单function myClear() {jQuery("#uname").value("");jQuery("#pwd").value("");}</script>
</head>
<body>
<!--可以使用css来美化页面，也就是在div里面调整style,margin-top表示距离顶部多大距离;margin-left表示距离左边多大距离-->
<div style="margin-top: 100px;margin-left: 500px"><form id="form1" method="POST" action="/longin"><!--为了是登录姓名，密码和提交按钮不离的那么近，我们可以将它们分别放在div里面--><div><!--我们可以使用placeholder来提示用户，让他在这里输入姓名-->姓名: <input id="uname" name="username" type="text" placeholder="请输入姓名"></div><div><!--因为密码不能够是单纯的数字，所以我们需要将他的type换成pawwword类型的-->密码: <input id="pwd" name="password" type="password" placeholder="请输入密码"></div><div style="margin-left: 40px"><!--我们可以让提交按钮也剧中，就是在div里面设置它的style--><input value=" 提 交 " type="button" onclick="subForm()"><!--我们可以使用&nbsp提交按钮和清空按钮离一个空格那么远-->&nbsp<!--写一个清空方法，也就是当你输入的姓名或者密码错误时，你可以点击清空，然后就可以清空所有内容，然后重新输入--><input value=" 清 空 " type="button" onclick="myClear() "></div></form>
</div>
</body>
</html>

如果想要了解更多关于html，推荐一个大佬文章

当然也可以自己去w3school学习