以下内容整理于慕课网:http://www.imooc.com/learn/9
一个HTML文件是有自己固定的结构的。
1 2 ...3 ...4
代码讲解:
1. <html></html>称为根标签,所有的网页标签都在<html></html>中。
2. <head></head>标签用于定义文档的头部,它是所有头部元素的容器。头部元素有<title>、<script>、 <style>、<link>、 <meta>等标签,头部标签在下一小节中会有详细介绍。
3. <body></body>标签之间的内容是网页的主要内容,如<h1>、<p>、<a>、<img>等网页内容标签,在这里的标签中的内容会在浏览器中显示出来。
4. <p></p>是文章的段落标签
5. <hx></hx>表示文章标题(x表示数字,为文章标题等级1-6)
6. <em></em>表示斜体
7. <strong></strong>表示加粗
8.<style>
span{
在这里配置样式,比如文字大小,颜色等
}
</style>
<span></span>设置单独样式
9. <q></q>引用,会自动加上双引号
10. <blockquote></blockquote>缩进
11. <br />换行
12. 输入空格
13. <hr/>添加水平横线
14. <address></address>输入地址信息(默认以 斜体表示)
15. <code></code>代码标签
16. <pre></pre>大段代码标签
17.无序列表
<ul>
<li>内容</li>
<li>内容</li>
<li>内容</li>
</ul>
18.有序列表(列表会自动加上序号)
<ol>
<li>内容</li>
<li>内容</li>
<li>内容</li>
</ol>
19. <div>…</div>:划分区域(独立逻辑)
20. <div id="版块名称">…</div>:划分板块并给板块命名
21.表格展示(没有框线)
1
班级 | 5学生数 | 6平均成绩 | 7
---|---|---|
一班 | 1130 | 1289 | 13
22. <table summary = "内容"></table>为表格添加摘要
23. <caption></caption>为表格添加标题
24. <a href = "网址" title = "提示">..</a>加入网页链接(在当前页面打开)
25. <a href="目标网址" target="_blank">..</a>加入网页链接(新建页面)
26.在网页中链接Email地址
如果mailto后面同时有多个参数的话,第一个参数必须以“?”开头,后面的参数每一个都以“&”分隔。
27. <img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">:为网页插入图片
28.表单标签:表单是可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据。
1 2 3 4 520 21表单标签 6 7 8
输出:
29.输入大段内容:(文本域) <textarea cols = "50" rows = "10">..</textarea>
cols = "行数"
rows = "列数"
1 2 3 4 514 15文本域 6 7 8
输出:
30.单选/复选框
1、type:
当 type="radio" 时,控件为单选框
当 type="checkbox" 时,控件为复选框
2、value:提交数据到服务器的值(后台程序PHP使用)
3、name:为控件命名,以备后台程序 ASP、PHP 使用
4、checked:当设置 checked="checked" 时,该选项被默认选中
(同一组的单选按钮,name 取值一定要一致,这样同一组的单选按钮才可以起到单选的作用。)
1 2 3 4 515 16单选框、复选框 6 7 8
输出:
31.下拉框表<select>..</select>
1 2 3 4 517 18下拉列表框 6 7 8
输出:
<select>..</select>下拉框列表
selected = "selected":默认选中
32.下拉框表支持复选:multiple = "multiple"
输出:
(在 windows 操作系统下,进行多选时按下Ctrl键同时进行单击(在 Mac下使用 Command +单击),可以选择多个选项)
33.提交按钮
1 2 3 4 513 14提交按钮 6 7 8
输出:
34.重置按钮
在33中把type的值改为reset.
35.form表单中的label标签
label标签不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本,就会触发此控件。就是说,当用 户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和该label标签相关连的表单控件上)。
注意:标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。
1 2 3 4 530 31 32form中的lable标签 6 7 8 9
输出: