web前端学习第一课,HTML语法

前言:

在移动大前端的局势下,原生应用更新迭代的速度越来越快,iOS热更新乏力,ReactNative,Weex这些框架日趋成熟,大有一统三端的气势.我们作为iOS开发者,为了适应互联网生态环境,就必须不断的学习进步.最近公司项目集成了Weex,如果不懂Web前端的一些代码机制,加之Weex文档不太健全,我发现很难跟前端小伙伴对接(同事跟你装逼的时候,你如果是一脸懵逼的表情,那你就输了).所以我便励志学习Web前端知识,从HTML + CSS 到JS,再到当下热门的Vue,我也会不断的开坑,填坑,那今天就放上我的HTML语法学习笔记,欢迎有同样兴趣的小伙伴一起交流学习.

• 1 HTML的注释

• 2 标签

标签的语法:
标签分为开始标签和结束标签.结束标签比开始标签多了一个"/"
我们对、、这三个标签进行一下总结：
和标签是为了强调一段话中的关键字时使用，它们的语义是强调。
标签是没有语义的，它的作用就是为了设置单独的样式用的
```

• 3 认识html文件基本结构

...
...


代码讲解：

1. 称为根标签，所有的网页标签都在中。
2. 标签用于定义文档的头部，它是所有头部元素的容器。头部元素有
   标签之间的文字内容是网页的标题信息，它会出现在 浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么， 搜索引擎可以通过网页标题，迅速的判断出网页的主题。每个 网页的内容都是不同的，每个网页都应该有一个独一无二的title。 ``` * 5 body标签(网页上显示的内容) * 6 p标签 ```

   段落文本

   注意一段文字一个

   标签，如在一篇新闻文章中有3段文字，就要把这3个段落分别放到3个

   标签中。 ``` * 7 hx标签 ``` 用过markdown语法的都知道,标签用来制作文章的标题.h1,h2,h3,h4,h5...标题 文字的字号按照从大到小的顺序排列. ``` * 6 长文本的引用 ```HTML

   长文本的引用: 如想在我的文章中引用李白《关山月》中的诗句，因为引用文本 比较长，所以使用

   明月出天山，苍茫云海间。长风几万里，吹度玉门关。汉下白登道，胡窥青海湾。 由来征战地，不见有人还。 戍客望边色，思归多苦颜。高楼当此夜，叹息未应闲。

   ``` * 7 br标签分行显示文本 ``` 怎么可以让每一句诗词后面加入一个折行呢？那就可以用到
   标签了，在需要加回车换行 的地方加入
   ，
   标签作用相当于word文档中的回车。(html4.01版本写法是 "
   ") 注意：在 html 代码中输入回车、空格都是没有作用的。在html文本中想输入回车换行，就必 须输入
   。 而   代表空格符. ``` * 8 hr 分割线(添加水平横线,就是一条分割线,hr是一个空标签,貌似没什么卵用) * 9 address标签,为网页加入地址信息 ```
   联系地址信息
   例如:
   文档编写：lilian 北京市西城区德外大街10号
   ``` * 10 code标签加入代码 ``` 其实这些常识性的东西我都不想记的,但是为了方便以后用到的时候查阅,忍了. 代码: var i=i+300; ``` * 11 使用pre标签加入大段代码 ```

    var message="欢迎";
    for(var i=1;i<=10;i++)
    {
        alert(message);
    }
    

   ``` * 12 使用ul,添加信息列表 ```
   • 精彩少年
   • 美丽突然出现
   • 触动心灵的旋律
   ``` * 13 使用ol来制作有序列表的展示 ```
   1. 前端开发面试心法
   2. 零基础学习html
   3. JavaScript全攻略
   ``` * 14 认识div在排版中的作用 ``` 在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个div标签中，这个
   标签的作用就相当于一个容器。语法：< div>…< /div> 确定逻辑部分： 什么是逻辑部分？它是页面上相互关联的一组元素。如网页中的独立的栏目版块，就是一个典型的 逻辑部分。如下图所示：图中用红色边框标出的部分就是一个逻辑部分，就可以使用

   标签作 为容器。

   

   14954178137684.jpg

   • 15 给div命名,使逻辑更加清晰

     在上一小节中，我们把一些标签放进
     里，划分出一个独立的逻辑部分。为了使逻辑更加清
     晰，我们可以为这一个独立的逻辑部分设置一个名称，用id属性来为
     提供唯一的名称，这
     个就像我们每个人都有一个身份证号，这个身份证号是唯一标识我们的身份的，也是必须唯一的。
     语法: 
     …
     

   • 16 table标签,网页上的表格
     太长了,很基础,懒得写,直接贴连接了 慕课网

   • 17 为表格添加css边框

     < style type="text/css">
     table tr td,th{border:1px solid #000;}
     < /style>
     

   • 18 为表格添加标题和摘要

     
       
     我是标题
       
     
             
     ...
             
     ...
        
      
     
     

   • 19 使用a标签链接到另一个页面

   click here!
   click here!
   上面例子作用是单击click here!文字，网页链接到http://www.imooc.com这个网页。
   title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中
   作用很大，主要方便搜索引擎了解链接地址的内容（语义化更友好)
   ```

   • 20 在新建浏览器窗口中打开链接

   标签在默认情况下，链接的网页是在当前浏览器窗口中打开，有时我们需要在新的浏览器窗口
   中打开.
   click here!
   ```

   • 21 插入图片标签

     语法: ![](图片地址)
     1、src：标识图像的位置；
     2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；
     3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；
     4、图像可以是GIF，PNG，JPEG格式的图像文件。
     

   • 22 使用表单标签,与用户交互

     网站交互的form表单,可以把浏览者输出的数据传送到服务器端
     语法: < form method = "post/get" action = "save.php"> < /form>
     1.
      ：标签是成对出现的，以开始，以
     结束。
     2.action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。
     3.method ：数据传送的方式（get/post）。
     代码如下:
     
         用户名:
         
         密码:
         
     

   * 23 文本输入框,密码输入框 
   
     ```
   
         
   
   type: 当type = "text"时,输入框为文本输入框,当type = "password"时,输入框为密码
   输入框.
   name: 为文本框命名，以备后台程序ASP 、PHP使用。
   value: 为输入框设置默认值.(一般起到提示作用)
     ```
   * 24 文本域,支持多行文字输入
   
     ```
     当用户需要在表单中输入大段文字时，需要用到文本输入域。
     语法:
       这里可以输入默认值
     
     举例:
     
   
         联系我们
               这里输入内容
         
     
     ```
   * 25 使用单选框和复选框让用户选择
   
     ```
   在使用表单设计调查表时，为了减少用户的操作，使用选择框是一个好主意，html有两种选择框,
   单选框和复选框,单选框只能选择一项,复选框可以选择任意多项.
   语法:
   
   1、type:
    当 type="radio" 时，控件为单选框
    当 type="checkbox" 时，控件为复选框
   2、value：提交数据到服务器的值（后台程序PHP使用）
   3、name：为控件命名，以备后台程序 ASP、PHP 使用
   4、checked：当设置 checked="checked" 时，该选项被默认选中
   如下面代码：
     ```
   ![14950723890155.jpg](http://upload-images.jianshu.io/upload_images/1526313-7a623b6daac1f503.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/550)
   
   显示结果:
   
   ![14950724063290.jpg](http://upload-images.jianshu.io/upload_images/1526313-296ac8f36a67e68e.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/550)
   
   
   注意: 同一组单选按钮,name取值一定要一致
   * 26 下拉列表:
   
     ```HTML
     < form action="save.php" method="post" >
         < label>爱好:< /label>
         < select>
           < option value="看书">看书
           < option value="旅游">旅游
           < option value="运动">运动
           < option value="购物">购物
         < /select>
     < /form>
     ```
   ![14950745042054.jpg](http://upload-images.jianshu.io/upload_images/1526313-f73a712091a8cec1.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
   
   设置 selected = "selected" 该选项默认选中    
   
   * 27 使用下拉列表框进行多选
   
     ```HTML
     在select标签中设置 multiple = "multiple" 可    以实现多选功能,在windows操作
     系统下,进行多选时按下Ctrl键同事进行单击(Mac下使用Command + 单击),可以选择多个
     选项.
     
   
         爱好: 
         
             读书
             读书
             读书
         
     
     ```
      
   * 28 使用提交按钮,提交数据
   
     ```
     
     type：只有当type值设置为submit时，按钮才有提交作用
     value：按钮上显示的文字 
     
   
          姓名 
         
         
     
     ```
   
   * 29 使用重置按钮,重置表单信息
   
     ```
     当用户需要重置表单信息到初始时的状态时，比如用户输入“用户名”后，发现书写有误，可以使
     用重置按钮使输入框恢复到初始状态。只需要把type设置为"reset"就可以。
     
     举栗:
     
   
          姓名 
         
         
     
     ```
   
   * 30 form表单中的label标签 
   
     ```
   label标签不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性.如果你在label
   标签内点击文本,就会触发此控件.当用户点击label标签是,浏览器就会自动将焦点转到和标签
   相关的表单控件上.
   注意: 标签的for属性中的值应当与相关控件的id属性值相同(说白了,这就是一个绑定的过程,
   label关联了哪个元素,你点击label文字,哪个元素就会响应)
   语法: < label for = "控件id名称">
   注意: 标签的for属性中的值应当与相关控件的id属性值相同
     ```   
   >**末语**:
   这些教材都是从慕课网上找到的,有的内容比较啰嗦的我直接删掉了,毕竟学技术没那么多时间看废话.下一篇奉上CSS语法部分.