关于前端的碎碎念1-html打基础

学习前端，前端就好比如盖房子~

html就充当了房子结构这部分，也是房子的基础。
css呢，就好比咱们房子的装修，墙面什么颜色，什么风格，什么地板...这些给房子改变风格，样式的就是css
javascript呢，就好比这个房子的功能，房子需要制冷吧，需要暖气吧，也需要上下水吧。这些功能性的就相当于是javascript
好了，大概这样子开始吧。
前端工具（vscode/sublime/EditPlus/Dreamweaver/Photoshop/Fireworks等）

目前的话喜欢用下面这些，仅供参考哦：
编码的话还是喜欢用 EditPlus和HBuilder ，vscode也是非常强大的
切图当然要ps啦,其他协作工具如蓝湖也是很赞的
最最头痛的ie兼容性测试就IETester+install-debugbar哦
浏览器 选谷歌或者火狐都可以滴2、html，CSS

前端开发概况、代码入门
页面基本结构、文档声明、编码声明、css语法、style属性、link和style标签、id属性、基本样式、Border 、Background、 Font、盒模型、文本设置...

常用标签集合
header、article、aside、section、footer、nav、h1-h6、p、ul、ol、li、img、dl、dt、dd...绝对路径、相对路径、标签语义化、标签嵌套规范、SEO...

常用选择器&标签类型划分
Id、class、类型选择、包含选择、群组选择、通配符、选择器优先级、标签样式初始化订制方案、超链接及伪类划分、标签类型划分及特性、inline、inline-block、block..

浮动进阶
浮动的作用、浮动的特性、文档流、浮动的各种问题、clear、BFC(块级格式化上下文)、触发BFC的条件、Haslayout、Haslayout的触发条件...

定位
relative相对定位、Absolute绝对定位、Fixed 固定定位、inherit 继承、static静态定位、默认值、zIndex层级问题、margin负值、透明度...

表格和表单
表格标签、表格样式重置、单元格合并、表单元素、表单相关的属性操作、表单默认样式初始...

兼容性问题处理
兼容性问题总结、浮动在IE6，7下的各种问题、表单在低版本IE的问题、处理低版本IE对新增标签的支持、CssHack、条件注释语句、PNG问题、透明度的问题、固定定位在IE低版本的处理方式...

整站进阶
样式规划、favicon、Css Sprite、Data URI、隐藏元素、测试工具使用、滑动门、等高布局、三列布局、未知宽高图片在容器内水平垂直居中、文本水平垂直居中、多行文本水平垂直居中...

css3入门
transition、属性选择器、nth-of-type、nth-child、backgroundSize、box-sizing、圆角，盒模型阴影、文字阴影、rgba、表单高级、H5表单新增属性、E:not(s)、E:target、E::selection、background-clip...

移动端布局
测试环境Emulation、viewport、window.devicePixelRatio、物理分辨率、Media Queries、rem、window.screen、移动端布局相关问题、window.deviceorientationevent、横竖屏判断...

Animation和Transform
浏览器前缀、keyFrames、Animation调用、播放次数设置、动画偶数次调用顺序、Animation的问题、无缝滚动、动画播放|暂停、rotate旋转、deg、skew斜切、scale缩放、translate位移、transform-origin、transform的执行顺序问题...

Bootstrap前端开发框架
Html语法规范、CSS语法规范、Less 和 Sass 中的嵌套、class 命名、选择器、Normalize.css、栅格系统、排版、代码、响应式工具...

~follow me~

HTML标签的学习
超文本标记语言(HyperText Mark-up Language 简称HTML)，“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
html是一个网页的骨架，就好比是盖房子的结构~这也是前端页面的基础。试着想一下，如果一个房子连砖头和水泥都没有，后面的步骤又有什么意义呢？所以我们必须完全掌握HTML的基本结构和常见的标签，属性。有了一个好的开始，距离成功已经一小半啦~

关于HTML怎么记忆、学习？可能一上来死记硬背，也不会有太好的预期。而且还有可能被吓到？
“我去！这么多标签！怎么记得玩？”

个人感觉有两点可以尝试：

1，语义化的去记忆。比如ul li这个就是列表，button就是按钮，table就是表格。其实这也是html5所倡导的，语义化标签。
2，试着写一个一个小的demo，也许就只是一个列表，一个表格，或者一个按钮。也许写着写着你就懂了呢？

学习HTML就是要自己不断的去写，去尝试。看着自己的代码能跑起来，有了心目中的效果，这种心情还是很开心的！给大家推荐一个学习手册，w3cSchool，这里面有在线的代码编辑器。可以边写边看到效果~


