HTML CSS JS 小总结
HTML
超文本标记语言：用超链接方法将各种不同空间的文字信息组合在一起的网状文本；HTML是超文本最常用的格式。
超链接：通过超链接将不同网页链接在一起构成网站；链接对象有文本、图片等，对链接对象进行点击或其他操作时，浏览器会根据链接目标的类型来运行或打开链接目标。
标签：html代码用标签标记文本，标签有单有双。
元素：元素=标签+标签里的内容，元素以开始标签开始，以结束标签结束，元素内容是开始标签和结束标签之间的内容，元素大多数拥有属性。
<!DOCTYPE html> <!--声明文档为 HTML5 文档 -->
<html lang="en"><!-- <html>包含头部head 和身体body，lang属性=en表示用英文显示，zn表示中文-->
<head>
<meta charset="UTF-8"><!--mate 提供html文档元数据 charset属性表示编码格式用UTF-8 ，属性内容用单引号或双引号括起来 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title><!--title设置网页标题的标签 -->
</head>
<body>
你好，2022 <!--这是html注释，在这里的内容不会显示在页面里，注释全部采用英文半角符-->
</body>
</html>
常用标签：
<hn></hn>标题标签：设置文章标题，共6个，从h1到h6字体逐渐变小，新标题会重开一行
<p></p>段落标签：将网页分为若干段落，新段落重开一行写。
<br><br/>换行标签
<hr>或<hr/>水平线标签
<b></b>或<strong></strong>加粗标签
<bdo></bdo>按方向输出标签：ltr设置正序，rtl设置反序
<bdo dir="rtl">你好，2022</bdo><!--反向输出-->
<br>
<bdp dir="ltr">你好，虎年大吉</bdo><!--正向输出-->
<big></big>放大标签
<blockquote></blockquote>引用标签：标签间的文本从常规文本中分离出来，加一组标签，就往右缩计进一单位，和按tab键效果相同。
<center></center >居中标签
<em></em>强调标签:字体变斜
超链接
链接种类：文本超链接，网页中各种网页元素，如图像、表格、音频、视频等。
<a href="跳转目标url" target="目标窗口的弹出方式（_self 默认值，在原窗口打开，_blank在新窗口打开）" title=＂提示信息＂name = ＂链接名字＂>文本或图像</a>
外部资源链接
从外部网站指向自己网站的链接，简称外链，形式含纯文本链接，图片链接和锚文本链接。
需添加 http://+外部网址例如：http://www.csdn.com
跳转目标
<body>
<a href="https://www.csdn.net/">点击这里链接跳转到CSDN</a>
＜!--跳转到本地html文档--＞
<a href="C:\Users\admin\Desktop\HTML\作业\html\test.html">点击跳转到我的html文档</a>
</body>
内部资源链接：
指同一域名网站下的内容页面之间相互链接。
如网站频道页、栏目页、文章或产品的详情页之间的链接，甚至是网站内不同关键词
间的链接（如：百度百科），所以内部链接也被称为站内链接。
内部链接直接链接内部页面文件名称（含后缀）比如 <a href="index.html>首页</a>
跳转方式target和提示窗口title
<a href="C:\Users\admin\Desktop\安安.png">点击跳转到图片</a>
<hr>
<a href="C:\Users\admin\Desktop\安安.png"title="打开图片" target="_blank"_blank 点击跳转到图片>新开一页跳转到图片</a>
<hr>
<a href="C:\Users\admin\Desktop\安安.png"title="打开图片" target="_self"_self 点击跳转到图片>在本页跳转到图片</a>
<hr>
<a href="http://www.baidu.com" name="baidu">这是跳转到百度的链接</a>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a href="#baidu">跳转到百度链接</a>＜！--跳转到name为baidu的链接处，也就是上面那个链接--＞
#是锚点的写法；结构像 href="#1"，"#1（1可自命名）"是链接的资源地址；
没有链接目标时，链接标签的href属性值设置为“#”(href="#")，表示链接为空链接。
<body>
<h2>段落跳转</h2>
<a href="#1">《再别康桥》</a>
<a href="#2">《雨巷》</a＞
<h3 id="1">《再别康桥》</h3>
<p>
轻轻的我走了，<br>
正如我轻轻的来；<br>
我轻轻的招手，<br>
作别西天的云彩。<br>
<br>
那河畔的金柳，<br>
是夕阳中的新娘；<br>
波光里的艳影，<br>
在我的心头荡漾。<br>
<br>
软泥上的青荇，<br>
油油的在水底招摇；<br>
在康河的柔波里，<br>
我甘心做一条水草！<br>
<br>
那榆荫下的一潭，<br>
不是清泉，是天上虹；<br>
揉碎在浮藻间，<br>
沉淀着彩虹似的梦。<br>
<br>
寻梦？撑一支长篙，<br>
向青草更青处漫溯；<br>
满载一船星辉，<br>
在星辉斑斓里放歌。<br>
<br>
但我不能放歌，<br>
悄悄是别离的笙箫；<br>
夏虫也为我沉默，<br>
沉默是今晚的康桥！<br>
<br>
悄悄的我走了，<br>
正如我悄悄的来；<br>
我挥一挥衣袖，<br>
不带走一片云彩。<br>
</p>
<h3 id="2">《雨巷》</h3>
<p>
撑着油纸伞，独自<br>
彷徨在悠长、悠长<br>
又寂寥的雨巷<br>
我希望逢着<br>
一个丁香一样的<br>
HTML元素
<header> 设置文档或文档部分区域页眉。作为介绍内容或导航链接栏容器。一个文档中可有多个 <header> 元素。
注意：<header> 标签不能放在 <footer>、<address> 或另一个 <header>元素内。
<footer> 标签 设置文档或文档一部分区域页脚。一般会放文档创作者姓名、文档版权信息、使用条款的链接、联系信息等。一个文档中可以定义多个 <footer> 元素。使用 <footer> 元素插入联系信息，应该在 <footer> 内用<address>。
<footer>
<p><time pubdate datetime="022-01-28"></time></p>
<p>作者：hurary</p>
</footer>
<time> 标签 定义公历时间（24 h）或日期，时间和时区偏移可选，例如:用户代理能把生日提醒或安排添加到日程表中，搜索引擎也能够生成更智能的搜索结果。
time 的两个属性：
（1）datetime ：设置规定指定日期或时间。
语法：<time datetime="YYYY-MM-DDThh:mm:ssTZD">
YYYY - 年 (如 2022)
MM - 月 (如 01 表示 January)
DD - 天 (如 01)
T - 必需的分隔符，规定时间时使用
hh - 时 (例如 18 表示 6.00pm)
mm - 分 (例如 09)
ss - 秒 (例如 03)
TZD - 时区标识符 (PRC（中国）UTC（西方时间）)
（2）pubdate属性：设置 <time> 元素的时间是文档最新的发布日期
<p>time标签</p>
<p>每天晚上 <time>11:00</time> 前睡觉减少脱发。</p>
<p>祝你<time datetime="2022-10-05T05:10:05PRC">生日</time>快乐</p>
<p><time pubdate datetime="022-01-28"></time></p>
aside 标签:区域内容标注，常定义在 <article> 标签外内容。
<article>
<p>
article 标签里p标签的内容
</p>
<aside>
<p>这是 aside 标签 用来做内容标注</p>
</aside>
</article>
article 标签:设置独立内容。<article> 的内容独立于文档其余部分。
来源有：论坛帖子、博客文章、新闻故事、评论等
hgroup 标签：当标题有多个层级时，对标题元素<hn>分组。
<hgroup>
<h1>这是一个标签</h1>
<h2>这是其他的标题</h2>
</hgroup>
<p>这是段落</p>
section 标签：设置文档区域。如章节、头部、底部或者文档其他区域。
<section>
<h1>标题一</h1>
<p>段落一</p>
</section>
<section>
<h1>标题二</h1>
<p>段落二</p>
</section>
figure 标签：标注图像。
格式：<figure> <img src="./img/1.jpeg（图片的路径+带后缀的文件名）" width="200" height="200"> </figure>
figcaption 标签：放在＜figure＞旁边，给<figure>元素标题。
video 标签:视频。支持三种视频格式：MP4、WebM、Ogg。
语法：<video width="320" height="240" controls>
<source src="./mp4/陈奕迅 - 孤勇者.ogg（文件路径+带后缀的文件名）" type="video/ogg">
您的浏览器不支持 HTML5 video 标签</video>
video标签中的文本起提示作用，浏览器会显示出该标签的信息
controls 属性：设置浏览器为视频提供播放控件。设置了该属性，则规定不存者设置的脚本控件。
mark 标签：凸显文本，文字背景色变黄。
progress 标签 定义任务进度，不表示度量衡（例如，磁盘空间使用情况或相关的查询结果）。
语法: <progress value（当前值）="20" max（最大值）="100">
meter 标签:度量衡。用于已知最大和最小值的度量。如：磁盘使用情况，查询结果的相关性等。
注意区分 <meter>标签和<progress>,<meter>标签不作进度条使用，进度条用<progress>。
wbr 标签 设置在文本适合的地方添加换行符。如果单词太长，或担心浏览器在错误的位置换行，用 <wbr> 。<wbr>不会像<br>标签一样强制换行，会根据浏览器窗口大小在恰当地方换行。
示例:＜wbr＞在我之后换行＜wbr＞
input 标签： 设置用户输入数据的输入字段。<input> 元素在 <form> 元素中使用，用来声明允许用户输入数据的 input 控件。 type 属性设置输入字段方式。注意: <input> 元素是空的,它只包含标签属性。提示: 你可以使用 <lable>元素来定义 <input> 元素的标注。
<form action="demo-form.php">
name :<input type="text" name="FirstName" value="请填入姓名"><br>
Gender :<input type="text" list="data"><br>
<input type="submit" value="提交">
<datalist id="data">
<option value="女">
<option value="男">
<option value="其他">
</datalist>
</form>
<p>点击"提交"按钮，表单数据将被发送到服务器上的“demo-form.php”。</p>
datalist 标签 设置<input>元素的选项列表，设置下拉列表。details 标签还可以给一段内容增加详情。
<p>
details 标签可以给一段内容增加详情，例如如下使用案例：
</p>
<details>
<summary>水果的种类</summary>
<p>蔷薇科
梨果：苹果、沙果、海棠、野樱莓、枇杷、欧楂、山楂、梨（香梨、雪梨 等）、温柏、蔷薇果、花楸 等
</p>
<p>芸香科
柑果：橘子、砂糖桔、橙子、柠檬、青柠、柚子、金桔、葡萄柚、香橼、佛手、指橙、黄皮果 等
</p>
点开前：
点开后：
<address> 标签 设置文档作者联系信息，不描述邮政地址（除是联系信息的组成部分）。
<address> 元素位于 <body> 元素内，表示文档联系信息。
<address> 位于 <article> 元素内，表示文章的联系信息。
<address> 元素通常包含在<footer>标签元素的其他信息<address>标签标记的文本呈斜体。
<p>对比文本
<address>
作者：hurary<br/>
联系方式：12345678910
</address>
</p>
css
概念: 样式表或层叠样式表（级联样式表），设置HTML页面中的文本内容（如字体、大小、对齐方式等）、图片外形（如宽高、边框样式、边距等）以及版面布局等外观显示样式。CSS以HTML为基础，提供了字体、颜色、背景的控制及整体排版等功能，针对不同的浏览器设置不同的样式。
CSS样式规则：由选择器，属性和值三部分构成，
一、文字属性
文字控制的属性
font-size:设置字体大小，默认值medium ，绝对大小值：（x-/xx-）samll、smaller、medium、（x-/xx-）larger、larger、数字px、百分比（80%），要加上单位px；
font-weight:设置文本的粗细，默认400px，常用值bold（700）、bolder、lighter
color：文字颜色，只对文字有效，常用值red 、#000000（十六进制）、rgb（255，255，255）
font-family（必须值）：文字字体，中文要用引号括着；默认值normal 常用值times、courier、arial
text-align：文本水平对齐方式，值有3个为:left center 和right
line-hight ：设置以百分比计的行高，默认值:normal，常用值
font-variant: 小写字母转大写，且字体尺寸变小
其他属性:
background-color 背景颜色
字体属性：face
face 属性的值可保存若干个字体名称作备选，用逗号分隔字体名称。把希望显示的字体放在字体列表的第一个，把一个通用的字体放在最后（serif、sans-serif、monospace、cursive 或 fantasy），当前面的字体都不可用时，浏览器可以在通用字体库中找到该字体。
例如：<font face="隶书" > 或 <font face="verdana,arial,sans-serif">
上标：sup 和 下标：sub
语法：
<p>上标文本用于添加脚注 <sup>上标</sup> 文本。</p>
<p>下标文本可表示化学公式。 <sub>下标</sub>文本。</p>
删除线s、斜体i、加粗b
不换行标签：nobr
＜nobr＞不换行文本＜/nobr＞
选择器
选择器：选取需设置样式元素的模式。
类别：按功能分为元素选择器、类选择器、ID选择器和其他类型的选择器，如：集体选择器、属性选择器和后代选择器等，综合使用选择器创建出更精美的页面。
元素选择器
选择器是 HTML 的元素，如 p、h1、em、a，甚至是 html 本身，注意！元素选择器名只能是html里原来有的，不能自定义。
设置选择器的两种方式：
一、在元素内设置；二、在<head>的<style>里添加元素样式，然后在元素中调用样式。
第一种:
<body>
<h1 style="color:blue">蓝色字体</h1>
</body>
第二种:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h2{
color:blue;
background-color: coral;
}
</style>
</head>
<body>
<h2>我是在"<"head">"标签里设置样式的结果1</h2>
</body>
</html>
类选择器：
以一个点号显示：.classA{color:blur;}
类名可自定义，但第一个字符不能为数字！（否则在Mozilla 或 Firefox 无作用）
多个类样式选择器使用时类之间用空格隔开。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.ClassSelect1_color{
color:sandybrown;
background-color: royalblue;
}
.ClassSelect2_size{
font-size:40px;
}
</style>
</head>
<body>
<h4 class="ClassSelect1_color">使用ClassSelect1_color字体颜色和背景颜色发生变化</h4>
<h4 class="ClassSelect2_size">使用ClassSelect2_size字体大小发生变化</h4>
<p class="ClassSelect1_color ClassSelect2_size">使用ClassSelect1_color和ClassSelect2_size字体颜色、大小和背景颜色都发生变化</p>
</body>
</html>
ID选择器
格式：#+id名 ，ID 选择器根据元素的 ID 属性中的内容匹配元素。因匹配需要，所以 id 名称在文档内唯一，id名可以自定义，不以数字开头！（可能在某些浏览器出现问题）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#ID选择器{
color:white;
background-color: seagreen;
}
</style>
</head>
<body>
<h4 id="ID选择器">此段落用了ID选择器进行修饰</h4>
</body>
</html>
集体选择器：
即选择器的集体声明；标签间用“,”分开；集体里的每个元素都有样式。
<style>
p,#_color,a{
color:white;
background-color: tan;
</style>
<body>
<p>文本一</p>
<a href = "集体选择器.html">链接1</a>
<span id = "_color">使用类样式_color的span标签内容</span>
</body>
</html>
属性选择器：
起到筛选作用
<style>
.is_title[title]{
color:rgba(245, 241, 1, 0.904);
}
</style>
<body>
<a class="is_title" href="属性选择器.html" title="链接1">链接1</a>
<a class="is_title" href="属性选择器.html">链接3（没有写name属性，所以没有样式）</a>
<p class="is_title" title="这是name属性的值">有title属性的p标签</p>
<p class="is_title" >没有title属性的p标签</p>
</body>
</html>
例二：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a[href]{
color: red;
}
</style>
</head>
<body>
<h1>资源连接：</h1>
<ul>
<li><a href="http://www.baidu.com">百度</a></li>
<li><a href="http://www.csdn.com">CSDN</a></li>
<li><a>HTML</a></li>
<li><a href="http://www.runoob.com">菜鸟教程</a></li>
<li><a>CSS</a></li>
</ul>
</body>
</html>
后代选择器：
元素的后代可以是元素的第一代、第二代到第n代；左父右子，后代生效。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p span{color: red; }
._a a{color: green;}
</style>
</head>
<body>
<p>
这是p元素
<span>这是p的后代span子元素</span>
的内容 有p有span，生效
</p>
<hr>
使用类样式的后代选择器
<p class="_a">
<a href="http://www.baidu.com">链接</a>
使用了_a类的p元素，且有a标签，生效
</p>
</body>
</html>
相邻元素选择器：
注意使用时要和定义的顺序一致，后面的元素生效。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1 + span {color:red; }
span + p {color:violet }
</style>
</head>
<body>
<h1>标题1</h1>
<span>我是span1的内容，我的上方是h1标签，我离得最近，所以字体颜色变红</span>
<p>我是p的内容，我离span1最近且按顺序排在span后面，所以字体颜色是紫色的</p>
<p>我上面有p标签隔开了我和第一个span标签，虽然我相邻的后边有span标签，但是和前面定义的顺序不一样，所以我的字体颜色不变</p>
<span>我是span2的内容</span>
</body>
</html>
span标签
超文本标记语言（HTML）的行内标签，在行内定义一个区域，也就是一行内可以被<span>划分成好几个区域。span的前后不换行，无结构意义，是应用样式，用来组合文档中的行内元素。
<span> 与<div>区别：<span>是行内元素，<div>是块级元素，<div>为大容器。<dic>在它所包含的HTML元素前后都引入行分隔,<span>是小容器，div里可以放span
伪类
定义元素特殊状态，添加选择器效果。介绍4种伪类:、超链接伪类、CSS类和伪类、其他伪类。
first-child伪类
条件:子元素必须是父元素的第一个（first）元素，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪类 伪元素</title>
<style>
h4:first-child{color: olivedrab;}//表示第一个子元素为h4的都有样式
</style>
</head>
<body>
<h4>h4是html父标签的第一个元素，且为h4标签，所以变绿了</h4>
<h4>h4是html标签的第二个元素，所以不变色</h4>
<hr>
<div>
<h4>h4是第一个div标签里的第一个元素，且为h4标签，所以变绿了</h4>
<h4>h4是第一个div标签里的第二个h4标签内容，所以不变色</h4>
</div>
</body>
</html>
超链接伪类
用于实现链接不同状态用不同方式显示，如设置超链接未被访问、已访问、鼠标滑过、选中后的颜色。未访用 link、已访问用visited、鼠标滑过用hover、已选中用active 伪类。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>超链接伪类</title>
<style>
/* 未访问的链接,显示黑色 */
a:link {
color:black;
}
/* 已访问的链接，显示灰色*/
a:visited {
color:gray;
}
/* 鼠标悬停链接，显示绿色 */
a:hover {
color:olivedrab;
}
/* 已选择的链接，显示橙色 */
a:active {
color:orange;
}
</style>
</head>
<body>
<a href="http://csdn.com">我是链接一</a>
<br>
<a href="http://www.w3school.com">我是链接二</a>
</body>
</html>
CSS类和伪类结合使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS类和伪类配合使用</title>
<style>
.highlight{
color: #ff0000;
}
</style>
</head>
<body>
<h4 class="highlight">使用了类样式，所以生效了</h4>
</body>
</html>
例二:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS类和伪类配合使用</title>
<style>
h4.highlight:first-child{
color: #ff0000;
}//指定类对某标签生效，在伪类基础h4.:first-child加个类名h4.highlight:first-child,调用时和类一样。
</style>
</head>
<body>
<h4 class="highlight">使用了指定类对某标签生效，所以生效了</h4>
<h4 >我没有使用指定类对某标签生效，所以不生效</h4>
</body>
</html>
其他伪类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>其它伪类</title>
<style>
ul li:first-child{color:green;}//first-child设置父元素第一个子元素
p a:last-child{color:hotpink;}//last-child设置父元素最后一个子元素
div p span:first-child{color:yellow}//设置div的第一个元素p标签,并且p标签的第一个元素是span标签时，span标签使用该样式。
</style>
</head>
<body>
<b>例子一：</b>
<ul>
<li>第一项值</li>//有样式
<li>第二项值</li>
</ul>
<hr>
<b>例子二：</b>
<p>
我是 p 元素内容
<br>
<a href="http://www.csdn.com">这是 p 元素下的 a 标签1</a>
<br>
<a href="http://www.taobao.com">这是 p 元素下的 a 标签3</a>//有样式
</p>
<hr>
<b>例子三：</b>
<div>
<p>
p1内容
<span>span内容1</span>//有样式
</p>
</div>
</body>
</html>
伪元素
伪对象语言创造的元素不存在于DOM文档中，是虚拟元素。伪元素是某个元素的子元素，这个子元素逻辑上存在，但不存在于文档树中。
语法：选择器 :: 伪元素{属性：值}
:after与content属性一起使用，设置对象后的内容
:before与content属性一起使用，设置对象前的内容
:first-letter 设置对象内第一个字符样式
:first-line 设置对象内第一行
content:文本属性，与:before 或 :after 配合使用插入生成内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p::first-line{color:blue;font-size:20px;}
p::first-letter{color:brown}
p::before{
content:"前方增加的文字--你好，";
color:darkgreen
}
p::after{
content:" 虎年大吉--我是后面增加的文字";
color: fuchsia;
}
</style>
</head>
<body>
<p>2022</p>
<p>
2022<br>2022<br>2022<br>
</p>
<p>第一行第一行内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内</p>//在屏幕自动换行的第一行显示蓝色
</body>
</html>
HTML表格
<table>//设置表格
<tr>//设置表格中的一行
<td>单元格内的文字</td>//设置表格的单元格，必须放在中
...
</tr>
...
</table>
表格结构
下面3个标签需要放在＜table＞里使用
＜table＞
<thead></thead>//头部，含logo，导航栏等
<tbody></tbody>//主体
<tfoot></tfoot>//页脚，出现在 <caption>、<colgroup> 和 <thead> 元素后，<tbody> 和 <tr> 元素之前，<tfoot> 元素内部必须包含一或多个 <tr> 标签。
＜/table＞
＜caption＞表格标题。须紧随在 <table >标签后。每个表格只能有一个标题。通常标题居中在表格上。
<table>
<caption>我是表格标题</caption>
</table>
表格属性
border 设置表格边框 单位px
bordercolor 设置表格边框颜色
cellspacing 设置单元格与单元格之间的空白间距（默认值2px）
cellpadding 设置单元格与单元格边框间的空白间距（默认值1px）
width 设置表格宽度
height 设置表格高度
align 设置表格在网页中的水平对齐方式，可具体到单元格 left、center、right
valign 设置表格在网页中的垂直对齐方式，用于行内 top、bottom、middle
bgcolor 设置表格背景色
background 设置表格背景图
合并单元格
种类: 跨行合并：rowspan；跨列合并：colspan
注意：
多个内容合并时，要删除多余部分。 如把 3个 td 合并成一个，要删除多余的2个。合并的顺序一般先上左，后下右。
记住：删除的个数 = 合并的个数 - 1。
图片属性
必需的两个属性src、alt。注意：图像是链接到 HTML 页面上，非插入。在 <a> 中嵌套 <img> ，可把图像添加到另一个文档的链接中。
1、width和height
2、边框：border（不推荐使用）
3、水平间距：hspace 规定图像左右两侧的空白
4、垂直间距：vspace 规定图像上下两侧的空白
5、图片悬浮文本：title 鼠标停留在图片时，图片上悬浮出文字
图片指定代替文本属性：alt 当用户无法查看图像时，alt 提供图像替代信息。
图片文本对齐：align 规定图像相对于周围元素的对齐方式。常用值:top，middle，bottom
表单<from>
<form> 可包含的元素： <action> <input> <textarea> <select> <optioon> <fileset>
1、表单重要属性 action
action表示当前表单需要提交的地址，以注册为例，在 web 开发中，用户需填写信息并提交完成注册，用户点击提交按钮时，页面会把信息给到 action 属性对应的链接，所以在 action 后面添加的是一个链接地址。
2.name 属性
用 <name> 比较规范，易识别，用 <name> 时，提交到action 的 url 地址（后台）的信息有标记，通过 name 值区分表单提交的内容是什么
3、method 属性
表示表单提交数据到后台采用的方式，有2种: get（默认，不太安全）和 post（安全）
4.enctype 属性
要上传文件（包括图片）应该设置 enctype 属性的值为 enctype = "multipart/from-data"
enctype 的3种属性:
text/plain 设置纯文本数据提交
multipart/from-data 设置文件数据上传
application/x-www-from-urlencoded 默认值
5.target 属性
设置打开 action URL的地方，常用值 _blank（新窗口） 和 _self （默认，当前方式）
<form name = "regist" action = "url地址" method = "post" target="_self">
<form>
表单控件
1、文本输入框 input
属性:
name（必须有）：标识当前数据内容，方便后台根据 name 值对数据进行判断
type：设置控件类型，可取值 text 表文、password 密码 星号显示
size： 设置 input 显示的长度
placeholder： 设置提示语
minlength： 设置输入数据最小长度
manlength： 设置输入数据最大长度
2.单选项 radio 复选项 checkbox
<form >
<input name = "radio1" type="radio" value = "first class" > 一等座 <br/>
<input name = "radio1" type="radio" value = "second class"> 二等座 <br/>
<input name = "checkbox1" type = "checkbox" value = "make a reservations" > 订餐 <br>
<input name = "checkbox1" type = "checkbox" value = "hail a taxi" > 预约的士 <br>
</form>
3.file 文件上传
点击“选择文件”按钮就可以添加文件
<input name = "file" type = "file" />
4.多行文本输入框 textarea
设置输入多行文本，拖动右下角“阴影”区可拖动文本，调节大小
例：<textarea name="textarea" cols="30" rows="15"></textarea>
加属性style="resize:none;"//表示拒绝拖动文本 斜线消失
5.提交按钮 submit
普通按钮加图片 <button><img src = "./img/1.jpeg"></button>
提交按钮 <input type="submit" value="提交">
6.下拉列表 select
select 标签里嵌套 option 标签。
属性
name 提交数据时标识
size 设置页面的下拉列表显示多个选项
multiple 当multiple=multiple，按ctrl + 鼠标左键可多选 当<select>设置了mutiple后，在<option>里令selected=selected，设置某一项默认预先选中，显示灰色
<select multiple="multiple">
<option value="breakfast">订早餐</option>
<option value="lunch" selected="selected">订午餐</option>//selected表示预设选定
</select>
列表
1、无序列表 ul 项li
每一项前用实心圆点表示。
<ul>
<li>第一项Coffee</li>
<li>第二项Tea</li>
</ul>
属性:type设置列表前的实心圆点
<ul type = "none">//设置去掉序号图形
<ul type="disc">//实心圆
<ul type="square"> //实心正方体
<ul type="circle">// 空心圆
2、有序列表ol 项 li（ 每一项内容前有对应项序号）
<ol>
<li>第一项</li>
<li>第二项</li>
</ol>
属性
（1）开始属性 start:设置列表的开始序号
（2）类型属性 type:
<ol type="1">//阿拉伯数字做序号
<ol type="i">//小写罗马字母做序号
<ol type="I">//大写罗马字母做序号
<ol type="a">//小写英文字母做序号
<ol type="A">//大写罗马字母做序号
（3）.倒序reserve: <ol reversed = "reserved">
3.自定义列表dl 项dt （ dl 含 dt，dt 含 dd）
<dl>
<dt>这是一个名词1</dt>
<dd>这是这个名词1的解释</dd>
<dt>中国国家女子足球队</dt>
<dd>中国国家女子足球队建立于1984年，由中国足球协会管理。首任主教练为丛者余，现任主教练水庆霞 ，现任队长王珊珊。
</dd><dt>卡布奇诺原料</dt>
<dd>意大利特浓咖啡</dd>
<dd>蒸汽泡沫牛奶</dd>
<dd>水</dd>
</dl>
4.菜单列表 menu 通常用于文本菜单，工具条和命令列表选项。
<menu>
<li>菜单第1项</li>
<li>菜单第2项</li>
</menu>
列表嵌套：上面各种列表之间可以同种互嵌，也可以不同种类互相嵌套
JavaScript 简介
在web中给整个页面添加动态效果，如动态改变某个元素css属性，给整个页面添加较为流程的用户体验，直接在web中嵌入。
//JavaScript HelloWorld
<script>
document.write("HelloWorld");
</script>
1、 JavaScript 变量、命名及作用域
变量名：可包含字母，数字，下划线和美元符号，不能以数字开头
命名：驼峰命名法和下划线命名法
作用域：局部变量 let 和全局变量 var
<script>
var i = 10;
document.write(i + '<br/>'); // 这里输出 i 为 10
{
let i = 2;
document.write(i + '<br/>'); // 这里输出 i 为 2
}
document.write(i + '<br/>'); // 这里输出 i 为 10
</script>
JavaScript 数据类型
(1) 值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、符号（Symbol）。
(2) 引用数据类型：对象(Object)、数组(Array)、函数(Function)
运算符
1 +=，-=、*=、/=
2 %、%= 、*、*=
3 ++、--
<script>
var i = 0;
document.write(++i + '<br/>')//示 i 的值先自增后再运行write（）函数输出 i
document.write(i++ + '<br/>')//表示先输出 i 的值，i 再自增；
</script>
2 条件判断
2.1 if 基础
<script>
var i = 21;
if(i>=18){
document.write("已成年");
}
</script>
2.2 if else
<script>
var i = 8;
if(i>=18){
document.write("已成年");
}
else{
document.write("未成年");
}
</script>
2.3 if else if
<script>
var looking=0;
if(looking == 0){
document.write("对家具颜值要求很低，价位在5百以内");
}else if(looking>=1 && looking <=3){
document.write("对家具颜值要求较低，价位在1k以内");
}
else if(looking >=4 && looking<= 5){
document.write("对家具颜值要求一般，价位在2k以内");
}
2.4 if 嵌套与分支
<script>
var looking=1,age=1;
if(looking == 0){
//嵌套部分；
if(age==0){
document.write("对家具颜值要求很低，价位在5百以内");
document.write("使用年限为5年以内，可以考虑购买普通金属、藤类或木材");
}
else if(age==1){
document.write("使用年限为10年以上，可以考虑购买合金、大理石或实木类");
}
}else if(looking>=1 && looking <=3){
document.write("对家具颜值要求较低，价位在1k以内");
}
</script>
2.5 switch 语句
<script>
var month = 6;
switch(month){
case 1:
document.write("This month is January");
break;
case 2:
document.write("This month is February");
break;
default:
document.write("Unrecognized, please enter a number between 1 and 12");
}
</script>
逻辑与 && （同时满足）和逻辑或 ||（满足其一），当 与运算 和 或运算 一起的时候，遵守从左到右的顺序；
3 函数
格式：function 函数名（参数1，参数2){代码行1；代码行2；return 返回值（可选）；}
<script>
//函数定义
function MyFunction1()
{
document.write("Hello!");
}
//函数调用
MyFunction1();
</script>
//函数参数，个数要一样，多了选前面的，少了为 undefined
<script>
function MyFunction2(username,var2){
document.write("Hello "+username + '<br/>');
}
MyFunction2("BingDwenDwen","XueRongRong");
</script>
//函数返回值
<script>
function MyFunction3(greeting,username){
return greeting + username;
}
var MyFunction3 = MyFunction3("Bonjour ","BingDwenDwen");
document.write(MyFunction3);
</script>
4 事件及函数
事件分JavaScript 事件和HTML 事件
JavaScript 事件：HTML 事件发生在 HTML 元素上，当 HTML 页面使用 JavaScript 时， JavaScript 可以触发这些事件。
HTML 事件：可以是浏览器行为，也可以是用户行为。
如：HTML 页面完成加载；HTML input 字段改变时；HTML 按钮被点击；
- 事件发生时，可以做些事情。如事件触发时 JavaScript 执行代码。
- HTML 元素中添加事件属性，用 JavaScript 代码来添加 HTML 元素。
- 事件就是一件事，例如在网页中，当你点击按钮的时候就触发了一个事件，这个事件可以通过响应一个对应的函数执行某些代码。
<body>
<button onclick = "click()">这是一个按钮</button>
<script>
function click(){
alert("我点击了按钮")//alert函数：显示一个警告对话框，包括一个确定按钮。
}
</script>
5 循环
5.1.1 for 循环基础
//重复输出5个hello
<script>
for(var i=0;i<5;i++){
document.write("Hello <br/>");
}
</script>
for (语句 1; 语句 2; 语句 3)
{
循环的代码块
}
语句 1 ：代码块开始前执行
语句 2：循环条件
语句 3： 在循环（代码块）被执行之后执行
执行顺序： 语句1→语句2→代码块→语句3→语句2→代码块→语句3→语句2→代码块→语句3→语句2→直到语句2不满足为止，跳出循环。
5.1.2 for 循环做阶梯
<button οnclick="step()">点击增加阶梯</button> //onclick 事件绑定为 step函数；
<div id="divID">//开辟一块空间，可以放阶梯
</div>
<script>
var times=0;//次数
function step(){
times++;
var htmlStr='■';//阶梯样子
for(var i=0;i<times;i++){
document.getElementById('divID').innerHTML += htmlStr;
}
document.getElementById('divID').innerHTML +='<br/>';//加完阶梯记得换行
}
</script>
5.2 while循环:在指定条件为真时循环执行代码块。
<script>
var i=0;
while (i<5)
{
document.write("Hello" + '<br/>');
i++;
}
</script>
数组 var 变量名 [num,”string”,... ]
1.概念 ： 数组就是数据集合，数组是储存多个值的容器，这些值的种类也可以多种多样。
<!-- 方法1 重要！字面 -->
<script>
var aaa = ["Dong A","Beijng" ,"Yuzu", 2022];
document.write(aaa);
</script>
<!-- 方法2 常规 -->
<script>
var bbb = Array ();
bbb [0] = "Dong A";
bbb [1] = "Yuzu";
bbb [2] = 2022;
document.write(bbb);
</script>
<!-- 方法3 简洁 -->
<script>
var ccc = Array("Dong A","Beijng","Yuzu",2022);
document.write(ccc);
</script>
//数组访问
<p id="pID"></p>
<script>
var aaa=["Dong A","Beijng" ,"Yuzu", 2022];
document.getElementById("pID").innerHTML = aaa[0];
</script>
//数组取值
//通过索引对数组的值进行更改，改了数组第1个元素内容aaa[0] 的 “Dong a”改成 “winter”
<p id="pID"></p>
<script>
var aaa=["Dong A","Beijng" ,"Yuzu", 2022];
aaa[0]="winter";
document.getElementById("pID").innerHTML = aaa[0];
</script>
//数组与循环
常将数组与循环结合使用，如做网站时将后端传递过来的以数组出现的网页数据显示出来，一个个取不方便，结合上循环，事半功倍。
<p id="pID"></p>
<script>
var aaa=["Dong A","Beijng" ,"Yuzu", 2022];
for (let i = 0;i< aaa.length;i++)
{
document.getElementById("pID").innerHTML += aaa[i]+',';
}
</script>
//数组增删值
<p id="pID"></p>
<script>
var ddd=["one","twe" ,"three", 2022];
<!--数组前面增加元素，用 unshift（）-->
ddd.unshift("new_1","new_2");
for(let i=0;i<ddd.length;i++){
document.getElementById("pID").innerHTML += ddd[i]+',';}
<!--数组后面增加元素，用 push（）-->
ccc.push("新增元素1","新增元素2");
for(let i=0;i<ccc.length;i++){
document.getElementById("pID").innerHTML += ccc[i]+',';
}
<!--删除第一个元素，用shift（）-->
var bbb=["Dong A","Beijng" ,"Yuzu", 2022];
bbb.shift();
for(let i=0;i<bbb.length;i++){
document.getElementById("pID").innerHTML += bbb[i]+',';
}
<!-- 删除最后一个元素，用pop的方法 -->
var aaa=["Dong A","Beijng" ,"Yuzu", 2022];
aaa.pop();
for(let i=0;i<aaa.length;i++)
{
document.getElementById("pID").innerHTML += aaa[i]+',';
}
</script>
结果：增前new_1,new_2,one,twe,three, 2022
增后 one,twe,three, 2022,新增元素1,新增元素2,
删第一个：twe,three, 2022,
删最后一个：one,twe,three,
对象
1、概念：
- JavaScript 对象是拥有属性和方法的数据。在 JavaScript中几乎所有的事物都是对象。
- 真实生活中，一台笔记本电脑是一个对象。对象有属性，如重量和颜色等，方法有启动停止等，所有笔记本电脑都有这些属性，但每款笔记本电脑属性都不尽相同。所有笔记本电脑都拥有这些方法，但是它们被执行的时间都不尽相同。
- 对象是变量，但对象可包含多个值（多个变量），每个值以 name:value 对呈现。
第一种：
<p id="pID"></p>
<script>
<!--格式： class 类名 {属性1；属性2； }
var Asus = new laptop();从右边往左看，表示创建了一个新的类（用关键词 new ） -->
class laptop
{
brand ='';
weight = 3;
greeting()//用对象的方法创建函数
{
document.getElementById("pID").innerHTML += '我们会帮助您登录、联网、配置电脑，您很快就能开始使用了';
}
}
var Asus = new laptop();<!--从右往左，创建新类（关键词 new），laptop赋值给左边变量Asus，使得Asus变量拥有 laptop属性-->
Asus.brand='华硕';
Asus.weight = 2;
document.write(Asus.brand+Asus.weight);<!--用小数点调用属并且赋值后输出-->
Asus.greeting();
<!--创建多个对象，下面是第二个对象HP-->
var HP = new laptop();
HP.brand='惠普';
HP.weight = 1;
HP.greeting();
document.write(HP.brand+HP.weight+'<br/>');
</script>
第二种：
<body>
<p id="pID"></p>
<script>
var laptop = {brand:"Asus", color:"break", Storage:"2T"};
<!-- 类里使用键值对(name：value) 这样输出结果会有索引-->
for(let i in laptop){
document.write(i+':'+laptop[i]+' ');
}
<!--循环遍历对属性-->
for(let i in Asus)
{
document.write(i+':'+Asus[i]+' ');
}
</script>
</body>
<!-- 运行结果：brand：华硕 color：黑 storage：2T weight：2 -->
canvas基础
概念： canvas 画布，可在上面绘制图像。用 HTML5 的 canvas 画画。用 JavaScript 进行图像绘制canvas 基础绘制线段， <canvas> 是图形容器，必须用脚本来绘制图形。可以通过多种方法用 canvas 绘制路径,盒、圆、字符以及添加图像。
绘制线段
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第十一篇 JS canvas</title>
<style>
canvas{
background-color:cadetblue;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="500" height="500"></canvas>
<!-- 绘制线段-->
<script>
var canvas=document.getElementById('myCanvas');//用getElementById 取得对应 canvas 对象
var context=canvas.getContext('2d');//设置绘制图像类型为2d
context.beginPath();//充值画布路径，路径就是我们画的线段、线条
context.moveTo(100,100);//下笔点移动到某一个位置
context.lineTo(200,200);//从下笔点绘制一条线段到 xy 坐标为 200 的地方
context.stroke();//开始绘制
</script>
矩形绘制
<script>
var canvas=document.getElementById('myCanvasa');
var context=canvas.getContext('2d');
context.fillStyle = "#0000ff";<!--修改填充颜色-->
context.strokeStyle = "#ff0000";<!--修改边框颜色 -->
context.beginPath();
context.fillRect(10,10,300,400); <!--填充颜色-->
context.strokeRect(10,10,300,400);<!--去掉填充颜色（即注释掉上面的代码，结果只显示矩形边框填充颜色-->
<!--fillRect 函数绘制矩形，矩形以（10，10 ）为起始坐标， 300 、400 分别对应宽高。 -->
</script>
</body>
</html>
三角形绘制
<canvas id="tCanvasa" width="300" height="300"></canvas>
<script>
var canvas=document.getElementById('tCanvasa');//通过 getElementById 查找取得对应的 canvas 对象
var context=canvas.getContext('2d');//指定了您想要在画布上绘制的类型
context.lineTo(30, 30);//第一个点位置
context.lineTo(30, 180);//第二个点位置
context.lineTo(180, 180);//第三个点位置
context.lineTo(30, 30);//第四个点位置
context.fillStyle = "#0000ff";//改变填充色
context.fill();
context.stroke();//填充颜色
</script>
注意：
（1）赋值符号：= 判断是否相等符号：==
（2）参数和变量用逗号分开；
（3）在<script>里，写完一行记得加分号 “ ；”
（4）因为双引号成对存在，防止冲突，结合单引号灵活使用；
（5）变量名不以数字开头。
HTML CSS JS 小总结相关推荐
- JS表单验证(HTML+CSS+JS)小实例【详细教程】
前言 大家好,分享一个HTML+CSS+JS表单校验,包括页面的简单布局,样式渲染,还有基础的JS校验方法.希望大家喜欢!哈哈 一.效果图 二.介绍 图标库使用Element-UI <!-- 引 ...
- “限时分享“ 本地80个小游戏 HTML+CSS+JS源码分享
开源项目集合 1. "限时分享" 本地80个小游戏 HTML+CSS+JS源码分享 2. "限时分享" 别错过了,最全的微信小程序源码收集分享 里面有80款小游 ...
- 台式小风扇（HTML+CSS+JS练手小项目）
台式小风扇(HTML+CSS+JS练手小项目) 功能介绍 外观展示 HTML代码 CSS代码 JS代码 总结 功能介绍 前段时间看到这样的风扇特效,感觉还挺好玩,就自己也写一个练练手. 风扇有四个档位 ...
- 小方块上升组成背景特效 html+css+js
一.先看效果: 1024程序员节发篇文章拿个个徽章,嘿嘿 (^▽ ^ ) . 二.详细实现(后面有完整代码): 1.先定义html标签,.container就是底层大盒子,.item就是一个小方块,后 ...
- HTML + CSS + JS 10 分钟实现一个吃豆豆小游戏（给女朋友玩）
今天江哥手把手带大家实现一个吃豆豆游戏 关注江哥不迷路,带你编程上高速 知识点 HTML + CSS + JS 实现思路:类似贪吃蛇 游戏玩法,W A S D,控制方向,实现吃豆豆 废话不多说,直接上 ...
- html+css+js适合前端小白的实战全解（超详细）——2048小游戏（三）
续上一小节,我们回到newgame()这个函数,我们之前只做了init()内函数,相当于一个初始化操作 现在,我们需要再随机两个两个生成数字. 随机生成数字在这个游戏里会经常出现,用户移动一步,也会产 ...
- html+css+js适合前端小白的实战全解（超详细）——2048小游戏（二）
续上一小节,我们可以发现每一个grid-cell上的数字初始时并不在格子里. 这些数字可以随着玩家的操作而移动 我们可以想象:初始时每一个格子上的数为0,他们并不显示 ↓ 只有当grid-cell ...
- 滑动门套滑动门css,JS+CSS实现带小三角指引的滑动门效果
本文实例讲述了JS+CSS实现带小三角指引的滑动门效果.分享给大家供大家参考.具体如下: 这是一款JS+CSS带小三角指引的滑动门,有朋友说在IE6下看不到效果,其实能看到,因为那个小三角颜色比较淡, ...
- 利用HTML+css+js制作侧边栏小广告
利用HTML+css+js制作小广告 1.页面效果 2.HTML代码 3.css代码(给广告位设置样式) 4.js代码 在这里插入图片描述
最新文章
- 封装之--通过类中公有方法访问私有成员变量
- 不定长数组取值交叉遍历组合生成算法
- Path画直线与弧线
- c++——对象的构造和析构函数、构造函数的分类及调用
- 通过TP-Link路由器WAN口嗅探PPPoE拨号密码-路由器拨号密码破解方法
- 解决css font-size设置小字体不生效
- 现实的复杂性与系统的复杂性
- 【转帖】NAT在NDIS中间层驱动中的实现
- 数据(机器学习/深度学习)竞赛平台——Kaggle
- 这篇文章来自我的微信朋友圈，并不特别好玩，但可以给创业者补点财务知识
- 用java输出出生日期,生成随机出生日期
- C#模拟按键的一种实现方法
- 电脑怎么用照片做视频？哪个软件简单好用？3步教你轻松制作！
- 搭建Janus的HTTPS环境
- 计算机一级考excel基础知识,计算机一级考试模拟题(word、excel、以及基础知识).doc...
- 浅谈js下的发布订阅模式(观察者模式)
- ECSHOP goods表字段分析
- php 如何启动ica文件,什么是ICA文件？Win10专业版如何打开ICA文件？
- ES学习笔记——ES入门：多条件查询、聚合、过滤、排序
- golang使用mongo-driver操作增删改查