600字范文 > 一个程序猿必须掌握的HTML的常识

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

时间：2024-06-10 02:52:42

相关推荐

一个程序猿必须掌握的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="">点击跳转到百度</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="button" onclick="myrandom()"> //展示产生的随机数展示在控制台</form></body></html>

简单实现一个登录页面

代码

<html><head><meta charset="UTF-8"><title>登录页面</title><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><div style="margin-top: 100px;margin-left: 500px"><form id="form1" method="POST" action="/longin"><div>姓名: <input id="uname" name="username" type="text" placeholder="请输入姓名"></div><div>密码: <input id="pwd" name="password" type="password" placeholder="请输入密码"></div><div style="margin-left: 40px"><input value=" 提交 " type="button" onclick="subForm()">&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><script src="/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><div style="margin-top: 100px;margin-left: 500px"><form id="form1" method="POST" action="/longin"><div>姓名: <input id="uname" name="username" type="text" placeholder="请输入姓名"></div><div>密码: <input id="pwd" name="password" type="password" placeholder="请输入密码"></div><div style="margin-left: 40px"><input value=" 提交 " type="button" onclick="subForm()">&nbsp<input value=" 清空 " type="button" onclick="myClear() "></div></form></div></body></html>

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

当然也可以自己去w3school学习

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。