整理Html笔记，总结学习收获
-->Html就是提供网页上的内容，仅仅是“提供"而已，这一点学习了后面的Javascript和Dom就明白了，其实Html只是显示作用。
Css提供美化，辅助Html，使显示的效果更加绚丽。
学完Html，紧接着就是Javascript，-->Dom-->JQuery-->Asp.net...
-->坚持手写HTML，这个在学习初期非常关键。
-->C/S(Client/Server) 客户端与数据库服务器交互方式，比如QQ聊天工具、飞信通讯等。
-->B/S浏览器与Web服务器交互方式，比如用浏览器浏览网页、迅雷迷你界面显示信息等。
根据域名找服务器，发送一个请求，服务器判断是否有这个资源，返回给浏览器…，请求响应模式。
-->网站会有很多很多网页和其它东西，如图片、下载资源…
-->Html是树形结构，类似于之前学习Winform的treeviewr结构。
-->Dreamweaver是可视化工具，但对于刚开始学习Html，记事本或者Notepad++即可。
-->标题标签一般都是用<h3></h3>。随着数字的增大字体会变小。
-->高级记事本可以撤销多次，而记事本只能撤销到前一次；高级记事本还能高亮显示。
--><!--注释内容-->
注释不能嵌套，千万不能嵌套！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
-->颜色还可以用十六进制数来配置自己需要的颜色或者用取色器来设置颜色。
-->URL是由协议+域名/IP地址+文件路径三部分组成。
-->超链接：绝对路径：C:\Users\lenovo\Desktop\第一个网页.html
相对路径：./1.html或1.html当前目录找
../1.html切到上一级目录
根路径：/
--> 超链接的一个属性：<a href=”” target=”设置值”></a>
默认是当前窗口打开_self
新窗口打开_blank
--> 超链接锚定：<a name="#middle">中间内容</a>
<a href="#middle">########</a>
-->图片地址区分当前目录和相对目录。
-->写图片地址时，必须写明图片的width和height，防止加载失败并破坏图片布局。
-->写图片地址时，border设置为0，防止图片有超链接时有边框。
-->alt为图片无法显示时提示的文本。
title为鼠标放到图片上显示的文字。
-->图像：bmp jpg gif png
位图； 压缩； 压缩，能动（多帧）； 压缩，支持透明；
-->ul——unorder list；ol——order list；
-->通过修改ul属性type修改显示图标：type=disc,circle,square
ol属性type修改显示图标：type=1,a,A,i,I
-->必须熟练掌握ul列表，用在导航、列表
-->Question!!!!!!!!!!!!!!!!!!!!!!
1、text和password不一样长；
2、无法改变button的长度；
3、table的边框太粗table内文字样式；
4、ul横向显示！！！！！！！！！！！！！！！！！！！！
-->注意<table>与<tr>与<td>align的居中区别：表格居中与内容居中与内容居中。
-->rowspan和colspan区别。
-->IE中<th></th和<td></td>中如果没有内容，将不会显示单元格。加个 就会显示单元格。
-->属性border值设置；属相bordercolor值设置。
-->页面上可以有多个form标签。！！！！！！！！！！！ -->必须将表单元素放到form中！！！！！！！！！！！！！！！！！！！！！！！！！！！！！

-->text标签属性：使用readonly属性必须写完整：readonly=”readonly”
使用disabled属性也必须写完整：disabled=”disabled”代表禁用该表单元素。
-->文本框和密码框在IE中长度不一样。
-->radio标签属性：name属性用来分类别，用来分组。
-->select标签默认选中是用selected=”selected”
不同于radio和checkbox的默认选中：checked=”checked”
-->设置select的size属性值：下拉框(size=”1”)、列表(size=”2,3…”)，multiple=”multiple（多选）
-->textare修改属性rows和cols修改大小，并且原样输出。
<input type="button" value="注册"/>
<input type="submit" value="注册"/>
<input type="reset" value="重置"/>
<input type="image" src="btn.jpg"/>作用跟submit一模一样，只是将文字换成图片而已。
-->所有的表单元素都有属性：id：唯一标识控件；
name：表单提交；
value：显示或者表示值；.
-->label标签中设置属性accesskey可以设置快捷键，用Alt+字母键即可。不会与浏览器的快捷键发生冲突的。
-->fiedset：效果跟GroupBox一样。
--><marquee></marquee>通过属性direction设置方向；
属性scrolldelay设置时间；
-->播放声音：
<embed src="temp.mp3" loop=true autostart=true name=bgss width="460" height="68">会看见插件，将width和height设置为0，也会不可见。
<bgsound src=”temp.mp3” loop=”true”/>不会看到插件，并且只有IE才支持。
<form>
<input type=”submit”/>
<input type=”text”/>
…
<input type=”hidden”/>
<input type=”file”/>
</form>

