html效果展示前端基本HTML

Introduction

HTML 是一种描述网页措辞，指的是超文本标记措辞 (Hyper Text Markup Language)。
个中，超文本指的是网页上可以包含图片，视频，连接信息。
标记也叫做标签，以是标签书写的是<内容>。
措辞便是一种互换工具，HTML 是用户与浏览器之间交互工具。

大略说，HTML 是由浏览器解析实行的，它不会将 HTML 标签展示出来，而是会解析 HTML 标签，以特定效果展示出来。

SyntaxHTML 可以直策应用文本编辑器来编写HTML 文件它的后缀名是 .htm 或 .html<html> 标签它代表当前页面是一个 HTML<head> 标签中可以声明 HTML 页面的干系信息<body> 标签中它紧张是用于显示页面信息标签要有开始，有结束。
开始标签与结束标签中的内容是标签的内容，如果没有标签内容，可以让标签自关闭 <br/>。
大多数标签它具有属性，属性值要利用引号引起来。
HTML 本身是不区分大小写的。

<html> <head>HEAD</head> <body>BODY</body></html>Tools

可以利用 JetBrains WebStorm 或者 VS Code 进行开拓。

（图片来自网络侵删）

HTML Tags文件标签

<html> 代表当前书写的是一个 HTML 文档

<head> 存储的本页面的一些主要的信息，它不会显示

标签下有一个子标签 <title> 它是用于定义页面的标题的

<body> 书写的内容会显示出来，属性：1. text 用于设置笔墨颜色；2. bgcolor 用于设置页面的背景色；3. background 用于设置页面的背景图片

排版标签HTML 注释

<br/> 标签

br 标签便是一个换行功能标签

<p> 标签

在 p 标签中的内容会在开始与结束之间产生一个空缺行并且它会自动换行

常用属性 align 的浸染是设置段落中的内容对齐办法，可取值有 left right center

<hr> 标签

hr 标签会在页面上产生一个水平线

常用属性：

align：可取值有 left right center 代表水平线位置

size：代表水平线高度（厚度）

width：代表水平线宽度

color：水平线的颜色

关于 HTML 中标签属性

两种办法:

直接设置值，默认单位是 px （像素） <HR WIDTH="200">可以设置百分比 <HR WIDTH="35%"><div> 标签

Div 是一个块标签

Div 与 CSS 结合，会更好对页面进行排版

<span> 标签

Span 标签也是一个块标签Div 与 span 差异：Div 会自动换行，我们也叫这样的标签为行级元素Span 标签它不会自动换行，我们也叫它为行内元素

字体标签<font> 标签

Font 标签可以设置字体，字的大小及颜色

常用属性：

Face：用于设置字体，例如宋体隶书楷体

Size：用于设置字的大小

Color：用于设置字的颜色

