编程技术

Document

前端笔记：HTML学习笔记

一. 认识HTML

  • 讨论：学习编程到底难不难
    A. 1 * 5 = ?
    B. 111 * 555 = ?
    学习编程就是A->B的过程差距就是动手，不动手你学不会！

1. 了解软件架构

  • 网络系统软件开发包括B/S与C/S两种结构都可以进行同样的业务处理
    1. 什么是C/S
    2. C 客户端端 (client) / S 服务器 (server)
    3. 特点：
    • C/S软件通常需要特定的客户端来使用
    • 可以通过任意的协议进行通信
    • C/S软件的客户端有数据处理和存储的能力，可以把应用软件的计算和数据分配在客服端和服务器端。
    1. 什么是B/S
    2. B 浏览器 (browser) / S 服务器 (server)
    3. 特点：
    • B/S软件不需要特定的客户端。
    • 和服务器进行通信使用HTTP协议。
    • 它将所有的数据都存储在服务器上。
    1. B/S软件的优缺点
    2. B/S结构相比C/S结构哦使用起来比较方便，不需要下载特定的客户端。
    3. B/S结构维护、升级更方便。
    4. 成本低，不用开发特定的客户端。
    5. 数据相对安全，因为已经存储在服务器上。
    6. 应用服务器运行数据复合较重。
  • 网站的功能已经彻底改革，从“静态内容”的展示转向“动态内容”的传递
    1. 静态网站
      用户只能在网页中浏览不能做任何的数据性交换
      图片 img/01.png
    2. 动态网站
    3. 采用的数据库的开发模式
    4. 图片 img/02.png

1.HTTP协议

  1. 超文本传输协议（Hyper Text Transfer Protocol）。
  2. 互联网上应用最广泛的一种网络协议。
  3. 设计HTTP的目的就是为了提供一种发布和接收HTML页面的方法。
  4. HTTP就是用于从服务器传输超文本到本地浏览器的传输协议。
  • HTTP协议的简单工作过程
    1. 浏览器首先通过网络访问服务器80端口和服务器建立连接。
    2. 浏览器像服务器发送请求命令，并将自己的一些信息发送给浏览器，这些信息不明确显示出来。
  • 发送请求时，HTTP协议可以通过多种方法进行请求的发送。
    • GET方法：用来请求、访问已经被URL标识的资源。我们在地址栏中输入的内容，默认使用GET方式传输。
  1. 服务器收到客户端发送的请求以后，服务器会回应客户端发送的请求。
  2. 返回的状态码：
  • 200 表示成功
  • 403 访问被拒绝
  • 404 页面没找到
  1. 关闭客户端和服务器之间的连接。

2.URL

  • 我们在浏览器的地址栏路面输入的网站地址就叫做URL（uniform resource locator）统一资源定位符

3.域名

  • 域名就是一个名字，主要用来方便记忆服务器地址    127.0.0.1  www.lmonkey.com    jd.com  so.com

4.常看到的协议

  • https://  带有安全套接的协议  传输是加密的。
  • ftp:// 文件传输协议。
  • file:/// 本地文件协议

5. 小练习

https://www.lmonkey.com:8181/index/page/java.html?p=pname&u=username&pwd=abc

https://  协议

www.lmonkey.com  域名

:8181  端口

index/目录

page/目录

java.html  文件

？表示传入的参数

p  参数名

= 参数值 pname

& 表示继续传入参数。

