HTML/CSS/JS 在线工具可以在线编辑 HTML、CSS、JS 代码，并实时查看效果,编译器的话可以用VScode
学习规划：
今天开始准备系统的学习前端的知识点，首先准备一个周的时间学完HTML+CSS
- html学习方法：先在网络上找关键字总结，根据菜鸟教程查缺补漏，然后。
- 后期训练+成果验收：学完 HTML 和CSS开始时间，随便打开一个网页，对着葫芦画瓢，自己写一个和它类似的（实现的过程中如果想要参考其他的网页的代码的话，单机右键——查看页面源代码）
标签简写以及全称
html属性
HTML 元素可以设置属性，属性可以在元素中添加附加信息，一般描述于开始标签
属性总是以名称/值对的形式出现，比如：name=“value”（注意 “ ” ）。 大多数 HTML
元素的属性：class、id、style、title
HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：
<a href="http://www.runoob.com">这是一个链接</a>
html标签总结
1，基础标签
基础标签是必须全部掌握的，因为在每个html网页中几乎都可以看到他们的身影。
<!DOCTYPE> 定义文档类型。请始终向 HTML 文档添加 <!DOCTYPE> 声明
这样浏览器才能获知文档类型。
<html> 定义 HTML 文档。
<head> 定义关于文档的信息。可以添加在头部区域的元素标签为:
<title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>
<noscript> 元素用来定义在脚本未被执行时的替代内容（文本）
<link> 标签定义了文档与外部资源之间的关系。通常用于链接到样式表
<link rel="stylesheet" type="text/css" href="/html/csstest1.css" >
href：规定被链接文档的位置。rel：规定当前文档与被链接文档之间的关系。
type：规定被链接文档的 MIME 类型。
<meta> 定义关于 HTML 文档的元信息。中文网页需要使用 <meta charset="utf-8">
<base> - 定义了所有链接的URL
<title> 定义文档的标题。
<body> 定义文档的主体。
<h1> 一级标题
<h2> 二级标题
<h3> 三级标题（最小的是<h6>）
<p> 定义段落。
<!--这里写注释的内容--> 定义注释
2，格式标签
格式标签现在用的不是很多，因为现在样式修饰都交给css去做了。
<hr> 创建水平线。
<br> 定义换行 <pre>可以保留输入时的格式 空行空格之类的
<b> <strong>定义粗体文本。
<del> 删除文本。<ins> 插入文本 blue red!
<i> 、<em>定义斜体文本。
<sup> 上标 <sub> 下标
<small>小号字 <big>大号字
<bdo dir="rtl"> 显示文字的方向（右向左）
<u> 下划线
<code>计算机代码
<abbr> （缩写）<abbr title="World Health Organization">WHO</abbr>
<address> （联系信息）
<bdo> （文字方向）
<blockquote> （从另一个源引用的部分）
<cite> （工作的名称）
<font> 规定文本的字体、字体尺寸、字体颜色
<font size="5" face="arial" color="red">A paragraph.</font>
3，多媒体链接
<img> 定义图像。<img loading="lazy" src="URL"
alt="替换文本" height="42" width="42"style="float:left" >
loading中eager默认，图像立即加载 lazy图像延迟加载，只有鼠标滚动到该图片所在位置才会显示
<canvas> 定义图形。
<audio> 定义声音
<video> 定义视频
<a> 定义超链接 <a href="default.htm" target="_blank"> 也可创建图片链接
<a href="#C4"> <h2><a id="C4"> 链接到指定位置、href：规定被链接文档的位置
target四种选择_blank、_parent、_self、_top
<link> 定义文档与外部资源的关系。
<address> 标签定义文档作者/所有者的联系信息。（一般和链接连用）
4，列表
<ul> 定义无序列表。<ol> 定义有序列表（type="A"）
<li> 定义列表的项目。
<dl> 定义定义列表。<dt> 定义定义列表中的项目。<dd> 定义定义列表中项目的描述。
5，表单
<form> 定义供用户输入的 HTML 表单。
<input> 定义输入控件。属性非常多，也很常用，详情请查阅手册。
<textarea> 定义多行的文本输入控件。
<button> 定义按钮。
<select> 定义选择列表（下拉列表）。
<option> 定义选择列表中的选项。
<label> 定义 input 元素的标注。
<datalist> 定义下拉列表。
<form>
Password: <input type="password" name="pwd">
</form>
单选按钮radio、复选框checkboxes
name 属性规定 input 元素的名称，用于对提交到服务器后的表单数据进行标识
value是初始值之类的、关联值、文本值之类的
6，表格
<table> 定义表格
<caption> 定义表格标题。
<thead> 定义表格中的表头内容。
<tbody> 定义表格中的主体内容。
<tfoot> 定义表格中的表注内容（脚注）。
<th> 定义表格中的表头单元格。
<tr> 定义表格中的行。
<td> 定义表格中的单元。
表格在现在的网站中用的倒不是很多了。
7，其他常用标签
<div> 定义文档中的节 块级元素（<h1>, <p>, <ul>, <table>）。
<span> 定义文档中的节 内联元素（<b>, <td>, <a>, <img>）。
<Iframe> 定义文档的内联框架。一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。
<style> 定义文档的样式信息。
<script> 定义文档中的脚本信息
<base> 定义页面中所有链接的默认地址或默认目标。
以下标签为html5新增的语义化标签
<header> 定义 section 或 page 的页眉。
<footer> 定义 section 或 page 的页脚
<section> 定义 section。
<article> 定义文章。
<aside> 定义页面内容之外的内容。
注意：html5新标签不被ie浏览器识别问题
需要引入html5shiv包，使用条件注释解决
<!--[if lte IE 8]>
<script src="libs/html5shiv/html5shiv.js"></script>
<![endif]-->
通过看视频补充的一些知识
- jQuery 是一个 封装JavaScript 的库
- 单标签的养成习惯 写闭合标签< br/ >，tab键可以在IDE里面补全标签
-一些特殊符号用&来表示，比如说  ；空格的意思 ©版权符号；
(在IDE里面，打出&会有提示)- meta标签
- img路径/属性
提到一个方法，在项目中习惯把资源放到一个resources的目录下，这个就是把照片放到了resource/img/1.ipg
其次，一般的文件目录都是相对目录（绝对目录右键单击资源可以生成path），相对路径的表示如下图所示
img标签的属性在IDE上写的时候会有提示，所以属性不用死记硬背
- 链接标签
绝对 URL - 指向另一个站点（比如 href="http://www.example.com/index.htm"）
相对 URL - 指向站点内的某个文件（href="index.htm"）
锚 URL - 指向页面中的锚（href="#top"）
锚链接
可以跳到另一个页面的某一个位置
功能性链接
- 表格
跨行跨列要协调好元素（不然可能表格就突出去了）
- 视频与音频
- 页面结构分析
- iframe内联框架
内联框架简单来说就是简单的来说就是在一个网页上划分出一块区域，在这块区域中再显示另一个网页的内容
表单（重点掌握）
input必须要有一个name属性
checkbox和radio必须要有一个value属性（name属性必须是一样的）
- 表单格式、文本框、密码框
- action属性的值是url，代表提交之后，页面会跳转的那个位置
- method 属性（get、post）规定如何发送表单数据，可以作为 URL 变量（method=“get”）或者 HTTP post （method=“post”）的方式来发送
- input的属性
type属性：（text、password、button、reset、submit、radio、checkbox、image、file、hidden、email、url、number、range、search）
name属性：规定 input 元素的名称,只有设置了 name 属性的表单元素才能在提交表单时传递它们的值，radio中的name属性必须是一样（因为单选必须以组为单位，只有yi样的name标识才能确定一个组），checkbox的name标识可以不一样
value属性：checkbox和radio中必须设置属性（相关联的值）- textarea（文本域）、select（下拉框）
- 按钮
（下边这个语句中的按钮还无法跳转，需要用js来写）
image也是一个提交按钮
- 下拉框、文本域、文件域
- 带验证的操作
- 表单初级验证（就是初步筛选输入内容的合理性placeholder、required、pattern）
- 表单的应用（hidden、readonly、disabled）
readonly(只读，无法输入更改)
checked——初始默认选项 disabled——该项无法选择
hidden将表单隐藏
默认值value
表单验证完整代码如下
3291
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