我们所看到的屏幕上所有的颜色都是由红、绿、蓝这三种基色调稠浊而成的。
每一种颜色的饱和度和透明度都是可以变革的，用 0～255 的数值来表示。
如纯赤色表示为 (255，0，0)，十六进制表示为 #FF0000。
按这种表达办法，理论上我们可以得到 256 256 256=16777216 种颜色。
利用十六进制办法，取值范围 #000000 ~ #FFFFFF （玄色到白色）。
当颜色值为 #cc3300 时，也可以利用 #c30 这种简化的办法来表示。
RGB 颜色表示法：RGB(x,y,z)，x、y、z 是 0 ～ 255 之间的整数。
在线颜色选择器：http://www.86y.org/code/colorpicker/color.html
标题标记
<h1> 最大 <h6> 最小，它们代表的是标题，可以利用 <b> <i> 对笔墨设置加粗或倾斜
把稳：在 HTML 中许可标签进行嵌套的，但是一样平常都包裹嵌套，而不可以进行交叉嵌套
清单标记（列表标记）
有序清单：
<ol type="I" start="3"> <li>张三</li> <li>李四</li> <li>王五</li></ol><ul type="square"> <li>Java</li> <li>Python</li> <li>C#</li></ul>图形标签
<img> 可以让我们在网页引入一张图片
常用属性
src 代表的图片的路径width 图片的宽度height 图片的高度border 用于设置图片的边框alt 如果图片不可以显示时，默认显示的文本信息align 图片附件笔墨的对齐办法，取值有：left right middle top bottom超连接标签
<a> 标签可以实现跳转到其它页面操作。
超链接内容不仅可以是文本，也可以是图片等信息
常用属性
href 代表的要跳转的路径name 属性可以在本页面设置一个锚点target 这个属性规定在何处打开这个链接文档，可取值：_blank _self _parent _top framename表格标签
<table border="2" align="center" width="400px"> <caption>学天生就单</caption> <tr> <th>姓名</th> <th>语文成绩</th> <th>数学成绩</th> <td colspan="2" align="center"><b>操作</b></td> </tr> <tr align="center"> <td>张三</td> <td>99</td> <td>100</td> <td>修正</td> <td>删除</td> </tr> <tr align="center"> <td>李四</td> <td>90</td> <td>66</td> <td>修正</td> <td>删除</td> </tr></table>表单标签
通过表单可以将要提交的数据提交到指定的位置
<form name="form1" action="user/login" method="POST"> <table border="1" width="64%" align="center"> <tr> <td>用户名：</td> <td> <input type="text" name="username"> </td> </tr> <tr> <td>密码：</td> <td> <input type="password" name="password"> </td> </tr> <tr> <td>性别：</td> <td> <input type="radio" name="sex" checked="checked">男 <input type="radio" name="sex" >女 </td> </tr> <tr> <td>地址：</td> <td> <select name="province"> <option value="0">--请选择省--</option> <option value="10001">广东</option> <option value="10002">上海</option> <option value="10003">山东</option> </select> 省 <select name="city"> <option>--请选择市--</option> <option value="1000301">广州市</option> <option>深圳市</option> <option>东莞市</option> </select> 市 </td> </tr> <tr> <td>编程措辞：</td> <td> <input type="checkbox" name="language" checked="checked">Java <input type="checkbox" name="language">Python <input type="checkbox" name="language">Go </td> </tr> <tr> <td>照片：</td> <td> <input type="file" name="image"> </td> </tr> <tr> <td>自我介绍：</td> <td> <textarea name="remark" rows="5" cols="100"></textarea> </td> </tr> <tr> <td colspan="2" align="center"> <input type="submit" value="注册"> <input type="reset" value="取消"> </td> </tr> </table></form>框架标签
通过框架标签可以定制 HTML 页面布局
在 HTML 页面上去描述框架信息时，不可以将 <frameset> 写在 <body> 标签中
framesetTest.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>HTML 框架标签</title> </head>  <frameset rows="100, , 100"> <frame name="topModule" src="./top.html"></frame> <frameset cols="100, "> <frame name="menuModule" src="./menu.html"></frame> <frame name="contentModule" src="./content.html"></frame> </frameset> <frame name="footModule" src="./foot.html"></frame> </frameset></html>
top.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>top</title> </head> <body> <div>头部信息</div> </body></html>
foot.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>footL</title> </head> <body> <div>底部信息</div> </body></html>
menu.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>menu</title> </head> <body> <div>菜单信息</div> </body></html>
content.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>content</title> </head> <body> <div>内容显示区</div> </body></html>其它标签与分外字符<meta> 标签
<meta> 标签必须写在 <head> 标签之间
它可以对页面进行描述及热词设置，可以方便搜索引擎查找页面通过 meta 标签设置 http 相应信息通过 meta 标签可以设置页面的编码，<meta http-equiv="Content-Type" content="text/html; charset=gbk">通过 meta 标签来设置页面加载后在指定的韶光后跳转到指定的页面，<meta http-equiv="refresh" content="5; url=http://www.baidu.com"><link>标签
利用 link 标签来导入 CSS
分外字符
详情查看菜鸟教程：https://www.runoob.com/charsets/ref-html-ascii.html
HTML DOMIntroduction
DOM, Document Object Model -- 文档工具模型，是 HTML 和 XML 文档的编程接口，以树构造表达 HTML 文档。
DOM 是 W3C（万维网同盟）的标准。
DOM 定义了访问 HTML 和 XML 文档的标准。
W3C DOM 标准被分为 3 个不同的部分：
核心 DOM - 针对任何构造化文档的标准模型XML DOM - 针对 XML 文档的标准模型HTML DOM - 针对 HTML 文档的标准模型DOM Node
DOM 是被视为节点树的 HTML。
根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：
全体文档是一个文档节点每个 HTML 元素是元素节点HTML 元素内的文本是文本节点每个 HTML 属性是属性节点注释是注释节点
HTML DOM 将 HTML 文档视作树构造，这种构造被称为节点树。
节点树中的节点彼此拥有层级关系。
常用父（parent）、子（child）和同胞（sibling）等术语来描述这些关系。
父节点拥有子节点。
同级的子节点被称为同胞（兄弟或姐妹）。
在节点树中，顶端节点被称为根（root）。
每个节点都有父节点、除了根（它没有父节点）。
一个节点可拥有任意数量的子节点。
同胞是拥有相同父节点的节点。
DOM 方法 & 属性
HTML DOM 方法是可以在节点（HTML 元素）上实行的动作。
HTML DOM 属性是可以在节点（HTML 元素）设置和修正的值。
可通过 JavaScript （以及其他编程措辞）对 HTML DOM 进行访问。
所有 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>DOM</title> </head> <body> <div id="div1"> <p id="p1">Hello</p> <p id="p2">Hello</p> </div> <script> // 先获取 P 元素 var element = document.getElementById("p1") // 直接修正 p 元素的内容 element.innerHTML = "此时已是修正后的内容" // 修正 p2 标签的样式 var ele = document.getElementById("p2") ele.style.color="blue" ele.style.fontFamily="宋体" ele.style.fontSize="larger" // 添加元素 // 创建一个p元素 var elementP = document.createElement("p") // 创建一个内容 var nodeText = document.createTextNode("新加的 P 元素") // 把笔墨内容添加到p元素中 elementP.appendChild(nodeText) // 把新创建的p元素添加div1元素中 var div1 = document.getElementById("div1") div1.appendChild(elementP) // 插入添加新的元素 // 创建一个新的元素 var eleP = document.createElement("p") // 创建一个内容 var noText = document.createTextNode("在 P1 元素前添加的新元素") // 把笔墨内容添加到 p 元素中 eleP.appendChild(noText) // 把新创建的 p 元素添加 div 1 元素中 var parentDiv1 = document.getElementById("div1") // 获取指定被添加的元素 var p1 = document.getElementById("p1") // 在元素前添加；参数解释：1.要添加的元素；2.在那个元素之前添加（指定一个元素） parentDiv1.insertBefore(eleP, p1) // 删除元素 // 获取父元素 var pdiv1 = document.getElementById("div1") var removep1 = document.getElementById("p1") // 利用父元素删除该元素 pdiv1.removeChild(removep1) </script> </body></html>DOM 事宜
HTML DOM 许可 JavaScript 对 HTML 事宜作出反应。
当事宜发生时，可以实行 JavaScript，比如发生用户点击一个 HTML 元素的事宜。
如需在用户点击某个元素时实行代码，可以把 JavaScript 代码添加到 HTML 事宜属性中：onclick=JavaScript
HTML 事宜的例子：
当用户点击鼠标时当网页已加载时当图片已加载时当鼠标移动到元素上时当输入字段被改变时当 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>DOM 事宜</title>  <script> function onLoadFun(){ alert("已载入..."); } // 文本框失落去焦点事宜 function onBlurFun(){ alert("此方法是文本框失落去焦点事宜，用来校验此文本框输入数据的") } // 表单被提交时实行事宜 function onSubmitFun(){ alert("此表单已提交，这个方法也可以来作为数据校验的"); } // 元素被改变时触发事宜 function onChangeFun(){ alert("文本框元素已输入新的数据") } // 当鼠标悬停在某一个元素上时实行的方法 function onMouseOverFun(element){ element.innerHTML = "鼠标已停在H1元素上了" } // 当鼠标离开某一个元素时实行事宜 function onMouseOutFun(element){ element.innerHTML = "鼠标已离开H1元素上了..." } </script> </head>  <body onload="onLoadFun()">  <form onsubmit="onSubmitFun()"> 用户名：<input id="username" name="username" onchange="onChangeFun()" > <br/> <button type="submit">提交</button> </form>  <h1 onmouseover="onMouseOverFun(this)" onmouseout="onMouseOutFun(this)">我是一个标题</h1> </body></html>
想理解更多，欢迎关注我的微信公众年夜众号：Renda_Zhang