6. 动态网站开发所需要的构件

  1. 客户端浏览器
  • 浏览器是万维网服务的客户端浏览程序，可以向万维网（world wide web）服务器发送各种请求，并对服务器发来的超文本信息和各种多媒体数据进行解释、显示和播放。
  • 浏览器就是指显示网页服务器或者文件系统HTML文件内容，并让用户与这些文件交互的一种软件。网页浏览器主要通过HTTP协议和指定URL地址与网页服务器交互获取网页。
  • 五大浏览器分类：
    • IE
    • CHROME  谷歌浏览器
    • FIREFOX   火狐浏览器
    • SAFARI      苹果浏览器
    • OPERA      欧朋浏览器
  1. 超文本标记语言HTML（Hyper Text Markup Language）
  • 超文本： 不仅可以加入文字的文本文件，还可以加入链接、图片、声音、动画、影视等内容
  • 标记语言：是在纯文本文件里面包含了HTML指令代码。这些指令代码并不是一种程序语言，它只是一种排版网页中资料显示位置的标记结构语言。
  1. 层叠样式表CSS
  • 主要作用
  1. 增强网页样式信息
  2. 实现样式信息与代码分离
  3. 客户端脚本编程语言JavaScript
  4. 在客户这一端执行的脚本语言。
    2. 专为网页交互而设计的脚本语言
    • 文档对象模型(DOM),提供访问和操作网页内容的方法和接口。
    • 浏览器对象模型(BOM),提供与浏览器交互的方法和接口。
  5. web服务器
  6. 主要功能是提供网上信息浏览服务。
    2. 目前web服务器有很多，常用的有：APACHE、IIS、TOMCAT、gws(谷歌)、Nginx等。
    3. APACHE：充满补丁的服务器软件，由NCSAhttpd服务器经过多次修改而得来的。
    4. Nginx:是一个很强大的高性能web服务器。是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru站点开发的
  7. 服务器端脚本编程语言
  8. 常用的服务器端脚本编程语言：PHP、JSP、ASP
  9. PHP是一种创建动态交互性站点强有力得服务器脚本语言，免费，并且使用广泛。
  10. 数据库管理系统
  11. MySQL数据库：开源免费。

2. 了解HTML发展路程

  • 1993年，IETF发布HTML1.0版本(Internet工程任务组)。
  • 1995年，W3C接管，发布HTML2.0版本(表格布局)。
  • 1996年，w3c发布HTML3.2版本。
  • 1997年，W3C发布HTML4.0版本。
  • 1999年，W3C发布HTML4.01版本(最终使用版)。
    • 线路1：XHTML版本（严格版本）
      • 2000年，W3C发布XHTML1.0版本。
      • 2001年，W3C发布XHTML1.1版本。
    • 线路2：HTML5版本（所有浏览器厂商一起研发）
  • 2004年，WHATWG 发布了HTML5草案
  • 2004~2008年，W3C和WHATWG
  • ？现今为止HTML5依旧没有发布(2019 HTML、2020 HTML)

3. HTML5到底是怎么

  • HTML5标签 + CSS3 + JavaScript + API ≈ HTML5

4. 如何创建HTML文件

  1. 文档的命名规则
    • 不允许使用特殊字符
    • 可以以中文命名，但是不推荐使用中文。
    • HTML文件名推荐使用小写。girl.html
    • 注意：如果创建完HTML文件后依然是文本文件格式，那么需要将系统里隐藏已知文件扩展名勾选掉

5. HTML标签相关

1. HTML标签

标签是HTML的最基本单位，也是最重要的组成部分，通常使用两个角括号括起来的"<"和“>”.
  • 标签有两种形式：
    1. 成对标签(双标签)
<p>内容</p>
  1. 不成对标签(单标签)
<hr />

2.  HTML标签大小写问题

  • 标签大小写无关，与表示意思一样。HTML标签推荐使用小写

3. HTML标签属性

  1. HTML属性一般都出现在HTML标签中，是HTML标签的一部分。
  2. 标签可以有属性，包含了额外的信息，属性的值一定要在双引号中。而且标签还可以存在多个属性。
  3. 一般属性由属性名和属性值成对出现：
  4. 语法：<标签名 属性名1=“属性值” 属性名2=“属性值”></标签名>

4. HTML颜色值得设置

  1. 浏览器支持颜色名称集合，颜色值是一个关键字或者一个RGB格式的数字，在网页中都用的很多。
  2. 使用英文单词作为颜色值：
    • red 红色 | green 绿色 | blue 蓝色 | pink | purple
  3. 六位的十六进制颜色值：  R G B
    • #00f    # 00 00 ff
    • 前两位表示红色，中间两位表示绿色，最后两位表示蓝色

5.HTML注释

  1. 注释的好处
  • 方便查找、比对、方便其他程序员快速了解你的代码，方便以后自己对自己代码的理解和修改。
  • 注释的内容不会被浏览器解析出来
  • 格式：
<!--书写注释的内容-->

