一、html介绍:
1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等;2. CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现;
3. JavaScript是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻(新闻图片)的轮换。可以这么理解,有动画的,有交互的一般都是用JavaScript来实现的。
4. HTML标签不区分大小写,<h1>和<H1>是一样的,但建议小写,因为大部分程序员都以小写为准。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>html与CSS的关系</title> <style type="text/css"> h1{ font-size: 20px; color: #930; text-align: center; } p{ font-size: 30px; color: #000; text-align: left; } span{ color: blue; } </style> </head> <body> <h1>哈哈,这就是第一个界面了!</h1> <p>三年级时,我还是一个<span>胆小如鼠</span>的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的<em>问题</em>。学校举办的活动我也没勇气参加。</p> <p>到了三年级下学期时,我们班上了一节公开课,老师提出了一个很简单的问题,班里很多同学都举手了,甚至成绩比我差很多的,也举手了,还说着:<strong>"我来,我来。"</strong>我环顾了四周,就我没有举手。</p> <img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" /> </body> </html>
二、认识标签(第一部分):
1. <body></body> : 在网页上要展示出来的页面内容一定要放在body标签中。2. <p></p> : 段落文本标签。p标签的默认样式,可以在上图中看出来,段前段后都会有空白,如果不喜欢这个空白,可以用css样式来删除或改变它。
3. <hx></hx> : 文章的标题标签。(六个样式)
4. <em></em> : 文本关键字强调标签(斜体)
<strong></strong> : 文本关键字强调标签(粗体)
5. <span></span> :只是想为它设置和其它文字不同的样式(并不想让屏幕阅读器对“美国梦”这三个字加重音读出),所以这样情况下就可以用到<span>标签了。
6. <q></q> : 比如在你的网页的文章里想引用某个作家的一句诗,这样会使你的文章更加出彩,那么<q>标签是你所需要的。注意这里用<q>标签的真正关键点不是它的默认样式双引号(如果这样我们不如自己在键盘上输入双引号就行了),
而是它的语义:引用别人的话。(引用短的文本)
7. <blockquote> :作用也是引用别人的文本。但它是对长文本的引用,如在文章中引入大段某知名作家的文字,这时需要这个标签。
8. <br/> : 换行标签。
9. : 表示空格。
10. <hr/> : 划横线标签。
11. <address></address> : 地址标签(默认是斜体。
12. <code></code> : 在文本中引入一行代码
<pre></pre> : 在文本中引入多行代码
三、认识标签(第二部分):
1. <ul><li> : 信息列表标签(列表编号无序)。2. <ol><li> : 信息列表标签(列表编号有序)。
注意:ol与ul的具体区别:
ul是无序列表,所谓的无序列表只要举个例子,大家就会明白了。
这就是ul与ol的区别。
ul与ol前的符号是可以修改的。只需要修改它们的type值。
ul的type属性有:disc—实心圆(默认)、circle—空心圆、square—实心方块
ol的type属性有:1—数字(默认)、a—小写字母、A—大写字母、i—小写希腊字母、I—大写希腊字母。
通过CSS也可以在将它们前的符号改为图片,这样列表显示就会更美观了
3. <div></div> : 在网页制作过程过中,可以把一些独立的逻辑部分划分出来,放在一个<div>标签中,这个<div>标签的作用就相当于一个容器。
为了逻辑更急清晰,可以给每个div设置一个id,如<div id = "div1"></div>
4. table、tbody、tr、th、td : 表格标签。
<table summary="这里是对这张表的描述,实际页面不会显示出来">
<caption>这里是这张表的标题</caption>
<tbody> : 当表格内容非常多时,表格会下载一点显示一点,但如果加上<tbody>标签后,这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。
<tr> :表格的一行,所以有几对tr 表格就有几行
<th>班级</th> : 表格的头部的一个单元格,表格表头
<th>学生数</th>
<th>平均成绩</th>
</tr>
<tr>
<td>一班</td> : 表格的一个单元格,一行中包含几对
<td>30</td>
<td>89</td>
</tr>
四、认识标签(第三部分):
1. <a href = "跳转到的新地址" title = "鼠标放上去后显示的文字" target="_blank"(新页面打开)>显示的文字</a> : 超链接2. 发送电子邮件:
<a href="mailto:yy@imooc.com ? subject="主题" & body="邮件内容">超链接</a>
注意:如果mailto后面同时有多个参数的话,第一个参数必须以“?”开头,后面的参数每一个都以“&”分隔。
3. <img src = "文件路径" alt="加载不成功显示的文字" title="鼠标放上去显示的文字"/>
五、与浏览者交互,表单标签
1. 表单标签:<form method="post/get" action="提交到哪里">
2. 输入框: <input type="text/password" name="" title="默认文字">
3. 文本域:当用户需要在表单中输入大段文字时,需要用到文本输入域
<textarea rows="行数" cols="列数">文本</textarea>
4. 单选框(同一组单选按钮,name值必须一样才能实现单选功能):
<form action="save.php" method="post" >
<label>性别:</label>
<label>男</label>
<input type="radio" value="1" name="gender" />
<label>女</label>
<input type="radio" value="2" name="gender" />
</form>
5. 复选框: <input type="radio/checkbox" value="值" name="名称" checked="checked"/>
6. 下拉列表:
<select multiple="multiple"(这个属性可以实现多选)>
<option value="看书">看书</option>
<option value="旅游" selected="selected">旅游</option>
<option value="运动">运动</option>
<option value="购物">购物</option>
</select>
7. 提交按钮:<input type="submit" value="提交">
8. 重置按钮:<input type="reset" value="重置">
9. lable标签: label标签不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本,就会触发此控件。就是说,当用户单击选中该label标签时,
浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和该label标签相关连的表单控件上)。
语法:<label for="控件id名称"> 。 注意:标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。