计算机基础知识：
硬件：控制器、运算器、输入设备、输出设备、存储（内存（读写快 存储空间小）、硬盘（读写慢，存储空间大））
软件：系统软件：windows，linux，mac···
应用软件：微信，qq，B站···
b(browser浏览器/s（server服务器）:浏览器、跨平台、无需安装、不需要更新
c（client客户端)/s（server服务器）:客户端、不跨平台、安装、更新、大型专业应用、对安全要求比较高的（eg：导弹系统）
浏览器：
前端代码通过什么转换成网页: 浏览器(渲染和解析)
浏览器: 网页显示、运行的平台
常见浏览器: ie浏览器、 火狐浏览器、谷歌浏览器、safari浏览器、opera浏览器 (欧朋浏览器)
浏览器渲染引擎: 代码转换成页面 (浏览器的内核)内核: 浏览器的核心，用于处理浏览器所得到的各种资源
chrom、opera: webkit引 警分支: blink
ie: triden
火狐: gecko
safari: webkit
引擎不同，速度，性能都不同
前端高端只是: angular angularjs VUE reactweppack node.js
网页基础认知
什么是网页?
网站: 因特网上根据一定的规则，用html等制作的用于展示特定内容相关的网页集合
网页: 构成网站的基本元素 xianoupeng.com
网页都有啥? ----文字、图片、音频、视频、超链接 打开网页看见的
网页的背后: 前端程序员写的代码--------京东网页源代码 (不要害怕)
结构、表现、行为----------html\css \javascript
web标准: 一系列标准集合 w3c(万维网联盟): 国际最著名的标准化组织 为三层分离浏览器不同，显示页面以及排版会有差异构成:主要包括:结构(网页元素进行整和分 html)、表现(外观样式，主要指ss) 、行为(网页模型的定义及交互的编写)
什么是html?
超文本标记语言，描述网页的语言
超---------不仅有文字，还有图片、音频、视频等等
------可以从一个页面跳转到另外一个网页 (超级链接文本)
文本:
标记:文本要变成超文本，就需要各种标记符号
语言:每一个标记的写法、读音、使用规则，构成标记语言
html：超文本标记语言
超：（超级链接文本）超链接--从一个页面跳转到另外一个页面（不仅有文字 还有图片 音频 视频等等）----结构
html---结构
css---表现
javascript---行为
html基础语法：
参考文档：w3c官网html标准
https://html.spec.whatwg.org/multipage/
搬运工：w3school--免费<marquee>w3school找不到
MDN html elements(推荐）
标签=元素
<起始标签> + 标签体（内容）+ </结束标签> ---双标签
（大小写不敏感---建议小写（标准）)
一定要保存（ctrl+s）再刷新
<input />---单标签 推荐
<input>
html标签（元素）：
可以互相嵌套
eg:
<marquee>+ ··· + <input/></marquee>
属性：给标签添加附加信息的
属性名=“属性值” 中间要空格
disabled="disabled"
=
disabled
1.html基本结构(骨架)：
<html>
<head>
<title>你们好，欢迎尔等</title>
</head>
<body>
</body>
</html>
注释：<!-- -->
2.标题标签:
< h1~h6 逐级减小 独占一行>
3.段落标签：
<p> </p>
4.文本格式化标签：
加粗：<strong> </strong>
<b> </b>
斜体：<em> </em> / <i> </i>
删除线：<del> </del> / <s> </s>
下划线:<ins> </ins> / <u> </u>
脚标X2： x<sub>2</sub>
平方x的平方：x<sup>2</sup>
5.换行标签及水平线：
换行：<br /> ---单标签
水平线：<hr /> ---单标签
6.图片标签：
<img src="" alt="">
<!--src 指向图片地址的-->
同一级(代码跟图片在一个文件夹里)
<img src="../+想要呈现的图片">
<!--alt 图片地址发生错误时，用来对图片进行提示的-->
<!--title 提示文本，鼠标悬停时，出现的文字-->
<img src="/+想要呈现的图片" alt="我是灰太狼" title="我要去抓羊了" width="xxpx" height="xxpx">
注意：width=" xx px" height=" xx px" 根据美工提供的数据不要胡乱设置，或者只设置一个，避免出现压缩
7.路径：
同一级别：
相对路径：
返回上一级：<img src="../xx">
当前级：<img src="./xx">
下一级：<img src="/xx">
绝对路径：在电脑上的定位
不建议使用，别人的电脑不一定有
如果图片显示不出来，可能就是图片路径不对
8.视频标签：
<video src="images/video.mp4" controls="controls" loop="loop" autoplay muted></video>
controls="controls" = controls
loop="loop" = loop
autoplay=自动播放
muted=进入视频时静音
9.音频标签：
<audio src="images/music.mp3" controls loop></audio>
10.超链接
eg:
<a href="./11-超链接2.html" target="_blank">点击我进行跳转</a>
<!--target 控制链接打开方式 -->
eg:
<a href="https://www.baidu.com" target="_blank">去百度</a>
11.超链接2
<img src="images/cat.gif" alt="">
12.锚链接
<a href="#one">去xx那里</a>
<!--id 身份证号 一个元素只有有一个id 同一网页内，id不能重复>
13.练习
<!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>
</head>
<body>
<h2>今日搜索热词</h2>
<p>
<h4>1、阿卡贝拉</h4>
阿卡贝拉（意大利：Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。<a href="音频标签.html" target="_blank">点我进行跳转</a>音频示例： 阿卡贝拉《千与千寻》
</p>
<p>
<h4>2、翻唱</h4>
“翻唱”是指将已经发表并由他人演唱的歌曲根据自己的风格重新演唱，包括重新填词，编曲。现在已有不少明星，都在翻唱他人的歌，不断在翻唱中突破自己，给大家带来不一样的风格。<a href="视频标签.html">点我进行跳转</a>视频示例： 有一种悲伤（翻唱）-《A Kind of Sorrow》
</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>
</head>
<body>
<video src="video.mp4" controls="controls" loop="loop" autoplay muted></video>
</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>
</head>
<body>
<audio src="music.mp3" controls loop></audio>
</body>
</html>
14.特殊字符
<p>姓名： xx</p>
<!-- <p><</p> < -->
<p>></p>
<!-- <p> </p> -->
<p>¥</p>
<p>©</p>
eg:
<p>姓名： 缑欣</p>
<!-- <p><</p> < -->
<p>></p>
<!-- <p> </p> -->
<p>¥</p>
<p>©</p>
15.有序列表
eg:
你喜欢的食物是：
<ol type="i">
<li>xx</li>
<li>xx</li>
<li>xx</li>
</ol>
<li>xx</li>里面什么标签都能放
eg:
你喜欢的食物是：
<ol type="A">
<li>椒麻鸡
<a href="#">去百度</a>
<img src="images/cat.gif" alt="">
</li>
<li>榴莲</li>
<li>螺蛳粉</li>
</ol>
16.无序列表
eg：
你喜欢的明星是：
<ul type="i">
<li>xx</li>
<li>xx</li>
<li>xx</li>
</ul>
i:这种出现圆点列表开头
eg：
你喜欢的明星是：
<ul type="square">
<li>梁朝伟</li>
<li>黄子韬</li>
<li>周杰伦</li>
</ul>
squre：这种出现方块列表开头
17.自定义列表
<dl>
<dt>线下门店</dt>
<dd>web之家</dd>
<dd>服务网点</dd>
<dd>web之家</dd>
</dl>
18.框架
eg:
<iframe src="https://www.taobao.com" frameborder="1" width="800px" height="600px"></iframe>
<iframe src="./08-视频.html" frameborder="1" width="800px" height="600px"></iframe>
<a href="https://www.taobao.com" target="nn">点击我进入淘宝</a>
<iframe name="nn" frameborder="0" width="800px" height="400px"></iframe>
19.表单
<form action ="#">
用户名：<input type="text" name="userName">
密码：<input type="password" name="one">
<input type="radio" name="r1" value="女">女
<input type="radio" name="r1" value="男">男
若需要设置默认选择：+一个checked
<input type="radio" name="r1" value="女" checked>女
<br>
爱好：
<input type="checkbox" name="love" value="sing">爱唱歌
<input type="checkbox" name="love" value="dance">爱跳舞
<input type="checkbox" name="love" value="rap">爱rap
<select name="xiala" id="">
<option value="西安">西安</option>
<option value="成都">成都</option>
<option value="南京">南京</option>
</select>
<!--maxlength 最大长度-->
<textarea name="jianjie" id="" cols="30" rows="10" maxlength="20"> </textarea>
<br>
<input type="file" name="wenjian" id="">
<!--<input type="button"> 普通按钮-->
<input type="submit" value="tijiao">
<br>
<input type="email" name="number" id="">
<input type="date" name="" id="">
<input type="time" name="" id="">
<input type="color" name="" id="">
<button disabled>提交</button>
</form>
注意：
1.所有表单必须有name属性
2.所有表单包含在form
3.多选，单选必须有value
4.name一样是一组，不一样可多选，单选name值一样
20. label标签
<form action="#">
<!-- 1、 -->
<label for="sing">爱唱歌</label><input type="checkbox" name="love" id="sing">
<!-- 2 -->
<label> 爱跳舞<input type="checkbox" name="love" id=""></label>
</form>
101
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