6.HTML代码格式

  • 任何回车或者空格在源代码中都不起作用，所以在编写HTML代码时，都可以使用回车或者空格进行代码排版，这样可以使代码清晰偏于团队合作、必须保持严格的缩进规则，缩进以tab键为准

7. HTML实体字符

&nbsp; 空格
&lt; <
&gt; >
&copy; 版权符号

二. HTML主体结构

<!DOCTYPE html>
<html>
    <head></head>
    <body></body>
</html>
  1. 最顶部声明
    • 声明是文档的第一成份，位于文档的最顶部。
    • 该白浅告诉浏览器所使用的HTML规范。(H5的规范，所有浏览器都兼容的)
  2. 以开始，以结束，中间包含头部标签及主体标签

三. head标签中常用的标签

<head lang="en">
     <!--
	lang是language的意思,lang="en" 属性对页面声明主要语言，en表示英文，zh-cn表示中文。
	搜索引擎不会判断该站点是中文还是英文，它让搜索引擎知道你得站点是中文站，这些都是HTML规范，越规范，越容易被收录
	-->
    <title></title> 设置网页标题
    <meta /> 是对页面的描述
    <meta charset="utf-8" /> 设置页面字符集  HTML5
    <!--http-equiv 告知浏览器的行为-->
    <meta http-equiv="content-type" cotent="text/html;charset=utf-8" />  HTML4设置页面字符集的方式
    <meta http-equiv="refresh" content="3;url=http://www.lmonkey.com" /> 告知浏览器3S后跳转到学习猿地
    <meta http-equiv="refresh" content="3" />  告知浏览器3S后刷新一次
    <!--name 告知浏览器的内容-->
    <meta name="keywors" content="关键字,关键字,多个关键字使用英文状态下的逗号分隔"/> 设置网站关键字
    <meta name="description" content="描述的内容" />
    <link /> 定义两个文档之间连接的关系
    <link rel="icon" type="image/png" href="./img/WechatIMG259.png"/>  设置网页标题图标
    	<!--
			rel = 表示文档与被连接文档之间的关系
			type = 被连接文档的类型
			href = "被连接文档的地址"
		-->
    <link rel="stylesheet" type="text/css" href="css.css"/>  加载CSS文件
    <style></style>  加载CSS样式
    <script></script>  加载JS样式
    
   	<!--阻止移动浏览器自动调整页面大小-->
	<meta name="viewport" content="initial-scale=2.0,width=device-width" />
    <!--
        name = "viewport" 说明此meta标签定义视口的属性
        initial-scale = 2.0 意思是将页面放大两倍
        width = device-width 告诉浏览器页面的宽度的能与设备的宽度
    -->
    <meta name="viewport" content="width=device-width,maximun-scale=3,minimum-scale=0.5" />
    <!--允许用户将页面最大放大至设备宽度3倍，最小压缩至设备宽度的一半-->
    <meta name="viewport" content="initial-scale=1.0,user-scalable=no" />
    <!--禁止用户缩放，可以在混合APP时，为了使html页面更逼真，使页面无法缩放。user-scalable=no是禁止缩放-->
</head>

四. HTML常用标签

1. 文本与文本格式标签

<p></p>段落标签 <!--特点：与上行文本和下行文本之间间隔一行-->
	<!--
		align 控制内容方向。取值：left 默认居左、center 居中、right 居右
		title 设置标题
	-->
<b></b>加粗标签
	<!--
		物理标签：b代表的意思bold  加粗的意思   html
	-->
<strong></strong> 强调某段文本效果是加粗
	<!--
		逻辑标记： 强调的意思    xhtml
	-->
<i></i> 定义斜体
<em></em>  强调某段文本 效果斜体
<br/> 换行标签
<hr/> 水平线标签 
<!--
	属性：align:水平对齐方式，默认是居中。
	width:水平线的长度，百分比及像素都可以。 
	size:水平线的高度。
	color:水平线的颜色
-->
<u></u> 下划线标签
<hn></hn>  <h1>~<h6> 标签定义标题，H1字体最大，H5字体最小。
    <!--h族标签只有h1到h6标签。没有H7标签-->
