前端html学习1

xiaoxiao2021-02-28  101

学习前端大框架

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

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

转载请注明原文地址: https://www.6miu.com/read-38135.html

最新回复(0)