前言:
在移动大前端的局势下,原生应用更新迭代的速度越来越快,iOS热更新乏力,ReactNative,Weex这些框架日趋成熟,大有一统三端的气势.我们作为iOS开发者,为了适应互联网生态环境,就必须不断的学习进步.最近公司项目集成了Weex,如果不懂Web前端的一些代码机制,加之Weex文档不太健全,我发现很难跟前端小伙伴对接(同事跟你装逼的时候,你如果是一脸懵逼的表情,那你就输了).所以我便励志学习Web前端知识,从HTML + CSS 到JS,再到当下热门的Vue,我也会不断的开坑,填坑,那今天就放上我的HTML语法学习笔记,欢迎有同样兴趣的小伙伴一起交流学习.
-
1 HTML的注释
-
2 标签
标签的语法:
标签分为开始标签和结束标签.结束标签比开始标签多了一个"/"
我们对<em>、<strong>、<span>这三个标签进行一下总结：
<em>和<strong>标签是为了强调一段话中的关键字时使用，它们的语义是强调。
<span>标签是没有语义的，它的作用就是为了设置单独的样式用的
```
- 3 认识html文件基本结构
<html>
<head>...</head>
<body>...</body>
</html>
代码讲解：
- <html></html>称为根标签，所有的网页标签都在<html></html>中。
- <head> 标签用于定义文档的头部，它是所有头部元素的容器。头部元素有
<title>、<script>、 <style>、<link>、 <meta>等标签 - 在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>
等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。
* 4 head标签
```HTML
<head>
<title>...</title>
<meta>
<link>
<style>...</style>
<script>...</script>
</head>
<title>标签：在<title>和</title>标签之间的文字内容是网页的标题信息，它会出现在
浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么，
搜索引擎可以通过网页标题，迅速的判断出网页的主题。每个
网页的内容都是不同的，每个网页都应该有一个独一无二的title。
```
* 5 body标签(网页上显示的内容)
* 6 p标签
```
<p>段落文本</p>
注意一段文字一个<p>标签，如在一篇新闻文章中有3段文字，就要把这3个段落分别放到3个
<p>标签中。
```
* 7 hx标签
```
用过markdown语法的都知道,<hx>标签用来制作文章的标题.h1,h2,h3,h4,h5...标题
文字的字号按照从大到小的顺序排列.
```
* 6 长文本的引用
```HTML
<blockquote>长文本的引用: 如想在我的文章中引用李白《关山月》中的诗句，因为引用文本
比较长，所以使用</blockquote>
<blockquote>明月出天山，苍茫云海间。长风几万里，吹度玉门关。汉下白登道，胡窥青海湾。
由来征战地，不见有人还。 戍客望边色，思归多苦颜。高楼当此夜，叹息未应闲。
</blockquote>
```
* 7 br标签分行显示文本
```
怎么可以让每一句诗词后面加入一个折行呢？那就可以用到<br />标签了，在需要加回车换行
的地方加入<br />，<br />标签作用相当于word文档中的回车。(html4.01版本写法是
" <br> ")
注意：在 html 代码中输入回车、空格都是没有作用的。在html文本中想输入回车换行，就必
须输入<br />。
而   代表空格符.
```
* 8 hr 分割线(添加水平横线,就是一条分割线,hr是一个空标签,貌似没什么卵用)
* 9 address标签,为网页加入地址信息
```
<address>联系地址信息</address>
例如: <address>文档编写：lilian 北京市西城区德外大街10号</address>
```
* 10 code标签加入代码
```
其实这些常识性的东西我都不想记的,但是为了方便以后用到的时候查阅,忍了.
代码:
<code>var i=i+300;</code>
```
* 11 使用pre标签加入大段代码
```
<pre>
var message="欢迎";
for(var i=1;i<=10;i++)
{
alert(message);
}
</pre>
```
* 12 使用ul,添加信息列表
```
<ul>
<li>精彩少年</li>
<li>美丽突然出现</li>
<li>触动心灵的旋律</li>
</ul>
```
* 13 使用ol来制作有序列表的展示
```
<ol>
<li>前端开发面试心法 </li>
<li>零基础学习html</li>
<li>JavaScript全攻略</li>
</ol>
```
* 14 认识div在排版中的作用
```
在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个div标签中，这个<div>
标签的作用就相当于一个容器。语法：< div>…< /div>
确定逻辑部分：
什么是逻辑部分？它是页面上相互关联的一组元素。如网页中的独立的栏目版块，就是一个典型的
逻辑部分。如下图所示：图中用红色边框标出的部分就是一个逻辑部分，就可以使用<div>标签作
为容器。
14954178137684.jpg
-
15 给div命名,使逻辑更加清晰
在上一小节中，我们把一些标签放进<div>里，划分出一个独立的逻辑部分。为了使逻辑更加清 晰，我们可以为这一个独立的逻辑部分设置一个名称，用id属性来为<div>提供唯一的名称，这 个就像我们每个人都有一个身份证号，这个身份证号是唯一标识我们的身份的，也是必须唯一的。 语法: <div id="版块名称">…</div> -
16 table标签,网页上的表格
太长了,很基础,懒得写,直接贴连接了 慕课网 -
17 为表格添加css边框
< style type="text/css"> table tr td,th{border:1px solid #000;} < /style> -
18 为表格添加标题和摘要
<table summary = "2012年到2013年库存记录"> <caption>我是标题</caption> <tr> <td>...</td> <td>...</td> </tr> </table> -
19 使用a标签链接到另一个页面
<a href="http://www.imooc.com" title="点击进入慕课网">click here!</a>
<a href="http://www.imooc.com" title="点击进入慕课网">click here!</a>
上面例子作用是单击click here!文字，网页链接到http://www.imooc.com这个网页。
title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中
作用很大，主要方便搜索引擎了解链接地址的内容（语义化更友好)
```
-
20 在新建浏览器窗口中打开链接
<a>标签在默认情况下，链接的网页是在当前浏览器窗口中打开，有时我们需要在新的浏览器窗口
中打开.
<a href="目标网址" target="_blank">click here!</a>
```
-
21 插入图片标签
语法:  1、src：标识图像的位置； 2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本； 3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)； 4、图像可以是GIF，PNG，JPEG格式的图像文件。 -
22 使用表单标签,与用户交互
网站交互的form表单,可以把浏览者输出的数据传送到服务器端 语法: < form method = "post/get" action = "save.php"> < /form> 1.<form> ：<form>标签是成对出现的，以<form>开始，以</form>结束。 2.action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。 3.method ：数据传送的方式（get/post）。 代码如下: <form method="post" action="save.php"> <label for="username">用户名:</label> <input type="text" name="username" /> <label for="pass">密码:</label> <input type="password" name="pass" />
</form>
* 23 文本输入框,密码输入框
```
<form>
<input type = "text/password" name = "名称" value = "文本"/>
</form>
type: 当type = "text"时,输入框为文本输入框,当type = "password"时,输入框为密码
输入框.
name: 为文本框命名，以备后台程序ASP 、PHP使用。
value: 为输入框设置默认值.(一般起到提示作用)
```
* 24 文本域,支持多行文字输入
```
当用户需要在表单中输入大段文字时，需要用到文本输入域。
语法:
<textarea rows = "行数" cols = "列数">
这里可以输入默认值
</textarea>
举例:
<form method = "get" action = "save.php">
<label>联系我们</label>
<textarea cols = "50" rows = "10">
这里输入内容
</textarea>
</form>
```
* 25 使用单选框和复选框让用户选择
```
在使用表单设计调查表时，为了减少用户的操作，使用选择框是一个好主意，html有两种选择框,
单选框和复选框,单选框只能选择一项,复选框可以选择任意多项.
语法:
<input type = "radio/checkbox" value = "值" name = "名称"
checked = "checked"/>
1、type:
当 type="radio" 时，控件为单选框
当 type="checkbox" 时，控件为复选框
2、value：提交数据到服务器的值（后台程序PHP使用）
3、name：为控件命名，以备后台程序 ASP、PHP 使用
4、checked：当设置 checked="checked" 时，该选项被默认选中
如下面代码：
```
显示结果:
注意: 同一组单选按钮,name取值一定要一致
* 26 下拉列表:
```HTML
< form action="save.php" method="post" >
< label>爱好:< /label>
< select>
< option value="看书">看书</option>
< option value="旅游">旅游</option>
< option value="运动">运动</option>
< option value="购物">购物</option>
< /select>
< /form>
```
设置 selected = "selected" 该选项默认选中
* 27 使用下拉列表框进行多选
```HTML
在select标签中设置 multiple = "multiple" 可 以实现多选功能,在windows操作
系统下,进行多选时按下Ctrl键同事进行单击(Mac下使用Command + 单击),可以选择多个
选项.
<form name = "iForm">
<label>爱好: </label>
<select multiple = "multiple">
<option value = "读书">读书</option>
<option value = "旅游">读书</option>
<option value = "购物">读书</option>
</select>
</form>
```
* 28 使用提交按钮,提交数据
```
<input type = "submit" value = "提交">
type：只有当type值设置为submit时，按钮才有提交作用
value：按钮上显示的文字
<form method = "get" action = "save.php">
<label for = "myName"> 姓名 </label>
<input type = "text" value = "" name = "myName"/>
<input type = submit value = "提交" name = "submitBtn" />
</form>
```
* 29 使用重置按钮,重置表单信息
```
当用户需要重置表单信息到初始时的状态时，比如用户输入“用户名”后，发现书写有误，可以使
用重置按钮使输入框恢复到初始状态。只需要把type设置为"reset"就可以。
<input type = "reset" value = "重置">
举栗:
<form method = "get" action = "save.php">
<label for = "myName"> 姓名 </label>
<input type = "text" value = "" name = "myName" />
<input type = "reset" value = "重置" name = "resetBtn" />
</form>
```
* 30 form表单中的label标签
```
label标签不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性.如果你在label
标签内点击文本,就会触发此控件.当用户点击label标签是,浏览器就会自动将焦点转到和标签
相关的表单控件上.
注意: 标签的for属性中的值应当与相关控件的id属性值相同(说白了,这就是一个绑定的过程,
label关联了哪个元素,你点击label文字,哪个元素就会响应)
语法: < label for = "控件id名称">
注意: 标签的for属性中的值应当与相关控件的id属性值相同
```
>**末语**:
这些教材都是从慕课网上找到的,有的内容比较啰嗦的我直接删掉了,毕竟学技术没那么多时间看废话.下一篇奉上CSS语法部分.
网友评论