denggun12345
denggun12345

w3c h5 + css + js笔记

公司电脑：/Users/yangyangzi/Desktop/YangZi2/2019前端/h5+css+js 

「

1. js基础/css基础/html基础

    w3school https://www.w3school.com.cn/js/index.asp

    菜鸟 https://www.runoob.com/js/js-tutorial.html

 

    注意点

        css flex布局

            实例 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

            语法 http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

 

        css 浮动float和清除clear 需要理解但现在布局尽量多使用flex少使用float

        css position

        css 布局盒模型

        css bem法则, 要用人能看懂的语言

        css 作用域

 

        js jquery

           原型链

           var 变量提升

           this

           AMD/CMD require()

           闭包

 

       js es6语法

            Class

            const/let

            箭头函数

            promise then catch 链式 all并发

            解构

            展开运算符

            import/export

            async/await

            generators 理解但非重点,用async/await

2. 工程化

    npm 用法

    node 用途, 暂时无需深入

    webpack 了解下, 暂时无需深入

    babel 转义了解下, 无需深入

    vue 重点,百信全行在用,文档看官方文档就行

        vue-router

        vue-cli

    饿了吗的element-ui

    react

    蚂蚁的ant design

    css加工 less/sass/stylus(财富在用) .less .sass .sty .css

    elerion  

 

3.调试

    chrome debug

 

4.工具

    webstorm

    sublime

    vscode

        prettier 格式化插件

        vetur vue插件

        language-stylus stylus插件

        color highlight 颜色高亮插件

」

============================

 

7.22

html

标签http://www.w3school.com.cn/tiy/t.asp?f=html_textformatting

1、h标签（标题标签）：h1~h6字体变小

2、hr标签（水平线标签）

   例：

  

   

This is a paragraph

 

 

This is a paragraph

3、p标签（段落标签）p

4、br标签（折行标签）br 
 

5、

  5.1文本格式化标签：文本进行格式化

    粗体标签：This text is bold

    加重语气：This text is strong

    大号字：This text is big(H5已删除)

    着重文字（也是斜的）：This text is emphasized

    斜体：This text is italic

    小号字：This text is small

    下标字（右下角）：

            This text contains

            subscript

    上标字（右上角）：

           This text contains

           superscript

   5.2、pre标签对空格和空行进行控制：

        保留空格和空行

        定义预格式文本：

         

 
  
             for i = 1 to 10
 
  
                  print i
 
  
               next i
 
  
       

   5.3、不同的“计算机输出”标签的显示效果

          定义计算机代码（code元素不保留多余的空格和折行）：Computer code

          定义键盘码：Keyboard input

          定义打字机代码：Teletype text (H5已删除)

          定义计算机代码样本：Sample text

          定义变量：Computer variable

   5.4、地址标签（元素通常以斜体显示）

定义地址：

Written by Donald Duck.

Visit us at:

Example.com

Box 564, Disneyland

USA

 

    5.5、缩写或首字母缩写（仅对于 IE 5 中的 acronym 元素有效；对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。）

    定义缩写：etc.

    定义首字母缩写：WWW(H5已删除)

 

   5.6、改变文字的方向（如果您的浏览器支持 bi-directional override (bdo)，下一行会从右向左输出 (rtl)）

    定义文字方向：

    Here is some Hebrew text

   

 

  5.7、实现长短不一的引用语：使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现

     长块引用：

定义长的引用：

这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。

   

   断块引用（四周都会添加空白）：

 

  定义短的引用语(含双引号的文字)：

 

这是短的引用。

  

  

  5.8、标记删除文本和插入文本（大多数浏览器会改写为删除文本和下划线文本；一些老式的浏览器会把删除文本和下划线文本显示为普通文本）

 

一打有 

删除字：二十 

插入字：十二 件。

 

5.9、其他

定义引用、引证：元素

The Scream by Edward Munch. Painted in 1893.

定义一个定义项目：

The WHO was founded in 1948.

 

6、a标签 ：

文本链接：

指向本网站中的一个页面的链接：本文本

指向万维网上的页面的链接：

图像链接：

有两种使用 标签的方式：

  1. 通过使用 href 属性 - 创建指向另一个文档的链接
  2. 通过使用 name 属性 - 创建文档内的书签

提示："链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。

a标签属性：

   1》、href = ”“

   2》、target = ”_blank“打开新窗口显示

   3》、name = ”“ 锚（anchor）；用name 属性创建 HTML 页面中的书签；使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了

     例：

      基本的注意事项 - 有用的提示

    有用的提示//在同一个文档中创建指向锚的链接

    有用的提示//在其他页面中创建指向该锚的链接

  4》、跳出框架：target="_top" （？？？？）

  其他常用链接：

   发邮件（有发邮件的软件）：发送邮件

   复杂邮件链接：发送邮件！

 

7、图像标签： 是一种空标签，空标签：即只能包含属性，而且并没有闭合标签

属性：

  1》src = “url”

  2》alt = “”为图像定义一串预备的可替换的文本；在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像