<bdo></bdo> 覆盖默认的文本方向。属性：dir=ltr/rtl ltr表示left to right 从左到右
<sub></sub>  定义下标文本
<sup></sup>  定义上标文本
<details></details> 标签是交互式的控件，定义元素的细节
<summary></summary> 为details标签定义标题
<dialog></dialog> 定义对话框或者窗口 在chrome浏览器中需要设置属性open="true"才支持

<pre></pre>原格式输出标签  注意:如果编辑器中显示的效果和浏览器中的效果不一样，需要用记事本打开代码重新调试
<figure></figure> 用于对元素进行组合，多用于图片与图片描述组合
<mark></mark>标记文本，呈现加背景色
<small></small>定义小号字体
<ins></ins> 定义插入字  ins全写insert插入的意思

2. 语义化标签

<div></div>无意义的块级元素
<span></span> 无意义的行内元素
<header></header>定义网页头部
<footer></footer>定义网页底部
<nav></nav>定义网页导航
<aside></aside>定义网页侧边栏
<section></section>定义一个区块
<article></article>定义独立内容
<address></address>定义地址

3.列表标签

<ul></ul> 定义无序列表
	<!--
		type 规定在列表中使用的标记类型
			disc  默认实心圆
			circle  空心圆
			none  符号不显示
			square 小方块
	-->
<ol></ol> 定义有序列表
	<!--
		reversed 倒叙
		start  规定有序列表的起始值
		type 规定在列表中使用的标记类型
			1  表示项目用数字标号(1,2,3……)
			a  表示项目用小写字母标号
			A  表示项目用大写字母标号
			i  表示项目用小写罗马数字标号
			I  表示项目用大写的罗马数字标号
	-->
<li></li> 用于ul或者ol中定义列表项
<dl></dl> 定义一个定义列表
<dt></dt>标签定义一个定义列表中的一个项目以及dialog中角色
<dd></dd>标签定义一个定义列表中对项目的描述

4. 超链接标签

<a></a> 定义超链接。
	常用属性：
	target: 窗口的打开方式
		取值：_blank 在新窗口中打开被链接的文档。
			_self默认。在当前窗口中打开链接的文档。
			_top   在框架顶部打开被链接的文档(在整个窗口中打开被链接的文档)
	href: 用于从一个页面链接到另一个页面。记录需要跳转的地址

	对于路径而言：
	相对路径
		相对于自己来进行查找，在跳转时不需要添加协议。
		./  当前目录
		../  上一级目录
	绝对路径
		绝对路径要从根开始进行查找，需要添加对应的协议。

使用<a></a>标签来定义锚点。作用，快速找到页面中需要的位置。
锚点的实现：
	1.需要再快读找到的位置定义一个a标签，a标签中添加id属性，属性名自定义。
	2.在要跳转的a标签href属性的最后添加#后面跟锚点的名称来实现快速定位。
邮件链接跳转
	href="mailto:要发送人的邮箱地址?cc=抄送的人&bcc=密送的人&subject=邮件的主题&body=邮件的主体"

5. 多媒体标签

<progress></progress> 进度条标签
	需要配合属性：
	min 最小值
	max 最大值
	value  当前值
<meter></meter> 定义范围内的度量
	需要配合属性：
	min 最小值
	max 最大值
	low 优化的最小值  警告的最小值
	high 警告的最大值
	optimum 良好值
	value 当前值
<img /> 标签定义图像
	src= 图像路径
	注意：如果图片的路径是绝对路径，那么必须加上协议。
	width 设置图像宽度
	height 设置图像高度
	注意：图像的宽度和高度如何同时设置，那么图像会强制压缩，如果只设置图像的高度或者只设置图像的宽度，那么图像会将设置的高度或者宽度压缩为指定设置的值，另外一端会等比例缩放。
	ismap  将点击的坐标传送到服务器
	usemap 图像定义为客户端图像映射
	图像映射指的是带有可点击区域的图像
	映射实现：
		usemap属性值与<map></map>标签的name属性进行关联。以建立img和map标签之间的关系。
<map></map>  定义客户端图像映射
	属性：name属性，属性值自定义，然后在img标签中usemap属性值通过#来查找对应name的属性值。