<textarea></textarea>

<select>
<option></option>
<option></option>
</select>
-->注意以上三个分开记清楚了。！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
-->快捷键<input Tab 会自动补齐。
-->XHTML 1.0与HTML4.0区别
XHTML是符合XML的HTML。XHTML更加严谨。
XML必须要有结束，如<br/>
XML要求属性都要有值，如checked=”checked”

-->在VS中，当VS建立的文字不在默认的文件夹，解决方案需要自己手动选择目标解决方案，再点击文件--….slin另存为到目标文件夹。
-->注意：显示隐藏文件夹，有一个…suo类型（Solution User Options）的文件，该文件是记录用户上次操作到界面。
-->Web开发、ASP.NET包括：
浏览器发送请求给服务器；
服务器接收请求并处理请求；
服务器将处理结果发送给浏览器；
-->IETester测试工具；
-->HTML的标签是定义好的，XML可以自己定义标签。
XML比较严谨，属性必须有属性名和属性值。
XML用来保存数据。
XHTML相对于HTML更加严谨。
DHTML动态的HTML，不是动态网页。HTML、样式表和Javascript的组合。
注释不能嵌套。
静态页面是纯展示页面；
-->Div：块；块级元素从上往下一块一块放。
-->Span：只是把一些文字圈起来；从左往右放。
-->样式表
1、用法（3种用法）；
2、常用属性；
3、选择器（重点）；
-->元素内联到页面嵌入，类似于C#中的方法；
再到外部引用，类似于C#中的类。

-->就近原则，而不是优先级的原因。
-->浏览器默认字体大小为16px。
-->复合样式可以设置单独所有的属性。
-->样式表中的设置：<input type=”text” style=”display:none;”/>不可见不占位置；
<input type=”text” style=”visibility:hidden;”/>不可见但仍占位置。
<ul style=”list-style-type:none”>…</ul>
-->透明度：
<div style="background:red;width:200px;height:200px;filter:alpha(opacity=50)"></div>
只针对IE才有效果。opacity取值从0到100之间。
-->透明度（标准写法）：
<div style="background:red;width:200px;height:200px;opacity:0.5"></div>
除了IE都有效果。opacity取值从0到1之间。
-->当发生冲突时，以就近原则为主。
-->包含选择器是指…的…
组合选择器用逗号分隔。
-->注意超链接的四种方式是有顺序的：记住LoVe HAte：link visited hover active。
-->细边框两种方法：
第一种方法：
#tb
{
width:500px;
background-color:yellow;
border-bottom:solid 1px red;
border-right:solid 1px red;
}
td
{
border-top:solid 1px red;
border-left:solid 1px red;
}
先将表格显示底部和右侧边框，然后单元格只画上部和左侧边框
总得下来，只有一条边框。
第二种方法：
#tb
{
width:500px;
background-color:green;

border:solid 1px red;
border-collapse:collapse;
}
td
{
border:solid 1px red;
}
利用collapse折叠，当有边框重复时，折叠成一条边框。
-->注意，当使用float属性时，在<div></div>设置中，设置了最后一个之后，会影响后面紧接着的内容。需要清除<p style="clear:left"></p>或者 <br style="clear:left"/>或者<div style="clear:left"></div>就行。
-->当子div一个一个放在一个大的div中，会根据小div的width总和是否超过大的div的width，如果超过，从下一行紧接着排列。
-->表格布局就是表格套表格的原理。
-->框架布局应用：OA系统…
-->框架布局就是分布建页面，再结合起来。
-->属性noresize=”noresize”不允许拖动边框大小。
-->Web服务器软件：IIS
-->买域名www.bbs.huaweicloud.com备案（1、花钱；2、买一个国外的空间。）
买空间（ftp）（ip地址：域名指向IP地址）
买数据空间
-->检查DNS是否有问题ipconfig /all就显示DNS是否有地址。
--><div></div>从上往下摆放。<span></span>从左往右摆放。
-->文档流：
top:100px;
left:100px;
position:absolute;


top:100px;
left:100px;
position:relative;相对于上面的absolute，原来的位置仍然还在。
z值越来，在屏幕最前，而且必须脱离文档流
z-index:100;


position:absolute;
top:100px;
left:100px;

position:fixed;相对于absolute，坐标相对于整个视图。不会随着滚动条的变化而变化。
ok~学习完成html后，我们来到第二阶段——css
去给我们的房子装修一番吧~