HTML和JavaScript学习笔记_"<html> <head> <title>my web</title> <script langu-程序员宅基地

本文仅为自己web基础的学习笔记，无其他任何用处，学习路线和内容引自Y4师傅（@Y4tacker）文章

HTML

常规元素（双标签）

<标签名>内容</标签名>   
<body>  我是文字  </body>
还有<html><head><title><body><table><tr><td><span><p><form><h1><h2><h3><h4><h5><h6><object><style><b><u><strong><i><div><a><script><center>

对于尖括号使用

&lt; <
&gt; >

空元素（单标签）

<标签名 />
<br />

在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。
即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。

还有 hr, img, input, param, meta, link

标签功能：
基本
<html>…</html>      定义 HTML 文档
<head>…</head>      文档的信息
<meta>              HTML 文档的元信息
<title>…</title>    文档的标题
<link>              文档与外部资源的关系
<style>…</style>    文档的样式信息
<body>…</body>      可见的页面内容
<!--…-->            注释

文本
<h1>...</h1>           小（h1~h6）
<b>...</b>             粗体字
<strong>...</strong>   粗体字(强调) 
<i>...</i>             斜体字 
<em>...</em>           斜体字(强调)
<center>…</center>     居中文本
<ul>…</ul>             无序列表 
<ol>…</ol>             有序列表
<li>…</li>             列表项目
<a href="…">…</a>      超链接
<font>                 定义文本字体尺寸、颜色、大小、
<sub>                  下标
<sup>                  上标
<br>                   换行
<p>                    段落

图形
<img src="...">	       定义图像
<hr>                   水平线
 
表格
<table>…</table>      定义表格     
<th>…</th>            定义表格中的表头单元格
<tr>…</tr>            定义表格中的行
<td>…</td>            定义表格中的单元

其它
<form>…</form>        定义供用户输入的 HTML 表单
<frame>               定义框架集的窗口或框架

另加16进制颜色，但仅仅有16种颜色名可用英文字母，其余的要用16进制值。 

aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow

input标签

首先先来说说html input标签的属性：
1.type：
该属性是input标签里唯一的必须输入的属性，当然，也可以不填，默认为type = "text"。具体它有那些值，我们后面再讨论。

2.required：
标记一个字段是否为必须。如果一个字段被标记为required = "required"（严格模式下），或者required（宽松模式下）(ps：下面属性的写法同理，就不一一写出了)，并且这个字段的值为空，或者填入的值是无效值，那么这个表单不能提交。什么是无效值？看pattern属性。

3.pattern：该属性包含了一个JavaScript风格的正则表达式，输入的内容必须完全匹配该正则表达式，不然就算输入的内容无效。对正则表达式不了解？可以去看看JavaScript 正则表达式。

4.min max：这两个属性用于日期date时间time等输入，还有number和range。顾名思义，它们的作用是限制最大值，最小值。

5.step：和max min类似，作用是提供一个可以上下点的按钮，比如当前数字是1，你设置了step = "5"，点一下上的按钮，就变成6了。

6.placeholder：该属性不多说，大家应该都很熟悉，一般是用来提示用户输入的，当用户真的输入了文字之后，会被输入的文字覆盖。

7.readonly：顾名思义，该属性会让表单空控件不可编辑。这里的不可编辑不是禁用，只是不能编辑文本而已，比如像单选框radio，复选框checkbox这种，本来就是不可编辑的，所以这个属性对它们来说毫无意义。

8.disabled：该属性会禁用一个表单元素。这里是禁用，完全禁用掉除了<output>之外的所有表单元素。

9.maxlength ：该属性用于限制用户输入的最大字数限制。

10.size：已经没什么时候实际的作用了，控制大小现在几乎都是由CSS控制了。

11.form：在HTML5中，表单控件已经没有必要嵌套在一个表单中，新的form属性可以把表单元素与页面上的任意的表单关联起来。也可以被嵌套在一个表单中，随着另一个表单提交，代码如下：

<form id="form1"></form>
<p>
<label for="admin">admin</label>
<input type="text" id="admin" form="form1"/>
</p>

这样，就把form和input联系起来了。如果input没有form属性，那么，它将被关联到离他最近的form表单。

