前端1标签（input），css（选择器），js（Bom，Dom）
Posted 码农编程录
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端1标签（input），css（选择器），js（Bom，Dom）相关的知识，希望对你有一定的参考价值。
文章目录
- 1.标签
- 2.css
- 3.js
- 3.1 js两种引入：js最终要引入到html在浏览器中运行
- 3.2 js五大原始类型：undefined
- 3.3 js的运算符和流程控制：js不支持单&和单|性能低
- 3.4 案例_99乘法表：Sources调试
- 3.5 函数的基本语法：function
- 3.6 函数的两种变量和两种定义：全局/局部变量
- 3.7 事件的两种注册：js事件驱动语言
- 3.8 页面加载事件：当浏览器加载完整个html页面时才触发
- 3.9 案例_轮播图：每隔一秒换一张图片
- 3.10 内置对象_数组/日期/字符串解析/url编码：encodeUri编码，decodeUri解码
- 3.11 Bom编程_window对象：编写时可被省略，窗口 (运行环境)
- 3.12 案例_会动的时钟：innerText (开闭标签之间的内容)
- 3.13 Bom编程_location对象：地址栏
- 3.14 Bom编程_history对象：历史记录
- 3.15 Dom编程_查找节点：document.querySelector('video').playbackRate = 3
- 3.16 案例_全选全不选：商品选项勾选状态 和 全选的勾选状态一致
- 3.17 属性_innerText和innerHTML：追加
- 3.18 案例_省市级联：0对应bj数组
- 3.19 Dom编程_js修改css样式：.className
- 3.20 案例_隔行/触摸换色：鼠标移上去时, 当前行改背景色
- 3.21 js中的正则表达式：regular expression (regex) 具有某种特定规律的表达式
- 3.22 案例_表单校验：result = false
1.标签
1.1 html：HTML（用于创建网页结构），CSS（对页面进行美化），javascript（用于与用户交互）
#两种软件架构
1. C/S : client to server 客户端对服务端
2. B/S : browser to server 浏览器对服务端
前后端的概念
1. 前端: 直接跟用户打交道
1. 大前端: 网页,app,小程序...
2. 前端: 网页
2. 后端(后台) : 提供数据支持 (服务器)
前端的学习
1. html + css : 标签语言
2. JavaScript : 编程语言
3. Jquery : 基础框架
4. BootStrap : 高级框架
//1111111111111111111111111111111111111111111111111111111111111111
开发工具: idea (HBuilder)
运行环境: 浏览器(google : chrome)
# 浏览器
-- 1. 内核 : 引擎
a. IE : MS -> edge
b. Chrome : google
c. safari : apple
d. firefox : 火狐
e. Opera : 欧朋
-- 2. 外壳(皮肤)
360浏览器
前端开发: 适配(写了一套网页)
//1111111111111111111111111111111111111111111111111111111111111111111111
## HTML：HyperText Markup Language 超文本标记语言，html的语法不需要像xml那么严谨, 浏览器会自动补全
1. 超文本 : 不仅仅是文本(文本,图片,超链接...)
2. 标记语言 : 标签
File-New-Project-Static Web，右击New-HTMLFile。
<!DOCTYPE html>
<!-- 文档声明 : 文档类型html 版本5.0
H5 : html 5.0
html5.0 + css3.0 + js
Html基础结构
1. 根标签 : 必须名为html
2. head标签 : 头部
元标签: 编码utf-8
title: 网页的标题,显示在标签栏
3. body标签 : 主体
网页主体内容写在这里面
标签分两类
1. 成对标签 : <start> 内容 </end>
2. 单独标签 : <自关闭/>
-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
Hello Html
<hr> <!-- 横线 -->
<hr/>
<div>div </div> <!-- 浏览器自动解析加上闭标签 -->
xx
</body>
</html>
1.2 文本标签：字体属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
1. h1: headline 内容标题。title：网页标题
编号: 1~6 , 大到小
2. hr : horizontal 水平线
3. font : 字体
1. face : 字体样式
2. color:颜色
3. size : 大小
1~7 小到大
4. b : bold 加粗
5. i : italic 斜体
6. br : break line 换行(间距比较小)
7. p : paragraph 段落也是换行 (间距比较大)
html属性不好用:
1. 不是所有的标签属性都一样
A标签有abc属性 B标签只有c属性
2. 不同的标签的同种属性效果可能不同
A标签的a属性大小 B标签的a属性长度
属性(以hr标签为例):
1. size 大小(高度)
单位 : px (pixel 像素) 1920*1080 fhd
2. color 颜色
1. 单词
2. RGB(red green blue : 光三原色)
每个颜色取值(0~255 -> 16进制 00~ff)
#ff0000
3. width 宽度
1. 固定
2. 百分比 : 默认占浏览器的显示宽度
4. align : 排列
left center right
-->
中文
<font face="楷体">中文</font>
<font face="楷体" color="#a0522d">中文</font>
<font face="楷体" color="#a0522d" size="1">中文1</font>
<font face="楷体" color="#a0522d" size="3">中文3</font>
<font face="楷体" color="#a0522d" size="7">中文7</font>
<b>
<i>
<font face="楷体" color="#a0522d" size="8">中文8</font>
</i>
</b>
<hr>
<h1>何以生肖莫</h1>
NBA凉了,以后再也看不了转播了,腾讯视频和虎扑都要跪...
<hr>
<hr size="50px" color="green"/>
<hr size="50px" color="pink"/>
<hr size="50px" color="#ffff00" width="500px" align="left"/>
<hr size="50px" color="#000000" width="50%" align="center"/>
<hr size="50px" color="#FFB3D2" width="50%" align="right"/>
<hr>
NBA凉了,以后再也看不了转播了,腾讯视频和虎扑都要跪... <br>
NBA凉了,以后再也看不了转播了,腾讯视频和虎扑都要跪... <br>
<p>NBA凉了,以后再也看不了转播了,腾讯视频和虎扑都要跪...</p>
<p>NBA凉了,以后再也看不了转播了,腾讯视频和虎扑都要跪...</p>
</body>
</html>
1.3 a标签：anchor(锚) 超链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
1. 必要属性: href (hypertext reference 超文本链接)
1. 远程地址: 网址
2. 本地地址: 当前页面所在的网页位置
3. 发邮件(h5): 了解
4. 锚点: 1. 设置锚点: 给网页中的某个标签添加一个属性 id (值唯一性)
2. 跳转: a标签的href = #id值
5. # : 当前网页(测试)
2. target
1. _self : 自己 (默认)
2. _blank : 新的页面
3. title : 鼠标停留在这个标签的提示内容
-->
<h1 id="start"> h1</h1>
<a>百度一下,你就知道</a> <br>
<a href="http://www.baidu.com">百度一下,你就知道</a> <br>
<a href="00_基本语法.html">基本语法</a> <br>
<a href="mailTo:liuyan@163.com?subject=约会&cc=高圆圆">发邮件</a> <br>
<a href="#start">回到h1的位置</a> <br>
<a href="#">当前页面</a> <br>
<hr>
<a href="http://www.baidu.com" >百度一下,你就知道</a> <br>
<a href="http://www.baidu.com" target="_self">百度一下,你就知道</a> <br>
<a href="http://www.baidu.com" target="_blank" title="点击了解更多">百度一下,你就知道</a> <br>
</body>
</html>
1.4 列表标签：list (嵌套)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
1. 有序列表（ol li） order list
1. type属性
1. 1 默认使用数字序列
2. a,A 使用字母序列
3. i,I 罗马数字
2. 无序列表（ul li） unordered list
1. type属性
1. disc ● 默认
2. circle ○
3. square ■
-->
<h1>奥运奖牌榜</h1>
<ol type="I">
<li>中国</li>
<li>美国</li>
<li>俄罗斯</li>
</ol>
<h1>优秀男性榜</h1>
<ul type="square">
<li>东哥</li>
<li>坤哥</li>
<li>凡哥</li>
</ul>
</body>
</html>
1.5 图像标签：img标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
1. 必要属性src: 图片的地址
a. 本地地址
b. 远程地址
2. alt :图片加载失败的提示
3. width / height：宽/高
原图片: 480*320
特点: 设置单边, 另一边会等比例缩放
4. title : 鼠标放上去有提示
-->
<img src="img/a.jpg" alt="查无此图片" title="呵呵">
<img src="img/b.jpg" alt="查无此图片">
<!-- <img src="https://img.ixiumei.com/uploadfile/2019/0422/20190422095425634.jpg" alt=""> -->
<img src="img/a.jpg" alt="查无此图片" width="160px">
<img src="img/a.jpg" alt="查无此图片" height="320px">
<img src="img/a.jpg" alt="查无此图片" width="320px" height="240px">
</body>
</html>
1.6 标签分类：div，span
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
1. 按是否包裹内容
1. 成对标签
2. 单独标签
2. 按是否自动换行
1. 块级标签: block -> 自动换行: h1
div : divide + css
2. 内联标签: inline -> 不会自动换行: a
span + css 取代font标签
-->
<font>font</font> <!--成对-->
<hr> <!--单独-->
<img src="" alt=""> <!--单独-->
<a href="#">嘻嘻</a> <!--成对-->
<hr>
啦啦
<h1>h1</h1>
嘻嘻 <br>
<a href="#">a</a> <br>
呼呼
<hr>
<div>div</div>
<div>div</div>
<span>span</span>
<span>span</span>
</body>
</html>
1.7 表格标签：快捷键，table(嵌套)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
1. 子标签
1. tr : table row 行
2. caption : 表格的标题 (正中上)
2. 子子标签
1. td : table data 数据
2. th : table header 数据标题(td的居中加粗)
属性: 1. border : 边界
2. cellspacing : 单元格之间的距离 (默认2px) -> 外间距
3. cellpadding : 单元格边框到内容的距离(默认1px) -> 内间距
4. width : 表格的宽度
渲染的优先级: 属性的绘制是有顺序：先左后右, 先上后下(网页坐标原点: 左上角)
特殊的属性：align : center：1. table : 整个表格居中
2. tr : 整行的内容居中
3. td : 单元格内容居中
-->
<table border="1px" cellspacing="0px" cellpadding="10px" width="500px" >
<caption>学生成绩表</caption>
<tr>
<td align="center"><b>姓名</b>前端学习 HTML+CSS进阶