<area />  定义图像映射中的区域
	shape  定义区域的形状
		取值：rect 矩形    circle 圆	poly 多边形 default 整张图  
	coords 定义区域的坐标值
		矩形： 左上角坐标和右下角坐标
		圆形：需要设置圆形点和半径
		多边形：自定义坐标点。
	href 点击区域跳转的位置
	target  打开的方式

<audio></audio>  加载音频
	autoplay 自动播放
	controls 播放控件 必加
	src 声音地址
	loop 循环播放
	preload 提前加载准备播放
<video></video>   加载视频
	src 视频地址
	controls 播放控件
	height 视频高度
	width 视频宽度
	poster 定义视频在点击播放前显示的图像
	autoplay 自动播放
<embed />   加载多媒体
	width 
	height
	src
	type 文件的mime类型
<source />   定义媒介资源
	src 媒介的地址
	type 媒体的类型

6. 表格标签

<table></table> 定义表格
	border:设置表格的边框
	align：设置表格相对于浏览器的水平位置  left   center  right
	width: 设置表格的宽度
	height:设置表格的高度
	background:设置表格的背景图片
	bgcolor:设置表格的背景颜色
	bordercolor:设置表格边框颜色
	cellspacing: 单元格之间的间距
	cellpadding:单元格内容与单元格边界的间距
<caption></caption> 定义表格的标题
<tr></tr>定义表格中的一行
	height:设置行高
	align:行内容的水平对齐方式 取值：left  center  right
	valign：行内容的垂直对齐方式  取值：top   middle  bottom
	bgcolor:行的背景颜色
<td></td>定义表格中的一个单元格
	width / height 设置宽高
	align 设置水平对齐方式 取值 left  center right
	valign 设置垂直对齐方式  取值 top middle bottom
	bgcolor 单元格的背景色
	colspan 设置单元格跨列
	rowspan 设置单元格跨行
<th></th> 定义表格内的表头单元格
<thead></thead> 设置表格的头部
<tbody></tbody>	设置表格的主体内容
<tfoot></tfoot>	设置表格的低部

五. HTML表单相关标签及属性

1.表单相关标签

<form></form> 用于为用户输入创建HTML表单
	<!--必须属性-->
	action -- 浏览者输入数据被传送到的地方，比如一个PHP页面
	method -- 数据传送的方式
		get -- 此方式传递数据量少，但是传递的信息显示在网址上。
		post -- 此方式传递信息多，而且不会把传递的信息显示在网址上。
<input />为用户定义需要使用的表单项
	<!--必须属性-->
	name -- 定义此表单项的名称。
	value -- 定义此表单项的默认值。
	type -- 代表一个输入域的显示方式(分为：输入型、选择型、点击型)
	type的取值：
	type = "text" 普通文本域
	type = "password" 密码域
	type = "radio" 单选  注意：如果要实现单选name属性名称必须一致才会产生排斥效果
	type = "checkbox"  复选框 多选框 注意：name名称后面必须加中括号  比如 name="hobby[]"代表一组
	type = "file" 文件选取表单
	type = "reset"  重置按钮 清空表单信息还原默认状态
	type = "hidden"  代表隐藏域，可以传送一些隐藏的信息到服务器中
	type = "image" 使用图片来显示提交按钮，使用src属性指定图片的位置。类似于img标签。
	type = "button" 普通按钮(给JS使用)
	type = "submit" 提交按钮，把信息传送到服务器，可以使用value属性来显示提交按钮上的文字信息
form把表单相关标签	
<button></button> 提交按钮(可以实现提交)
<button type="submit"></button> 提交按钮
<button type="button"></button>没有意义的按钮

<label></label> 为input元素定义标注(绑定元素)
实现绑定元素
	1：直接将内容和input标签包含在一块。
	2.在label标签中定义一个for属性，在input标签定义一个id属性，两个属性值相同即可实现关联。
<textarea></textarea> 多行文本输入域
	name 为多行文本输入域定义名称
	rows 定义多行文本输入域默认显示的行数
	cols 定义多行文本输入域默认显示的列数
	注意：textarea没有value属性，获取的只就是两个标签中间的内容。
<select></select> 定义下拉列表
	name 为该下拉列表定义名称