12.autocomplete：顾名思义，自动完成，用户输入一部分，后面的自动补全。需要浏览器保存用户输入的内容，以便下一次自动补全。

13.autofocus：该属性指的是表示这个表单控件在页面载入的时候自动获得焦点。

以上就是html input标签的属性了。

Input类型:
1.color: 在input字段主要用于选取颜色
选择你喜欢的颜色: <input type="color" name="favcolor">

2.date: 允许你从一个日期选择器选择一个日期
生日: <input type="date" name="bday">

3.datatime: 允许你选择一个日期（UTC 时间）
生日 (日期和时间): <input type="datetime" name="bdaytime">

4.datetime-local: 允许你选择一个日期和时间 (无时区)
生日 (日期和时间): <input type="datetime-local" name="bdaytime">

5.email: 用于应该包含 e-mail 地址的输入域
E-mail: <input type="email" name="email">

6.month: 允许你选择一个月份
生日 (月和年): <input type="month" name="bdaymonth">

7.number: 用于应该包含数值的输入域
数量 ( 1 到 5 之间 ): <input type="number" name="quantity" min="1" max="5">

8.range: 用于应该包含一定范围内数字值的输入域, range 类型显示为滑动条。
使用下面的属性来规定对数字类型的限定：
max - 规定允许的最大值
min - 规定允许的最小值
step - 规定合法的数字间隔
value - 规定默认值
<input type="range" name="points" min="1" max="10">

9.search: 用于搜索域，比如站点搜索或 Google 搜索。
Search Google: <input type="search" name="googlesearch">

10.tel: 定义输入电话号码字段
电话号码: <input type="tel" name="usrtel">

11.time: 允许你选择一个时间。
选择时间: <input type="time" name="usr_time">

12.url: 用于应该包含 URL 地址的输入域。
在提交表单时，会自动验证 url 域的值。
添加您的主页: <input type="url" name="homepage">

JavaScript正则表达式

深入理解HTML表单

文档类型

文档类型 <!DOCTYPE>的基本介绍:

首先是在html中长啥样

<!DOCTYPE html>

作用：
<!DOCTYPE> 声明位于文档中的最前面的位置，处于标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

HTML文件必须加上DOCTYPE声明

接下来会看到这个东西：（一般默认）

<html lang="en">  指定html的语言种类

我们给出其中最为常见的2个：

en定义语言为英语
zh-CN定义语言为中文

字符集

<meta charset="UTF-8" />
1
字符集(Character set)简单来说就是多个字符的集合。
计算机要准确的处理各种字符集文字，需要进行字符编码，以便计算机能够识别和存储各种文字。

HTML常用标签

标题标签(head)

<h1> 标题1 </h1>
...
<h6> 标题6 </h6>

段落标签(paragraph)

<p> 文本内容 </p>

水平线标签(horizontal)

<hr />

换行标签(break)

<br />

div和span标签

<div>aaa</div> 用来布局,一行一个div
<span>vv</span><span>dd</span> 一行多个span

标签属性:
如果想让HTML标签提供更多的信息，可以使用HTML标签的属性加以设置。

<标签名 属性1="属性值1" 属性2="属性值2" ...> 内容 </标签名>

图像标签 img

<img src="图像URL" /> URL可以是网络地址,也可以是本地地址

该语法中src属性用于指定图像文件的路径和文件名，是img标签的必需属性, 不然会报错, XSS漏洞的一种利用类型就是在图片加载错误时用onerror触发js代码.

表单标签 form

<form method="get">
<input class="xssr_in" type="text" maxlength="20" name="message">
<input class="xssr_submit" type="submit" name="submit" value="submit">
</form>

表单一般用于规定提交方法

链接标签

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

属性名称	作用
href	用于指定链接目标的url地址，实现超链接的功能
target	用于指定链接页面的打开方式，其取值有_self和_blank最常见的两种，其中_self为默认值，如果设置则为当前窗口，__blank为在新窗口中打开

注释标签

<!-- 注释语句 --> 快捷键时 ctrl+/ 或者ctrl+shift+/

相对路径

以引用文件之网页所在位置为参考基础，而建立出的目录路径。因此，当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同，故称之为相对路径。

