前端基础:HTML
Introduction
HTML 是一种描述网页语言, 指的是超文本标记语言 (Hyper Text Markup Language)。其中,超文本指的是网页上可以包含图片,视频,连接信息。标记也叫做标签,所以标签书写的是<内容>。语言就是一种交流工具,HTML 是用户与浏览器之间交互工具。
简单说,HTML 是由浏览器解析执行的,它不会将 HTML 标签展示出来,而是会解析 HTML 标签,以特定效果展示出来。
Syntax
- HTML 可以直接使用文本编辑器来编写
- 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 中允许标签进行嵌套的,但是一般都包裹嵌套,而不可以进行交叉嵌套
清单标记(列表标记)
有序清单:
<!-- 有序列表 I II III-->
<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>
<!-- rows 定义了三行:第一行 100 像素,第三行:100 像素;第二行:剩下的像素 -->
<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 DOM
Introduction
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>
<!-- JavaScript 代码必须写在 script 中 -->
<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 标签元素,当鼠标移动到 H1 元素上时,修改文字,当鼠标移出元素时执行事件 -->
<h1 onmouseover="onMouseOverFun(this)" onmouseout="onMouseOutFun(this)">我是一个标题</h1>
</body>
</html>
- SignalR 在IE中无法工作 - Internet Explorer
- SQL Server 2012 中的 Service Broker功能的一些改进或增强
- 通用日志
- 数据包络分析教程
- 用JAVA的DEA算法衡量社交媒体页面的流行度
- 如何构建智能反垃圾邮件的WordPress插件
- 【深入研究】使用RNN预测股票价格系列一
- 【深入研究】使用RNN预测股票价格系列二
- 教你用一行Python代码实现并行(附代码)
- 在美国国会图书馆标题表的SKOS上运行Apache Spark GraphX算法
- 【精选】破解波动性突破实盘系统
- 从程序员的角度看神经网络的激活功能
- 在线矩阵微积分工具,可以生成 Python/Latex 代码哦!
- 机器学习应用区块链系列(一)——如何开发一套自己的智能合约系统
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- centos6.5通过yum安装nginx
- Linux系统利用cp命令实现强制覆盖功能的方法
- leetcode队列之设计循环双端队列
- Centos7学习之添加用户和用户组的方法
- Linux静态库与动态库实例详解
- Linux字符终端如何用鼠标移动一个红色矩形详解
- Linux中出现“No space left on device”错误的排查与解决方法
- 浏览器是如何调度进程和线程的?
- Linux shell利用sed如何批量更改文件名详解
- linux下通过xinetd服务管理 rsync 实现开机自启动
- linux实现自动删除最旧的几个文件详解
- 基于Ubuntu 16.04设置固定IP的方法教程
- CentOS添加和删除用户以及用户组的方法
- Linux下使用inode删除指定文件方法示例
- Apache虚拟目录配置及vue-cli反向代理的设置方法