前端基础知识总结1

1.什么是h5:html的第五代;是一类技术的总称;

2.h5可以干什么?所有人机交互的界面

3.一个项目的组成

a.产品经理【根据用户需求,制作需求文档】

b.ui设计【页面的切图】

c.前端【实现ui设计图的界面,与后端的交互】

d.后端【实现相对应的功能:登录】

e.测试【测试程序是否存在bug】

4.一个界面的构成

html【骨架】+css【样式】+js【行为】

w3c                     ECMA

5.关于前端的发展

----------前面知识了解即可

6.关于开发工具的使用

vscode的安装;vscode使用【安装插件:chinese(转为中文)open in brow(在浏览器中打开) live serve(实时刷新)】;如何打开文件【文件=>打开文件夹】

新建文件夹/文件【】;如何新建一个让网页打开的文件【文件的后缀名为html】;

7.html基本结构

<!-- 

    <!DOCTYPE html>

    文档类型 html

    <html>

        <head>

            <meta charset="utf-8">

            设置编码方式为utf-8【国际统一标准】

            <title>标题</title>

            网页的标题

        </head>

        <body>

            网页中显示的内容

        </body>

    </html>

 -->

 8.语法:

 双标签 <标签名>描述性的内容</标签名> 

 单标签<标签名>

 属性:在标签名后面 第一个尖括号里面

 属性值:与属性用等号相连接

 9.常用的标签

 换行 <br> break的缩写

 空格 &nbsp;[一个space键的大小] 补充两个空格:&emsp;[一个汉字大小的空格] &ensp;[半个汉字大小的空格]

 标题标签 h1~h6 特点:从h1到h6逐渐减小,自动换行,有行高,为双标签

 段落标签 p     特点:自动换行,双标签,有行高

 文本格式化标签 加粗/倾斜 b,strong/i,em 

 特点:双标签 不能实现换行

 10.超链接 a

 属性:href 跟链接跳转的网址

 title 设置鼠标悬停时的提示信息

 target 设置网页的打开方式 _slef[在当前页面打开] _blank[在新的界面中打开]

 延申知识点:base标签

 语法:<base target="设置的打开方式"> 注意这个是在head里面设置的

 11.图片

 语法:<img src="图片的路径">

 属性:

 src 图片的路径【A.相对路径:

 a.图片和html文件在同一文件夹中时【直接用图片的名称即可】 

 b.图片位于html文件的下一级或者多级文件时,去除掉路径的相同部分,然后保留图片不同的部分,最后加上图片的名字

 c.图片位于html文件的上一级或者多级文件时,../找到上一级,直到用../找到与图片的上级文件位于同一文件夹时,

 去除掉路径的相同部分,然后保留图片不同的部分,最后加上图片的名字

  B.绝对路径】

width 设置宽度

height 设置高度

title 设置鼠标悬停时提示的信息

alt   设置图片走丢之后的提示信息

border 设置边框

12.图片超链接

嵌套标签的使用  注意标签的位置

13.列表

有序列表

语法:

<ol>

   <li>1</li>

   <li>1</li>

   <li>1</li>

</ol>

应用场景:新闻列表

无序列表

语法:

<ul>

    <li>2</li>

    <li>2</li>

    <li>2</li>

    <li>2</li>    

</ul>

应用场景:新闻列表

自定义列表

语法:

<dl>

    <dt>被描述的文字或图片</dt>

    <dd>起到描述性的内容</dd>

</dl>

14.特殊符号  &copy; 商标 &reg;

图片作业

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值