图片常用案例：

1》HTML 页面添加背景图片：

2》文本中添加图片：

图像 在文本中

（对齐方式align="bottom”；align=“middle”；align=“top”，默认是bottom对齐）

3》段落添加浮动图片：

 3.1》段落前：

 

带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。

  3.2》段落右侧：

 

 

带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本的右侧。

4》调整图片尺寸：

5》如果无法显示图像，将显示 "alt" 属性中的文本：向左转

6》图像链接：

  

  

  

 7》图像映射：

   Planets

  Venus

  Mercury

  Sun

 

8、:定义图像映射中的区域（注：图像映射指得是带有可点击区域的图像）,area 元素总是嵌套在 标签中；定义图像地图中的可点击区域

属性：

   1》alt

   2》coords：坐标值

   3》herf：

   4》noherf：从图像映射排除某个区域

   5》shape：default；rect；circle；poly 定义区域的形状。

   6》target：_blank;_parent;_self;_top

 

9、:定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像；定义图像地图

注释：area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。

注释：中的 usemap 属性可引用 中的 id 或 name 属性（取决于浏览器），所以我们应同时向 添加 id 和 name 属性

属性：

      id（必须属性） 为 map 标签定义唯一的名称

      Name（可选属性）为 image-map 规定的名称

10、表格：

组成（由多标签组成）：

表格由 table 标签开始;

表格行由 tr 标签开始;

表格数据由 td 标签开始

 

两行三列：

 

 

 

 

 

 

100 200 300
400 500 600

table属性：

1》边框：border = ”1“

2》单元格边距cellpadding：内容与其边框的空白

3》单元格间距cellspacing：

4》表格背景色bgcolor：

5》表格背景图background：

6》表格边框展示：

  展示四周

                         

展示上线

                         

展示下线

                         

展示上下线

                         

展示左右线

                          

td属性：

1》单元格背景色bgcolor：

2》单元格背景图background：

3》对齐align：

th属性：

1》内容对齐属性align：

 

 

其他：

1、表格表头：

:

  

  

  

  

2、空单元格（有边框）： 

用空格占位符：插入一个 no-breaking 空格；no-breaking 空格是一个字符实体；no-breaking 空格由和号开始 ("&")，然后是字符"nbsp"，并以分号结尾(";")

3、表格标题：

4、跨多行或多列的单元格：

  

  跨两行

  

跨两列

5、单元格内容与其边框之间的空白：

    cellpadding

表格标签其它相关标签：

1、

：表格页眉

2、

：表格主题

3、

：表格页脚

4、

：定义用于表格列的属性。 safari和chrome 不好使，而w3说（所有主流浏览器都支持 标签）？？？

5、

：定义表格列的组。即<colgroup> safari和chrome 不好使，而w3说（Firefox、Chrome 以及 Safari 仅支持 colgroup 元素的 span 和 width 属性）？？？例 注意第一个 colgroup 元素横跨两列

例：其它相关标签之1、2、3，感觉没啥实际意义

<table border="1">

    <thead>

    <tr>

        <th>Monthth>

        <th>Savingsth>

    tr>

    thead>

    <tbody>

    <tr>

        <td>Januarytd>

        <td>$100td>

    tr>

    <tr>

        <td>Februarytd>

        <td>$80td>

    tr>

    tbody>

    <tfoot>

    <tr>

        <td>Sumtd>

        <td>$180td>

    tr>

    tfoot>

table>

 

11、列表

1、无序列表：

    列表；
  • 列表行元素

      

         

    • 苹果

      •    

    • 香蕉

      •    

    • 菠萝

      •   

    列表属性：type="disc”（圆黑点,默认） “circle”（圆圈）  “square”（正方形）”none”

     

    2、有序列表：

      列表；
    1. 列表行元素

      列表属性：type=“A”； “a”（默认）；”I”（罗马数字，大写i）；”i”（小写罗马数字，小写i）；decimal（阿拉伯数字）

       

      3、自定义列表：

      自定义列表以

      标签开始。每个自定义列表项以
      开始。每个自定义列表项的定义以
      开始。

      Coffee

      Black hot drink

      Milk

      White cold drink

      注：

      (H5已删除) 已被
        代替

         

        12、块

        （块元素） ：用于组合其他 HTML 元素的容器；与 CSS 一同使用，
        元素可用于对大的内容块设置样式属性；定义文档中的分区或节（division/section）；存在意义：设置样式

        （内联元素）：用作文本的容器；与 CSS 一同使用时， 元素可用于为部分文本设置样式属性；定义 span，用来组合文档中的行内元素。存在意义：设置样式

        块元素：div；p；h；ul，…

        内联元素：b；td；img；a；span，…

         

        13、布局:

        HTML5的网站布局：H5提供新语义元素定义了网页的不同部分：

First Second 衣服 $241.10 消费项目二月 表格头
Heading Another Heading
  row 2, cell 2
我的标题
电话 电话