JavaScript HTML基础1
如果想在外行人面前展现你的专业性的话，怎么来展现呢？外行人更关注你的专业素养，他问出的问题各种不专业，让你各种鄙视他，但是他就这是这样的各种不专业。他就拿不专业的眼光来衡量你是否专业！
就象一个投资人来衡量你的项目是否值得被投资一样。如果他精通你的东西他就自己干了，他还审视你干嘛！他怎么觉得你这个人非常了不起，你的专业素养占了很大的成分。
这个东西(什么是HTML)就叫做一个语言的专业素养。我可以不懂的，不影响我工作。你也可以不懂，照样不影响你学习。但你的专业素养降了，专业素养可以给你的人生创造很大的价值，所以同学们人生的一些小细节可以帮助我们成就大事的。
HTML
什么是html？超文本标记语音，HTML是他"hyperText markup language"的缩写。html语言是由一对一对的标签组成的，每一对标签都有一对标签的特殊功能，这么多的标签拼到一起形成一个语言。
<html> <head> <meta charset="UTF-8"> <title>网页标题栏上显示的内容</title> </head> <body> hello world！你好世界 </body> </html> <!-- html是根标签，一个html文件只能有一对html标签，代码只能在根里面写不能写在外面去。head、body是结构化标签这两个标签必须得有。head里面装的是思想是设置给浏览器看的编码字符集等，body主要是给展示给用户看的， 在一个网页里head标签是给浏览器看的 -->
在head里写一个标签meta，标签里有一个属性charset="UTF-8"每一个标签都可以填属性，每一属性也都代表一个功能。属性名用等号连接一个属性值，属性名不需要加双引号，属性值必须加双引号。
<meta charset="UTF-8">
charset编码字符集的意思，属性值正常情况下我们写"UTF-8"就行了，写上他浏览器可以认识任何一个国家的语音。
编码字符集常用的就四个，"gb2312"他叫中国的国家标准第两千三百一十二条，他包括中国的、韩国的，泰国的亚裔的都有，不好的是只识别简体不识别繁体版本，出来一个国家扩展版本"gbk"里面包括了繁体，他包含了所有的亚裔字符集，这几个都不是现在常用的。真正常用的就两个一个是unicode万国版还有一个是"utf-8"是unicode的一个升级版，"utf-8"最常用最通用的万国码。
属性在头标签上写，标签对的第一个标签叫头标签。
<html lang="zh-CN"> <html lang="en"> <!-- 搜索 tomford代购 正常浏览网页的时候，后台数据都监控，每个人都有一个数据画像，知道你的生物行为什么样的，淘宝正常的下单，你会走几级页面，你停留多长时间，会考虑多长时间，付款多长时间，都有一个正常时间判断的。 搜索引擎优化技术seo(Search Engine Optimization)前端领域的一部分技术 <meta content="" name="keywords"> <meta content="" name="description"> -->
告诉搜索引擎爬虫，我们的网站是关于什么内容的。"en"是代表关于英文内容的"language english"缩写，中文是"zh"、德语是"de"<html lang="zh-C,en">
p标签
<p>this is paragraph</p> <p>this is paragraph</p> <p>this is paragraph</p> <p>this is paragraph</p>
p标签paragraph缩写，段落标签用途比较单一简单，他能让标签里面的内容成段展示，不管里面写多少东西，都能成单独的一段。
h标签
<h1>标题</h1> <h2>标题</h2> <h3>标题</h3> <h4>标题</h4> <h5>标题</h5> <h6>标题</h6>
标题标签header缩写从h1-h6，标题大小不一样，一级标题到六级标题逐次减小，每一个标题独占一行，加粗字体。一般情况下是做到报纸展示页面的标题，word里的一号标题二号标题，几级段落就放几级标题。
strong加粗标签、em斜体标签
<strong>加粗</strong> <em>斜体</em> <!--又加粗又斜体--> <strong> <em>举个例子,又斜体又加粗</em> </strong>
中划线
<del style="color:#999;">原件￥100</del>
地址标签
<address>北京市丰台区南蜂窝路</address> <!--模拟address标签默认效果--> <p> <em>北京市丰台区南蜂窝路</em> </p>
div、span标签
<div></div> <span></span>
没有具体的作用，正是因为没有具体的作用，充当了一个非常好的效果当做容器使用，分块明确能划分功能块，让页面更加结构化。
<div style="color:#f40;"> <strong>a</strong> <em>b</em> <del>c</del> </div> <!-- #f40淘宝红 -->
英文单词分割符
我想把div当成宽高100像素的容器，这个容器宽高各100像素是有范围的，容器里填充文本的话应该在他固定的范围里去填充，英文单词到边界的时候应该换行展示。
<div style="width:150px;height:150px;background-color:yellow;margin-bottom:20px;"> IcanplayEnglishsentences.Iamayellowbox.IcanplayEnglishsentences.Iamayellowbox. </div> <div style="width:150px;height:150px;background-color:yellow;margin-bottom:20px;"> 中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文 </div> <div style="width:150px;height:150px;background-color:yellow;margin-bottom:20px;"> I can play English sentences. I am a yellow box.I can play English sentences. I am a yellow box. </div>
IcanplayEnglishsentences.Iamayellowbox.IcanplayEnglishsentences.Iamayellowbox.
这是一个黄色的盒子，里面的文字能自动换行。这是一个黄色的盒子，里面的文字能自动换行。
I can play English sentences. I am a yellow box.I can play English sentences. I am a yellow box.
第一个div里的英文单词并没有换行溢出了。第二个div里中文汉字没有溢出，为什么汉字可以换行，英文单词就出去了呢？
浏览器能识别一个汉字就是一个汉字他不会连着，我要写很多单词连着写，浏览器只能识别每个字母是一个字母，但他不能识别那是一个一个的单词，字母连着浏览器以为是一个单词，既然是一个单词的话就不能给换行。
所以如果让浏览器识别一个单词是一个单词，必须加一个空格。编辑器里的空格和文本里理解的那个空格不一样，编辑器里的空格是有特殊的语法含义的，他的语法含义叫做英文单词分割符。
换句话说不管你连着写多少个空格都是为了分割前后字符的，写了空格浏览器认识了是了这是一个单词那是一个单词，既然是一个个单词浏览器就合理的展示了，最下面的div里单词有了空格就不溢出了。
<div>好好 学习</div> <!-- 中间有很多空格,最后在浏览器里只展现一个空格 -->
单词中间不管连着写几个空格，发现都是一个空格，因为他不代表空格文本。空格在HTML里不是空格文本，他是文本分割符。所以不管有多少个空格，他只分割一次，他仅此而已不能当做文本来使。
例 子
空格不行那回车行不行，多回车几次依然没有用，回车跟空格一样都代表文字分割符。那我就想打出空格文本能不能办到呢？html是由标签组成的，有没有标签代表空格功能，没有这样的标签，有一个特殊的东西叫"html编码"。HTML编码有很多个，他基本能把特殊字符全能表达出来，真正开发中最常用的就三个。
html编码
html编码的格式"&"开始";"结尾中间填充的内容就是HTML编码的特殊字符，比如" "这个就代表一个空格文本。
"距 离" <!-- 真正代表很多个空格 -->
"这是<div>标签"把这行文本完整的展现到页面上显示，为什么"<div>"打印不出来，因为他有语法含义，为什么他有语法含义，因为div两边有"< >"两个尖角号，他是一个html标签。我们如何把"< >"这两个尖角号替换掉，能不能替换掉？用HTML编码。
这两个"< >"尖角号在数学里是有特殊含义的，"<"这个尖角号在数学里是小于号，小于号用英文词组里是"less than"(小于less than国际通用)把首字母拿出来"<"就是html编码里的小于符。大于号英文"great than"同样">"是html编码里的大于号。
这是<div>标签 <!--这是<div>标签-->
ps:more更多的,更大的,我们理解的跟外国人的不一样，more只能代表数量多,手上钞票的数量比你多才能用more，more应用场景是比较少的。人和人比较之间都是程度上的比较，程度上的比较用"great"，评价一个事用很好用great，程度上超过预期。
回车<br>标签
接下来说一下回车，回车有HTM编码吗？抱歉回车有没有HTML编码，回车可以使用的一个标签"<br/>"一个br标签代表一个回车的意思，一个br标签代表一个换行符，两个br标签或多个代表多个换行符。
远远的<br/>地方 <!-- 远远的 地方 -->
这里是不是有点诧异！为什么br标签是单独？标签正常来说都是成对出现的，每一个标签的意义在于致力于把他包裹的文本作用成他想作用成的样子。一般标签成对出现是想修饰里面内容的，但有些标签他自己就代表着功能，他不需包裹任何东西就能展现出功能，这样标签就他就不需要成对出现，比如回车"<br>"标签他自己都代表着功能，我们把单独出现自己就是功能的标签叫做单标签。我们见到的单标签极其少"meta、br、hr..."
有序列表
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>有序列表</title> <style> </style> </head> <body> 从1、2、3...往下展示 <ol> <li>《marvel》</li> <li>《速8》电影</li> <li>《返老还童》</li> <li>《了不起盖茨比》</li> </ol> 从a.b.c... <ol type="a"> <li>《marvel》</li> <li>《速8》电影</li> <li>《返老还童》</li> <li>《了不起盖茨比》</li> </ol> A.B.C... <ol type="A"> <li>《marvel》</li> <li>《速8》电影</li> <li>《返老还童》</li> <li>《了不起盖茨比》</li> </ol> 罗马数字 <ol type="i"> <li>《marvel》</li> <li>《速8》电影</li> <li>《返老还童》</li> <li>《了不起盖茨比》</li> </ol> 大写罗马数字 <ol type="I"> <li>《marvel》</li> <li>《速8》电影</li> <li>《返老还童》</li> <li>《了不起盖茨比》</li> </ol> <!-- type="1/a/A/i/I" 一共就五种 --> reversed属性 <ol type="1" reversed="reversed"> <li>《marvel》</li> <li>《速8》电影</li> <li>《返老还童》</li> <li>《了不起盖茨比》</li> </ol> <!-- ps: flash 闪电侠 主角 红衣服黄光 reversed-flash 反派 黄衣服红光(逆闪) reversed：反过来的意思 --> 如果不从1开始排想从第2开始排 <ol type="1" start="2"> <li>《marvel》</li> <li>《速8》电影</li> <li>《返老还童》</li> <li>《了不起盖茨比》</li> </ol> <ol type="a" start="c"> <li>《marvel》</li> <li>《速8》电影</li> <li>《返老还童》</li> <li>《了不起盖茨比》</li> </ol> 罗马数字从117开始排 <ol type="i" start="117"> <li>《marvel》</li> <li>《速8》电影</li> <li>《返老还童》</li> <li>《了不起盖茨比》</li> </ol> 英文字母从117开始排 <ol type="a" start="117"> <li>《marvel》</li> <li>《速8》电影</li> <li>《返老还童》</li> <li>《了不起盖茨比》</li> </ol> 总结：start从第几个开始排，写第几个就可以了 </body> </html>
无序列表
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>无序列表</title> </head> <body> 无序列表展示形式是无序的 他只有一个"type"属性可以更改 默认: type="disc" <ul type="disc"> <li>草莓</li> <li>苹果</li> <li>橙子</li> </ul> <ul type="square"> <li>草莓</li> <li>苹果</li> <li>橙子</li> </ul> <ul type="circle"> <li>草莓</li> <li>苹果</li> <li>橙子</li> </ul> <!-- disc 缩写 discircle实心圆 circle翻译"圈"不翻译空心圆 order list 缩写 ol unorder list 缩写 ul --> </body> </html>
ul和li致力于做一些功能,有一些功能特别符合ul和li的天生父子结构。
有这样一个功能，这个功能由很多个功能子项来组成，每个功能子项的样式和功能基本上都是相同的，只不过他的内容有点小小的差异，很多的功能子项组成了这样一个大功能，这样的一个功能我们就用ul和li来展示，正好用到了ul和li这样的父子结构很符合需求。
简单举例柜子里的抽屉，柜子基本就是由抽屉来组成的，每个抽屉样子和功能都差不多，只不过里面装的东西不一样，这么多抽屉放到柜子里他们的父子结构跟ul和li差不多，ul就是大柜子li就是抽屉。
导航栏网站上最接近或者说就ul和li的应用场景，导航栏由很多个菜单项组成，每个菜单项是一个功能子项，样式和功能基本差不多，只不过他的内容不一样。每一个菜单项就是一个功能子项，他们共同构成了一个功能就叫导航栏。这样的功能我们更适合用ul和li展示，因为他们的父子结构或者说ul和li他们的结构天生就很好。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导航</title>
<style>
ul,li{
margin:0;
padding:0;
}
ul{
list-style:none;
}
ul li{
margin:0 10px;
float:left;
font-weight:bold;
font-size:14px;
color:#f40;
line-height:26px;
height:26px;
padding:0 6px;
}
li:hover{
background-color:#f40;
color:#fff;
border-radius:13px;
}
</style>
</head>
<body>
<ul>
<li>天猫</li>
<li>聚划算</li>
<li>天猫超市</li>
</ul>
</body>
</html>ul和li导航栏最好的骨架
Img标签
<img src="http://ruyic.com/blog/uploads/image/201904/155591911913470.png" title="图片提示符，鼠标移动到图片上显示"/> <img src="b.jpg" style="width:100px;" alt="地址出错的情况下显示" title="title 图片提示符"/>
img是images都缩写
src是source的缩写资源的意思,里面填写的是图片的资源地址
引入图片的方式:
1.网上url
2.本地的相对路径
3.本地的绝对对路径图片的一些属性:
alt 图片占位符，当图片地址发生错的情况下展示图片信息，虽然没法完全弥补图片不显示的损失，用文字简单的叙述一下图片。
title 图片提示符，当鼠标在图片上面时出现提示信息
A标签
<a href="http://www.baidu.com">百度</a>
A标签第一个功能叫超级链接，hyperText reference的缩写"href"翻译过来"超文本引用的意思"，你所指向的目标地址。
reference参考的意思，也有引用的意思。图书馆有一个参考区,参考区一般下面写reference(reference book参考书)，写论述引用谁谁的话叫reference引用。
A标签应用场景很广，A标签可以包裹任何东西，A标签里放一个图片，图片就有了被引用的功能，图片就能导向到下一页，a标签的内容可以是任意东西。
<a href="http://baidu.com" style="display:block;width:100px;height:100px;background-color:yellow;"></a>
上面的是在本标签页打开网站，怎么能在新标签页打开呢？在新标签页也能打开，语法就是在A标签里在加一个属性target="_blank"target是目标的意思，_blank是空的页。
<a href="http://www.baidu.com" target="_blank">百度</a>
a标签是anchor的缩写，一般是什么功能他的英文单词就怎么写，为什么A标签的缩写不是链接的英文单词？A标签第二个作用锚点，anchor(锚)定在某个点上抛锚的意思，汽车抛锚船抛锚。A标签最开始不是做超链接的，超链接是后天发展出的新功能。a标签最原始是锚点用的，记录一个位置通过A标签回到这个位置去。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>anchor</title>
<style>
a{
display:block;
position:fixed;
bottom:100px;
right:100px;
height:26px;
width:100px;
}
div{
width:100px;
height:900px;
}
</style>
</head>
<body>
<!-- 让第一个A标签记录第一个div的位置，第二个A标签记录第二个A标签的位置 -->
<a style="bottom:100px;background-color:#fcc;" href="#demo1">find demo1</a>
<a style="bottom:126px;background-color:#ffc;" href="#demo2">find demo2</a>
<div id="demo1" style="background-color:green;">demo1</div>
<div id="demo2" style="background-color:red;">demo2</div>
</body>
</html>A标签的作用：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>A标签的作用</title>
</head>
<body>
<a href="tel:10086">打电话</a>
<a href="mailto:admin@admin.com">发邮件</a>
<!--
1.超链接
2.锚点
3.打电话"<a href="tel:10086">打电话</a>"
在手机上时会拨打出去，除了打电话还可以用在发邮件上，这些都是A标签的附属功能，
发邮件这个功能并没什么用，但是打电话这个功能应用场景非常多，如果让移动端的网页打电话就是用这个A标签。
4.协议限定符,强制运行代码
ps:淘宝一下:拿技术实现就能拿技术更改
-->
<a href="javascript:while(1){alert('死循环\n提示框')}">come on</a>
</body>
</html>表单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单</title>
<style>
input{
border:1px solid #999;
}
</style>
</head>
<body>
<form method="get" action="">
<h3>输入框</h3>
<p>username：<input type="text" name="user" value="请输入用户名" /></p>
<p>password：<input type="password" name="pass" value="" /></p>
<h3>Choose your favourite fruit!</h3>
<p>
苹果:<input type="radio" name="fruit" value="apple"/>
香蕉:<input type="radio" name="fruit" value="banana"/>
橘子:<input type="radio" name="fruit" value="orange"/>
</p>
<h3>复选框</h3>
<p>
javascritp:<input type="checkbox" name="page" value="javascritp"/>
html:<input type="checkbox" name="page" value="html"/>
css:<input type="checkbox" name="page" value="css"/>
</p>
<p><input type="submit" value="LOGIN" /></p>
</form>
<!--
form表单:作用发生数据，从前端往后端发送数据，后端处理完数据并返回
method:数据发生方式
action:数据接收方的地方
表单组件input:
input因type值不同组件的不同化，text输入框、password密码框
传送数据必须有两点数据的命与数据的值
name:发送数据的名
value:发送数据的值
ps:审查工具里查看表单密码
var inp = document.getElementsByTagName('input')[1];
inp.value;
单选框一个选择体里面的name值要统一样的，复选框和单选框十分类似，只不过type的值变成checkbox
-->
</body>
</html>默认选中与用户体验
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>默认选中</title> <style> </style> </head> <body> <form method="get" action=""> <h3>CHOOSE YOUR SEX!</h3> <p> male:<input type="radio" name="sex" value="male"/> female:<input type="radio" name="sex" value="female" checked="checked"/> </p> <p><input type="submit" value="longin" /></p> </form> </body> </html>
这个页面那块不好？现在产品对缺乏的是对用户的吸引。产品要符合三个特点，第一点刚需比如社交，所有产品都有刚需，为什么用这个，第二点用户体验问题。第三点用户粘性的问题，用户粘性是产品定位使用方法粘性。
什么叫好的用户体验？基于好看的层面上最根本的一点是，一定要让用户尽量减少他的操作，就能完成他的功能，叫培养用户的懒习惯。一个最好的产品能让你用最少的操作完成最根本的，能跳转一层就不跳转两层，能不操作就尽量不操作，节省时间只要不动手就感到很方便。
这个页面能把懒操作的习惯调动起来吗？从概率学上来讲，一百个人访问网站不能方便每一个人，大概一半男一半女，有一个默认选中女，那节省了一半人的操作。如果有一个默认选中，用户体验从一定的角度上就会变的好一些了，这些细节把每个细节的用户体验都做到最佳，就是一个好的体验，包括下来菜单默认的是国籍都是china，日期一般都是1990年...
默认选中是有意义的，如何实现一个默认选中功能呢？加一个属性checked="checked"在单选框上默认，checked在复选框上也能默认。
下拉选择：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Select</title> </head> <body> <form method="get" action=""> <h3>Province</h3> <Select name="Province"> <option value="bj">北京</option> <option value="sh">上海</option> <option value="tj">天津</option> </select> <p><input type="submit" value="longin" /></p> </form> </body> </html>
小例子：请输入关键字
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>请输入关键字</title>
<style>
input{border:1px solid gary;height:30px;line-height:30px;}
</style>
</head>
<body>
<form method="get" action="">
<p><input type="text" name="search" value="请输入关键字" style="color:#999;" onfocus="if(this.value=='请输入关键字'){this.value='';this.style.color='#424242';}" onblur="if(this.value==''){this.value='请输入关键字';this.style.color='#999';}"/></p>
</form>
<!-- 编程就是淬化思维,量化思维的过程。-->
</body>
</html>