web前端作业

2020/02/24随堂笔记

在这里插入图片描述

复习:
完整前端知识整理思维导图:
在这里插入图片描述

HTML

  1. 什么是HTML?

    本质:超文本标记语言,表现如文字、视频、音频程序等复杂元素

  2. 什么是标签?

    标签组成:标签名、属性名(名称值对的形式)、内容
    属性类似是给这个标签的内容加了个容器(装备),让标签具有特殊能力

<a href="https://www.baidu.com">百度</a> 
  1. 重要标签的说明

    1.表格的标签 table thead tr th tbody tr td

    <table border="1"> 
    	<thead> 
    		<tr>
     			<th>表头</th> 
    		</tr> 
    	</thead> 
    	<tbody>
    		<tr> 
    			<td>内容</td> 
    		<tr> 
    	</tbody> 
    </table> 
    
    1. 表单的标签 form
      action:submit操作执行请求的地址
      method:指定请求的类型get/post 注意两者区别(笔试题中经常)

       1. form表单提交不一定通过submit提交,可以通过Ajax请求序列化表单(serialize)方式完成表单数据的提交 查jquery API。
       Ajax序列化就是form的数据构建为名称值对的字符串统一提交到后台。理解同步与异步问题
       2. 通过表单form提交和Ajax提交方式原理是完全不一样的设计方式
      
    2. 表单元素标签
      通过submit提交,浏览器会把表单元素以名称值对的形式提交给服务器

      <input>:type(text,password,radio,checkbox,hidden) 
      <select> <option value="html">内容</option>//提交value值 </select> 
      <textarea> 
      

      form理解为一个数据的集合(组)
      一个页面上可以有多个form表单
      Ajax请求,可以不要求有form存在

    4.标签的语义

     H1/H2/H3 表示大纲级别,类似word标题
     div/span/p表示布局
    

    注:使用带语义的标签可以让搜索引擎快速的进行收录
    虽然不同的标签也许能够达到相同的显示效果,但是强烈建议使用语义化标签+CSS样式去控制
    5.关于浏览器

     解析HTML、CSS、JavaScript、图片、音视频等内容的运行环境。
     IE/Firefox/chrome/Opera,其中Chorm/Firefox称之为标准浏览器,最符合W3C标准技术规范。
     不同的浏览器是有细微的差异,考虑兼容性问题。
    

CSS

在这里插入图片描述

层叠样式表:元素样式可以通过多种方式进行叠加
HTML元素本身不具备样式,但是在不定义样式的情况下,不同的标签也表现出不同的显示样式,因浏览器对于不同标签是有默认样式的。

  1. 如何书写定义元素样式
    外部样式定义页面样式,减低代码耦合度,让设计师设计页面
    简单的理解:可以让不同人不在同一个页面修改文件,各司其职
  2. 需要掌握的内容
    1. div+css布局基础,充分理解盒子模型 box-sizing的使用
    2. 样式选择器ID(#),Class(.),标签(div a span)

JavaScript

  1. 对于JavaScript认识
  2. JavaScript的作用
    1. 业务逻辑的处理
    2. 对于DOM树进行操作:通过事件驱动(DOM树中元素的增删查改,特别是:该内容,改样式)
  3. 需要掌握的内容
    Js是弱类型语言,且书写比较随意。
    1. 通过var定义关键字
    2. 关于Js判断条件
      1,数字0和非0,表示false和true
      2,有3种分支结构
      3,三目运算符熟练掌握,本质上是一个表达式 在这里插入图片描述
1、设计的目的 做个棋手类网站以怀念个人围棋的时光。还有此刻的美丽,以及无限的未来向往。 2、设计布局 主页设计布局是在网站的右上角是标准的导航栏,包括主页、国内风云、风云人物、国外盛况、国外四位棋手简介、比赛报名等,点击相应的导航标签,跳转到相同模块对应的详情页展示,其网站左上角是网站标题,中间穿插背景图来突出适应网站风格。网站中央是图片跟内容简介,主要介绍国内棋手界风云,左边是图片,突出主题。接下来是风云人物链接资料,点击对应人物会弹出DIV文本框显示每个棋手的风云人物资料简介,点击右边的关闭按钮会关闭整个弹出的文本框,非常方便适宜网站的总体要求。接下来是国外盛况介绍,下面依次是四张围棋手的图片一字排开设计,鼠标悬停在上面会出现棋手姓名以及简介,点击图片会把棋手图片放大到中屏居中显示,还可以实现左右切换棋手图片,点击左上角的关闭按钮即可关闭弹出的图片。接下来拉到下面的国外四位棋手简介可以发现这是树形布局的四个div框,依照树形结构错落有致排开,分别展示上面四位棋手对应的资料简介,以及人物生平获奖资料等。网站靠近底部的位置就是国内群雄争霸比赛报名的Form表单,有棋手姓名、棋手电话、邮箱、比赛宣言等四项内容,并在提交前会依次检验文考框是否已经按照格式要求填写,如果没有按照要求规则填写会提示请修改该内容,直到符合要求为止,才能报名,填写完毕后点击报名,会弹出“恭喜棋手,报名成功,请等待组委会后续短信通知比赛规则”提示框,点击确定即可关闭报名成功提示框。 3、网站具体设计过程 首先选定 本网页制作工具是前端开发利器: WebStorm,创建前端项目工程,并创建相应的文件夹,存放各个css、js,还有网页中用到的各种图片,以及除了主页面index.html之外的二级页面,其存放在html文件夹下,在各个二级页面与主页跳转的网页链接上采用相对路径而不是绝对路径,创建好的项目工程目录结构如下所示。 首先设计网站主页也就是核心内容index.html,先要设计总体的导航条栏目,并点击对应主题来到其链接的详情页,这里采用href标签,用id进行位置定位。页面总体采用 CSS+DIV 布局,最外层DIV为框架,导航条设计。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值