第1章：Html的介绍
1.1 基础知识
1.font-size:12px;（窗口的文字大小的变化） 2.color:#930;（文字颜色的变化） 3.text-align:center;（窗口的文字居中的变化） 4.<h1>勇气</h1>：（标题标签） 5.<p></p>：（是段落标签） 6.<img src="1.jpg">：（图片标签）
1.2 标签的语法
- 标签由英文尖括号<和>括起来，如<html>就是一个标签。
- html中的标签一般都是成对出现的，分开始标签和结束标签。结束标签比开始标签多了一个/。
- 标签与标签之间是可以嵌套的，但先后顺序必须保持一致，如：<div>里嵌套<p>，那么</p>必须放在</div>的前面。
- HTML标签不区分大小写，<h1>和<H1>是一样的，但建议小写，因为大部分程序员都以小写为准。
1.3 认识html文件基本结构
<html> <head>...</head> <body>...</body> </html> 1.<html></html>称为根标签，所有的网页标签都在<html></html>中。 2.<head> 标签用于定义文档的头部，它是所有头部元素的容器。头部元素有<title>、<script>、 <style>、<link>、 <meta>等标签，头部标签在下一小节中会有详细介绍。 3.在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。
第2章：认识标签（第一部分）
1.<body>标签，网页上显示的内容放在这里
2.开始学习<p>标签，添加段落 语法：
<p>段落文本</p>
3.了解<hx>标签，为你的网页添加标题 （其中x标示1-6） 说明： 标题标签一共有6个，h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级。
4.加入强调语气，使用<strong>和<em>标签 说明：:<em> 表示强调，<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用斜体表示，<strong> 用粗体表示。两个标签相比，目前国内前端程序员更喜欢使用<strong>表示强调。
5.使用<span>标签为文字设置单独样式
6.<q>标签，短文本引用（为要添加的内容加上双引号，但本身不能有双引号）
7.<blockquote>标签，长文本引用（效果是缩进）
8.使用<br>标签换行显示文本
9.  添加空格的效果
10.认识<hr>标签，添加水平横线 注意：
-
<hr />标签和<br />标签一样也是一个空标签，所以只有一个开始标签，没有结束标签。
-
<hr />标签的在浏览器中的默认样式线条比较粗，颜色为灰色，可能有些人觉得这种样式不美观，没有关系，这些外在样式在我们以后学习了css样式表之后，都可以对其修改。
11.<address>标签，为网页加入地址信息
12.想加入一行代码吗？使用<code>标签 示例：<code>var i=i+300;</code>
13.使用<pre>标签为你的网页加入大段代码
第3章：认识标签（第二部分）
1.使用ul，添加新闻信息列表
2.使用ol，添加图书销售排行榜
3.认识div在排版中的作用
4.给div命名，使逻辑更加清晰
5.table标签，认识网页上的表格
说明： （1）、<table>…</table>：整个表格以<table>标记开始、</table>标记结束。
（2）、<tbody>…</tbody>：当表格内容非常多时，表格会下载一点显示一点，但如果加上<tbody>标签后，这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。
（3）、<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。<行>
（4）、<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列 <列>
（5）、<th>…</th>：表格的头部的一个单元格，表格表头
（6）、表格中列的个数，取决于一行中数据单元格的个数。
6.用css为样式，为表格加入边框
代码：
<style type="text/css"> table tr td,th{border:1px solid #000;} </style>
7.caption标签，为表格添加标题和摘要
摘要：不会在浏览器中显示 语法：<table summary="表格简介文本">
标题：用以描述表格内容，标题的显示位置：表格上方。
<table> <caption>标题文本</caption> <tr> <td>…</td> <td>…</td> … </tr> … </table>
第4张 认识标签（第三部分）
1.使用<a>标签，链接到另一个页面 示例：<a href="http://www.imooc.com" title="点击进入慕课网">click here!</a> title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大，主要方便搜索引擎了解链接地址的内容（语义化更友好）
2.在新建浏览器窗口中打开链接：target="_blank" <a href="目标网址" target="_blank">click here!</a>
3.默认点击发送邮箱：如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。 <a href="yy@imooc.com" ? subject="观了不起的盖茨比有感" & body="你好，对此评论有些想法">对此影评有何感想，发送邮件给我</a>
4.认识<img>标签，为网页插入图片 语法：<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本"> <img src="http://img.mukewang.com/52da54ed0001ecfa04120172.jpg" alt = "失败时显示的图片" title="鼠标滑到图片时显示的文字">
第5张 使用表单标签，与用户交互
1.使用表单标签，与用户交互 语法：
<form method="传送方式" action="服务器文件">
2.文本输入框、密码输入框
<form> <input type="text/password" name="名称" value="文本" /> </form> 示例：<form method="post" action="save.php"> 账户: <input type="text" name="myName"/> <br> 密码: <input type="password" name="pass"/> </form>
3.文本域，支持多行文本输入 语法： <textarea rows="行数" cols="列数">文本</textarea>
4.使用单选框、复选框、让用户选择（同一组的时候name要一致才可以） 语法： <input type="radio/checkbox" value="值" name="名称" checked="checked"/>
5.使用下拉列表框，节省空间 selected="selected">是被默认选中的。
<option value="旅游" selected="selected">旅游</option> 使用下拉列表框进行多选：multiple="multipl" <select multiple="multipl">
<option value="看书">看书</option>
<option value="旅游">旅游</option> <option value="运动">运动</option> <option value="购物">购物</option> </select>
6.使用提交按钮，提交数据 type="submit"：sunmit时是提交按钮、text时是文本、reset为重置 <input type="submit" value="提交">
7.使用重置按钮，重置表单信息 type="submit"：sunmit时是提交按钮、text时是文本、reset为重置 <input type="reset" value="重置">
8.form表单中的label标签 <label for="控件id名称"> 说明：当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上 如： <label for="male">慢跑</label>
<input type="checkbox" name="gender" id="male" />
第6章 学习css界面
1.认识CSS样式 p{
font-size:20px;/*设置文字字号*/
color:red;/*设置文字颜色*/
font-weight:bold;/*设置字体加粗*/
} 使用CSS样式的一个好处是通过定义某个样式，可以让不同网页位置的文字有着统一的字体、字号或者颜色等。
2.CSS样式的优势 设置统一的样式来实现一样的格式 span{
color:blue;
} 把想要设置的文字用<span></span>包裹起来就可以了
3.CSS代码语法 css是有选择符和声明组成，声明又由属性和值组成 p（选择符）{
font-size（属性）:12px;（值）
color:red; font-weight:bold;
}
第7章 CSS的基本样式
1.内联式CSS样式（写在标签里面的叫内联式） 如：<span style="color:blue ; font-size:20px">超酷的互联网</span>
2.嵌入式css样式，写在当前的文件中
<style type="text/css"> span{ color:red; font-size:40px; } </style>
3.外部式css样式，写在单独的一个文件中
<link href="base.css" rel="stylesheet" type="text/css" />
4.三种方法的优先级 内联式 > 嵌入式 > 外部式
第8章 CSS选择器
1.标签选择器 其实就是html代码中的标签。如右侧代码编辑器中的<html>、<body>、<h1>、<p>、<img>。 p{ font-size:12px; line-height:1.6em; }
2.类选择器 .类选器名称{css样式代码;} .stress{color:red;}/类前面要加入一个英文圆点/ <span class="stress">胆小如鼠</span>
3.ID选择器 #setGreen{ color:green; } <span id="setGreen">公开课</span>
4.类和ID选择器的区别 相同点：可以应用于任何元素 不同点：id选择器只能使用一次，而类选择器可以使用多次
5.子选择器 .food>li{border:1px solid red;}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
