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

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

智能推荐

Android MultiDex-程序员宅基地

文章浏览阅读51次。出现的原因：Android 5.0 之前版本的 Dalvik 可执行文件分包支持Android 5.0（API 级别 21）之前的平台版本使用 Dalvik 运行时来执行应用代码。默认情况下，Dalvik 限制应用的每个 APK 只能使用单个classes.dex字节码文件。要想绕过这一限制，您可以使用MultiDex，它会成为您的应用主要 DEX 文件的一部分，然后管理对其他 DE...

字符串的输入输出_字符串输入-程序员宅基地

文章浏览阅读2.5w次，点赞23次，收藏89次。字符串输入输出_字符串输入

【雕爷学编程】Arduino动手做（184）---体验各种小车轮子：极低成本搭建机器人的实验平台_arduino趣味小制作-程序员宅基地

文章浏览阅读2k次，点赞3次，收藏7次。因为轮子在自然界是有原型的。古代最简陋的乡村大车，用两个几乎一英尺厚的圆形木作车轮，是用横断的树干做成的，同时，这些圆形物，或者叫车轮，不是在轴上旋转，而是固定在轴上。当然，所有这些，无非是一种想象，但是，无论如何，它使我们的头脑完全清楚了车的本质。圆形的底盘，无法像普通小车那样采用平行车轴（电机轴也短），比较适合的是十字轴动力结构，百度查了下，这种结构很少见，不实用的结构，做做实验还行。初步的想法，是通过这个非常简单的底盘，学习机器人的行走机构，动手尝试不同的运动方式，实际测试各种形态的轮子系统。_arduino趣味小制作

F5 GTM DNS 知识点和实验 3 -加速dns解析_dns express-程序员宅基地

文章浏览阅读3.6k次，点赞3次，收藏15次。第三章：加速dns解析目标：了解一个请求是如何发送到一个dns资源池中的，并且了解如何监控资源池中成员的健康状态使用dns缓存对dns请求进行加速使用dns express进行对dns请求进行加速智能解析dns请求加速解析（dns express，dns cache，load balance dns queries）配置监听器3.1、Big-IP DNS解析过程wide ipdns expressdns cachedns resolving cache_dns express

【嵌入式】构建嵌入式Linux系统（uboot、内核、文件系统）_嵌入式linux引导程序操作模式是什么-程序员宅基地

文章浏览阅读3.1k次，点赞6次，收藏61次。内核是嵌入式Linux 系统的核心，负责管理系统的进程、内存、文件系统、网络和设备驱动等。如果把地球比作计算机系统，内核就是管理计算机资源的“政府”，内核中的每个功能模块相当于政府中的每个部门，如下图所示。从功能角度来看：系统调度进程管理负责管理CPU资源，以便让各个进程可以以尽量公平的方式访问CPU。进程管理还包括控制活动进程。内存管理Linux的成功和它优秀的内存管理联系非常密切，因为一个系统的高效性欲稳定性往往决定于它的内存管理机制。为了解决容量，Linux 引入了虚拟存储系统；_嵌入式linux引导程序操作模式是什么

JS高级——JSON、数据存储学习笔记-程序员宅基地

文章浏览阅读1.4k次。在目前的开发中，JSON是一种非常重要的数据格式，它并不是编程语言，而是一种可以在服务器和客户端之间传输的数据格式。JSON的全称是JavaScript Object Notation（JavaScript对象符号）：JSON是由Douglas Crockford构想和设计的一种轻量级资料交换格式，算是JavaScript的一个子集；但是虽然JSON被提出来的时候是主要应用JavaScript中，但是目前已经独立于编程语言，可以在各个编程语言中使用；很多编程语言都实现了将JSON转成对应模型的.

随便推点

HbuilderX运行打包项目时报node.exe: --openssl-legacy-provider is not allowed in NODE_OPTIONS的解决办法_hbuilderx\plugins\node\node.exe: --openssl-legacy--程序员宅基地

文章浏览阅读1.3w次，点赞8次，收藏10次。发现是可以打印出这个系统环境变量的，那就想办法把这个变量删除掉,可是想尽了办法也删不掉这个环境变量。在我的电脑—>右键属性–>高级系统设置—>环境变量，确实也没有这个变量了。最后还是新建了一个空的NODE_OPTIONS环境变量。最后把hbuilderx换成历史的版本同样存在此问题。后来记得原来在系统环境变量配置中经加过,系统环境变量。更新到v3.6.7 ALPHA版本也照常存在此错误。一直以为是版本的问题，把hbuilderx更换到。最新的正式版v3.6.4 此问题照常存在。_hbuilderx\plugins\node\node.exe: --openssl-legacy-provider is not allowed in