前端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 做图文混排

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