<option></option> 为下拉列表定义列表项
	value 为该列表项定义默认值
	注意：如果列表项中没有设置value属性，那么点击提交时，将获取option标签中间的内容。如果设置了value属性，将获取value属性设置的值。
<optgroup></optgroup> 为下拉列表定义分组
	label 定义分组的名称。
<fieldset></fieldset> 将表单内的相关元素进行分组
<legend></legend>为fieldset定义分组的标题
<datalist></datalist> 定义可选数列表
将可选数据列表与普通文本域进行关联
	1.在datalist标签中定义id属性
	2.在文本域中定义list属性，属性值指定id的属性值即可实现关联。
注意：列表项依然使用<option></option>来定义。

表单分离技术
	为了排版方便，在H5中表单标签允许脱离form表单之外，但是要实现提交需要做2件事。
	1.为form标签添加id属性，属性值自定义。
	2.为需要提交的元素添加form属性，属性值指定id的属性值即可实现提交。

新增的表单类型 type值等于：
	date 	日期选取表单
	time	时间选取表单
	week	周选取表单
	month	月份选取表单
	datetime-local  完整日期
	email 设定当前表单的验证方式是email邮件验证
	url 设定当前表单的验证方式是url方式
	number 设定当前表单的验证方式是数值验证	 可以使用min 和 max 
	range 设定当前表单的验证方式必须在指定的范围内  需要配合属性 min max
	search 设定当前表单为搜索表单
	color 设定表单为颜色选取
	tel 设定标签为电话号表单

2.表单相关属性

1. checked 实现单选框和复选框的默认选种
2. selected 为下拉列表定义默认选中项 用于option标签中。
3. min 用于设定表单的最小值 (适用于数值类型的表单 number range)
4. max 用于设定表单的最大值  (适用于数值类型的表单 number range)
5. readonly 只读 输入域可以选择，但是无法修改
6. disabled 禁用 输入域无法获取焦点，无法选择，以灰色显示
7. autofocus 自动获取焦点属性
8. placeholder 表单信息提示，用于代替表单中显示某人之需要使用value的情况，placeholder取代了value属性的显示提示信息的功能，并且不会随着提交而提交数据。
9. required 用于强制用户必须为该表单赋值，否则提示信息。
10.multiple 设定当前表单允许同时选中多个。适用于input[type=file]
	注意：如果实现多选，那么必须在name属性名后加[] 代表是一组。
11.pattern 用于自定义验证规则（需要配合正则的语法）
	[a-z] 表示只允许出现一个字符并且该字符必须在a-z之间任意一个(区分大小写)
12.step 设定跳过的数值或者设定2个数值之间的间隔(数值表单中)
13.novalidate 取消表单验证  适用于form标签中 取消所有表单项的验证
14.formaction 用于在提交按钮中修改当前表单的提交页面
15.formmethod 用于在提交按钮中修改当前表单的提交方式
16.formenctype  用于在提交按钮中修改当前表单的提交数据编码类型(一般不用，文件上传时使用)
17.formnovalidate 用于在提交按钮中取消当前表单验证
18.tabindex tab键切换索引属性

3.HTML全局属性

  1. contentEditable 内容可编辑属性
  • 设定该属性的内容允许在页面中直接修改。
  • 页面中修改只是临时修改，如果需要长期修改，需要以后学习JS和AJAX等技术配合
  1. designMode 页面可编辑属性(标签无法使用，只能JS用)
    注意：当前属性不是任何标签的属性，而是文档的属性。如果文档设置该属性为on，那么页面中所有的元素均可编辑。
<script>
    document.designMode = 'on';
</script>

4. HTML框架标签

<iframe></iframe> 在页面中开一块空间链接一个子页面。
	src 引入子页面的地址
	width 设置宽度
	height 设置高度
<frameset></frameset>代表body标签定义框架页，并且定义框架页将分为多少行或者多少列
	cols 定义框架页含有多少列与列的大小(每个值使用逗号分隔，值为像素或者百分比)
	rows 定义框架页含有多少行与行的大小
<frame /> 定义frameset标签中每个框架页的内容
	src 定义内容的地址
	name 为每一个框架页定义名称(在一个框架页链接到另一个框架页时使用)