路径分类	符号	说明
同一级路径	无	只需输入图像文件的名称即可，如`<img src="aq.jpg" />`
下一级路径	`/`	图像文件位于HTML文件同级文件夹下（例如文件夹名称为：images）如`<img src="images/aq.jpg" />`
上一级路径	`../`	在文件名之前加入`../` ，如果是上两级，则需要使用 “…/ …/”，以此类推，如`<img src="../aq.jpg" />`;

目录跳转

基本框架

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h3>研究历史</h3>
    <h3

本文链接：https://blog.csdn.net/qq_45758851/article/details/113771349

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

Hadoop+大数据的学习资料+实际项目+hadoop源码（中英双语）_hadoop大数据平台构建与应用米洪案例源码-程序员宅基地

文章浏览阅读703次，点赞2次，收藏3次。链接：https://pan.baidu.com/s/12l62pcm1ix0UgwKLb576aQ提取码：dcde喜欢点个赞_hadoop大数据平台构建与应用米洪案例源码

Go协程的底层原理（图文详解）

Go程序开发进阶保姆级教程，结合源码对Go协程的底层原理进行图文详解（为什么要有协程、协程的本质、协程是如何执行的、G-M-P调度模型、如何实现协程的并发、协程的抢占式调度）

aes解密流程图_（转）AES 加密算法的原理详解-程序员宅基地

文章浏览阅读1.9k次。(转)AES 加密算法的原理详解原文链接如下：AES简介高级加密标准(AES,Advanced Encryption Standard)为最常见的对称加密算法(微信小程序加密传输就是用这个加密算法的)。对称加密算法也就是加密和解密用相同的密钥，具体的加密流程如下图：下面简单介绍下各个部分的作用与意义：明文P没有经过加密的数据。密钥K用来加密明文的密码，在对称加密算法中，加密与解密的密钥是相同的。密..._aes cbc 原理图

Android如何使用XML自定义属性

在res/values文件下定义一个attrs.xml文件，代码如下:在布局中使用，示例代码如下：

Java OCR tesseract 图像智能字符识别技术 Java代码实现_tesocr jave-程序员宅基地

文章浏览阅读10w+次，点赞173次，收藏149次。接着上一篇OCR所说的，上一篇给大家介绍了tesseract 在命令行的简单用法，当然了要继承到我们的程序中，还是需要代码实现的，下面给大家分享下java实现的例子。拿代码扫描上面的图片，然后输出结果。主要思想就是利用Java调用系统任务。下面是核心代码：package com.zhy.test;import java.io.BufferedReader;import_tesocr jave

我用Python分析了1500家电商的销售数据，竟发现了进口车厘子的秘密_爬虫淘宝车厘子-程序员宅基地

文章浏览阅读519次，点赞2次，收藏2次。图片来源：互联网众所周知，中国是智利车厘子最主要的出口对象，占据了其95%的市场份额。智利驻华大使馆商务参赞娜塔曾表示：“2020-2021产季车厘子实现了丰收，预计今年有50万吨左右的车厘子进入中国市场。”自2020年12月中旬开始，智利海运车厘子陆续到达中国，运输成本较此前空运方式大幅下滑。这意味着，国内消费者将能以更低的价格买到车厘子。然而，近日国内已有多地进口车厘子核酸检测结果为阳性，在这种情况下，你还敢大呼“车厘子自由”吗？01 数据获取本文利用Python采集了淘宝网1585.._爬虫淘宝车厘子

随便推点

javaScript | 练习：给出一个数组，用循环遍历数组找出数组中的最大值和最小值如：给出数组 let arr = [3, 6, 4, 8, 11, 90, 1]_遍历一个数组并找出数组中的最大值和最小值js使用for循环-程序员宅基地

文章浏览阅读365次，点赞9次，收藏6次。最后，使用 `document.write()` 方法将计算出的最小值和最大值输出到网页上，并通过 `` 标签换行，以便清晰地显示两个不同的结果。- 接着，初始化了两个变量 `min` 和 `max`，它们分别用来存储数组中的最小值和最大值。初始值都设为数组的第一个元素 `arr[0]`。` 结构来分别比较当前遍历到的元素是否为数组中的最小值和最大值，并据此更新 `min` 和 `max` 变量。- 首先，使用 `new Array()` 创建了一个新的数组 `arr` 并初始化了其中的元素。_遍历一个数组并找出数组中的最大值和最小值js使用for循环