目录
1.概述
HTML的全称为超文本标记语言,是一种标记语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。
2.骨架
下面我们创建一个html文件,并且对它里面的内容做以解释:
<!--这是工具生成的一个标准的html网页模板-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
<!--注释语句-->:是html中的注释语法。
<!DOCTYPE html>:html5 版本声明。
<html></html>: 根标签,所有的内容都写在根标签内。
<head></head>:网页头部,里面可以设置网页的元信息。
<body></body>:网页身体。
<meta charset="utf-8" />:设置浏览器解析网页时,使用的字符集。
<title></title>:标签可定义网页的标题。
<link rel="icon" href=""/>:可在标题处添加图标。
网页的基本语法:网页是由标签构成的。
1.<开始标签> 标签体 </结束标签> :称为闭合标签 双标签
2. <标签名 /> :称为自闭合标签 通过属性来进行一个设置
标签中可以拥有属性,通过属性进一步修饰标签特性,属性必须写在开始的标签中,一个标签可以有多个属性,格式 属性名="属性值"。例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>百度一下,你就知道</title>
<link rel="icon" href="img/baidu.ico"/>
</head>
<body text="red">
网页的内容都写在body中1<br/>
网页的内容都写在body中2
</body>
</html>
运行到浏览器中.........
3.标签
<h1></h1> | 标题标签 |
<p></p> | 段落标签 |
<br/> | 换行标签 |
<ul> </ul> | 无序列表 |
<ol type=""> <li>列表项内容</li> </ol> | 有序列表 |
<a href="" target=""></a> | 超链接 |
<img src="" > | 图片 |
<hr/> | 标尺线 |
<b></b> | 加粗 |
<table> <tr> <td><td> </tr> </table> | 表格 |
<form action="" method="">
| 表单(重点) |
下面,我们还是直接HTML中演示这些标签(用注释来讲解这些标签的用法):
3.1常用标签1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 标题标签 align属性可以设置文本内容,在标签行内的水平对齐方式 默认时left-->
<h1 align="right">一级标题</h1>
<h2 align="center">二级标题</h2>
<h3>三级标题</h3>
<!--p 段落标签 表示一个段落 段落与段落之间有间隔-->
<p align="center"></p>
<!-- 无序列表 前面有一个图标 没有序号-->
<ul>
<li>列表项内容</li>
<li>列表项内容</li>
<li>列表项内容</li>
</ul>
<!-- 有序列表 前面有一个序号 通过type属性改变序号规则 1,A,a,I,i-->
<ol type="I">
<li>列表项内容</li>
<li>列表项内容</li>
<li>列表项内容</li>
</ol>
</body>
</html>
运行到浏览器中看效果..........
3.2常用标签2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
超链接 href="链接地址" target="_self 在当前窗口打开 target="_blank 在新窗口打开
图片 src="图片的引用地址"
-->
<a href="http://www.baidu.com" target="_self">百度</a>
<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="http://www.taobao.com">
<img src="img/1.png" >
</a>
</body>
</html>
运行到浏览器中看效果..........
-------------页面就会直接跳转
3.3常用标签3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
hr 标尺线
空格:  
< : <
> : >
-->
<hr color="red" width="800" size="10"/>
<!-- 在标记语言中,需要对语言中的一些特殊符号进行转义 -->
<b><b>标签的功能是加粗文字</b>
<!-- border 设置边框 cellspacing 单元格之间的间距 cellpadding 单元格内内容与单元格的内距 -->
<table border="1" cellspacing="2" cellpadding="2">
<tr>
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
</tr>
</table>
</body>
</html>
运行到浏览器中看效果..........
4.表单
4.1表单概述
表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 表单按钮:包括提交按钮、复位按钮和一般按钮;用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作。
4.2表单举例
组件类型 | |
---|---|
text | 文本框 |
password | 密码框 |
radio | 单选框 |
checkbox | 多选框 |
submit | 提交按钮 |
file | 文件上传 |
rest | 重置按钮 |
button | 普通按钮 |
textarea | 多行文本框 |
select | 下拉选择框 |
action我们先不用管,method默认先选get。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单标签学习</title>
</head>
<body>
<!--
readonly="readonly" 只读 可以提交内容
disabled = "disabled" 禁用组件,不能再提交内容
placeholder="" 提示内容,不是实际的内容
value 设置文本框中值(开始默认值)为多少,当提交时 name和value构成键值对(value 可以不写但是存在)
单选框必须通过name来进行分组,name相同为一组,就可以互斥(保证只能选一个).选择性组件必须给予默认值 还可以使用checked属性默认选中 checked="checked"
type = "checkbox" 复选框 --也可以使用checked属性默认选中 checked="checked"
<select name=""> --使用selected属性默认选中 selected="selected"
<option value="">北京</option>
<option selected="selected" value="">上海</option>
</select>
<textarea name="mark" rows="5" cols="30"></textarea> 多行文本框 可以显示5行30列的数据
<input type="reset" value="重置" /> 将表单还原到默认状态
-->
<form action="" method="get">
Username:<input type="text" name="username" placeholder="请输入用户名" value="1111" /><br />
Password:<input type="password" name="password" /><br />
<input type="radio" name = "gender" value="男" checked="checked"/>男
<input type="radio" name = "gender" value="女" />女<br />
<input type="checkbox" name="course" value="java" checked="checked"/>java
<input type="checkbox" name="course" value="c++"/>c++
<input type="checkbox" name="course" value="c语言"/>C语言<br />
<select name="province">
<option value="110">北京</option>
<option selected="selected" value="111">上海</option>
</select><br />
<input type="file" /><br />
<textarea name="mark" rows="5" cols="30"></textarea><br />
<input type="submit" value="提交" />
<input type="reset" value="重置" />
</form>
</body>
</html>
运行到浏览器.............
下章我们将开启CSS.............