2020-11月份自己的玩玩

itwangyang
246 阅读3分钟

web前端

1. 课前准备

软件的安装

    1. 开发环境（IDE）：HBuilderX

    2. 下载并且安装

    3. HBuilderX的配置

      • 打开软件（可以不用注册）-> 工具 -> 设置 -> setting.json(源码视图),参照下面的代码进行修改

        ![image-20201121203837121](/Users/wangyang/Library/Application Support/typora-user-images/image-20201121203837121.png)

2. 知识点

网站开发的基础

  • html/html5 --结构
  • css/css3 ----样式/表现
  • JavaScript---行为

3. Html/Html5 结构

  • 注释

    html中的注释：
<!--      这是注释    -->

  • 基本结构

    <!doctype html>
<html>
  <head>
    
  </head>
  <body>
    
  </body>
</html>

<!-- !doctype html 是文档声明：作用就是防止浏览器渲染的时候出现怪异模式  -->

  • 延伸结构

    <!doctype html>
<html>
  <head>
    <meat />      <!-- 定义头部信息的 -->
    <title></title>  <!-- 标题 -->
    <link />     <!-- 连接外部样式的 -->
    <style></style>   <!-- 内部样式 -->
  </head>
  
  <body>
    <p style="font-size:20px">
      hello
    </p>
    <h1>
      hello
    </h1>
  </body>
</html>

  • 块级标签

    如果不设置宽度会占独立的一行，后面的内容会自动掉下去，可以识别宽度
块级标签可以嵌套 块级，也可以嵌套行级标签；   但是，但是 p标签不能套块级标签

    常用的块级标签：

    h1-h6,div,p,ul,ol,dl,li ,dt,dd,hr,pre, iframe, table,th,tr, td, form , header ,main, section,article,aside,detai ls, time, address, code, canvas,audio, video

  • 行级标签

    宽度是为内容的标签决定的，并且不会识别宽度和高度；不会独立占一行
行级标签不能嵌套块级标签

    常用的行级标签：

    code,a, strong,b,em,i , sup,sub,del ,label ,select, textarea, smal1 ,big, input

  • 单标签

    br, hr, img, input, meta, link

  • 双标签

    除了单标签，剩下来的，都是双标签

    注意：在开发中尽量使用语义化标签，这样子有利于SEO优化。

  • HTML5常用的布局标签

    Header ---- 头部

    main ---- 主体

    footer ---- 脚注

    aside --- 侧边栏

    article --- 文章

    section ---- 区块

  • Html5 废除的元素

    1. 能用css代替的元素：font ,big, center,
    2. 不再使用frame框架：在H5中使用iframe框架

  • 标签属性

    id ,class, title, style ,name ,width, height ,border ,href ,type

4. css/css3 表现

注释

css中只有一种注释方式    
/*   这就是注释  */

选择器

  1. 类选择器 .div{}
  2. 标签选择器 input
  3. id选择器 #div{}
  4. 后代选择器 p span{}
  5. 子选择器 p>span{}
  6. 伪类选择器 p:first-child{}
  7. 通过选择器 *{}
  8. 群组选择器 .p1, .p2{}
  9. 相邻同胞选择器 p+code{}
  10. 属性选择器 input[name="username"]
  11. 伪元素 .box:before{}
  12. 结构性伪类选择器 .p:nth-of-type(3){}
  13. ui元素状态伪类选择器 :input{}

属性

CSS: color , background, font , border , margin, padding ,width, height, position,left, top, bottom, right, display CSS3 : box-shadow/ text-shadow, trans form, transi tion, animation, border-radius, box-sizings

盒子模型： margin + border + padding + content组成

布局

布局原则：

先整体再局部，从上到下，从左到右

网页结构：

三字型，匡字型，国字型，T字型

布局标签:

Header, nav，main, footer

css的权重

!important > style > id > class > 标签

兼容性

-webkit- 谷歌

-moz- 火狐

-o- 欧朋

-ms- IE

给图片增加超链接：在IE上浏览器会出现蓝色的底线：

解决方式 ：

​ 在图片上增加：border:0; 或者 border:none

图片默认有间隙：

解决方式：

​ 给图片增加float属性；

​ 给图片增加：display：block

按钮默认大小不一：

解决方式：

​ 可以用图片实现

弹性布局

  1. Flex-direction :

弹性子元素在父元素的容器

语法：

Flex-direction: row | column | column-reverse | row-reverse

  1. Flex-wrap:

flex容器是单行还是多行，同时横轴的方向决定了新行堆叠的方向

语法：

Flex-wrap: nowrap | wrap | wrap-reverse

  1. Flex-flow

是前面两个属性（flex-direction flex-wrap）的简写 ，默认值：row nowrap

语法：

Flex-flow: flex-direction flex-wrap

就是说：这边是flex-flow属性：就是flex-direction里面的属性，然后空格，又是flex-wrap属性

  1. Justify-content

定义了项目在主轴的对齐方式

语法：

Justify-content: flex-start | flex-end | center | space-betwween | space-around

  1. Align-items

定义项目再交叉轴如何对齐

语法：

Align-items:

avatar
文章
阅读
粉丝