前端html学习1

学习前端大框架

1 Html4-html5:

企业中常用的语义化标签/多媒体标签/表单/表格等基础标签的使用及各种html5新性能

2 css1-css3：

企业中常见的css属性/选择器/动画以及各种css3新特性 以上两部分完成写一个项目

3 javascript

javaScript基础，涵盖所以js基础语法内置对象Dom以及前端开发中的各种常见的js特效

javaScript面向对象：涵盖面向对象的各种特性在js中的应用和常见设计模式排序算法讲解 4 React Native 跨平台开发 5 微信小程序开发

HTml的基础:

1 什么是html：超文本标记语言，html是专门描述文本的语义的，它是专门用来给文本添加语义的，而不是用来修饰文本的样式

-2 指定字符集，GBK（GB2312）和UTF-8区别 GBK里面存储的字符比较少，往往存储汉字和一些常用的外文，体积小 UTF-8里面存储的世界上所有的文字。体积比较大 懒人推荐使用UTF-8

3 HTML标签关系分类： 1 并列关系（兄弟/平级） 2 嵌套关系（父子/上下级）

4 什么是 DTD文档声明

由于HTML有很多版本规范，每个版本的规范之间又有一定的差异，我们需要在HTML文件的第一行告诉浏览器，这个网页要用哪个版本规范。每个不同的版本规范都有不同的规范，是向下兼容的 HTML5的DTD的声明

5 xhtml和html5的区别

严格不严格 功能多和功能少的区别

HTML标签学习

快捷键

在WebStorm中利用快捷键创建一个新的.html的文件 同时按ctrl+alt+insert
让光标移动到当前行的末尾   按end
让光标移动到当前行的首部    按home键
让光标在多行中闪烁          按Alt不放然后按住鼠标左键拖动
ctrl+d   复制一行
ctrl+x   删除一行
ctrl+alt+t  标签包裹一段内容
setting中可以设置自动换行
ctrl+/ 注释
ctrl+shift+/取消注释
f12调出开发者工具
多行无序列表的写法  ul>li  tab键自动补充ul>li*2
定义列表的快速写法： dl>dt+dd

1 H标签包括的内容独占一行，需要注意的是在企业开发中一般情况下一个界面只能出现一个H1标签

2 p 标签 告诉浏览器哪些文字是段落

<p></p>

3 hr标签 分割线

<hr>

4 imag标签显示一张图片

<img src="">

注意：imag不会独占一行

有很多属性 width height （如果没有指定宽高就按照系统默认的）

title 当鼠标悬浮图片的时候显示的文字

alt 它的文字就是告诉浏览器当需要的图片找不到的时候显示的内容

5 br标签作用：换行

br标签的格式

<br>

可以用多次br标签。不另外起一个段落换行，如果另起一个段落就用p标签。企业中很少使用br标签

6 路径问题

（1）相对路径 每次查找就是从.html文件夹开始查找

同级 下级 上级

一般企业开发创建文件的时候一般都是css文件夹 imag文件夹 index.html，企业开发中使用下级多

注意：路径中不要出现中文，使用反斜杠/不用正斜杠

（2）绝对路径 每次查找就是从指定的盘符开始查找（一般不用，因为可移植性不好）

7 a标签

<a href="指定需要跳转的目标界面">需要展示给用户的内容</a>

注意：

a标签不仅可以让文字可以点击还可以让图片点击

一个a标签必须有一个href属性

地址前面必须添加HTTP/https,还可以指定本地的链接

属性：target 专门用于控制如何跳转

_self:不创建新的选项卡（默认）

_blank:在新的选项卡中跳转

title:和imag标签中的title一样，鼠标悬浮的时候显示的标题

8 base 标签：专门用来统一的指定当前网页中所以的超链接如何打开（href的属性设置

注意点：必须写在head标签的开始标签和结束标签之间

9 假链接

1 #

2 javascript：

两者的区别：# 点击会自动回到网页的顶部（企业中的回到顶部也是这样做的）

javascript不会返回到顶部

10 锚点 实现通过a标签跳转到指定的位置需要分成两步

1 给目标位置添加一个id属性，指定独一无二的值

2 告诉a标签你需要跳转的目标标签对应的独一无二的身份证号码是多少

注意点：

通过我们的a标签跳转到指定的位置是没有过度动画的 不仅可以跳转到当前界面的指定位置 还可以跳转到其他界面的指定位置

11 列表标签

给一堆数据添加语义，告诉搜索引擎告诉浏览器这一堆数据是一个整体

11.1 无序列表（最多）ul:unodered list li:listitem 没有先后之分

格式

<ul>
<li></li>
</ul>

注意：ul和li是是一个整体不会单独使用，ul里面不包含其他的标签，但是li标签中还可以放其他的标签

使用场景：新闻列表，商品列表，导航条

11.2 有序列表（最少） ordered list 有先后之分

<ol>
<li></li>
</ol>

11.3 定义列表（其次）dl: definition list dt: definiton title dd:definition description

<dl>
<dt></dt>
<dd></dd>
</dl>

先通过dt标签定义标题再使用dd描述相关的信息

使用场景：

1 做网站的尾部相关信息

2 做图文混排

注意点： 有先后之分例如排行榜 没有先后之分例如中国的城市