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

前言:

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

1 HTML的注释
2 标签

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

3 认识html文件基本结构

...
...

代码讲解：

称为根标签，所有的网页标签都在中。

标签用于定义文档的头部，它是所有头部元素的容器。头部元素有
、<script>、 <style>、<link>、 <meta>等标签</li> <li>在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img><br> 等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。</li> </ol> <pre><code> * 4 head标签 ```HTML <head> <title>... 标签：在<title>和标签之间的文字内容是网页的标题信息，它会出现在浏览器的标题栏中。网页的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来制作有序列表的展示 ```

前端开发面试心法

零基础学习html

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语法部分.

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

前言:

你可能感兴趣的:(web前端学习第一课,HTML语法)