HTML概述
1.HTML是超文本语言
2.HTML是用来写网页的语言
3.用这种语言来编写的文件叫html文件,也叫web文件,后缀为.html
4.web技术就是做网站
5.web文件可以直接用浏览器运行
HTML基本结构(重点)
1.HTML的基本结构:
<html>
<head>
<title>标题</title>
</head>
<body>
</body>
</html>
HTML标签属性(重点)
1.什么是标签
用尖括号包含起来的关键词
2.一个页面大部分都是一对一对标签组成,都是成对出现
3.一般第一个标签是开始标签,后一个标签是结束标签
4.开始标签也叫开放标签,结束标签也叫闭合标签
5.HTML 元素指的是从开始标签到结束标签的所有代码，是HTML语言的基本部分
6.空的HTML元素,<br> --表示换行
7.html的元素属性:是修饰元素的
格式:<开始标签 属性名="属性值">元素<结束标签>
属性通常添加在元素的开始标签当中，属性值带双引号
案例:给页面添加颜色背景
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>背景颜色</title>
</head>
<body bgcolor="#0000ff">
我是黑色页面
</body>
</html>
课堂案例:给页面背景添加粉色
案例:给页面添加背景图片
第一步:要把图片添加到项目的img文件夹中
第二步:编写代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>MakerLiu</title>
</head>
<body background="img/tupian01.jpg">
</body>
</html>
标题标签和段落标签
1.标题标签:<h1> ---<h6>
1.有标题标签的会自动换行和加粗
2.数字越大,字体越小
2.段落标签:<p> </p>
align="位置" --可以定位文字显示的位置
超链接和图片标签(重点)
1.超链接:<a href="要跳转的页面地址">xxxx</a>
<!-- 注意:href=对应的地址要正确,不正确会弹出404 -->
案例:写一个超链接,跳转到淘宝
2.图片标签:<img src="图片的地址"/>
3.<hr> --水平线
案例:添加2张图片,用水平线分开,第一张图片,宽200,高100,边框为3
第二张图片,宽100,高300,边框为4
音频视频标签
音视频:<embed src="音视频文件的地址"></embed>
小结
1.超文本语言开始:<html>
2.头部信息开始:<head>
3.正文开始:<body>
4.标题标签:<h1>-<h6>
5.段落标签:<p>
6.超链接:<a href="网址">
7.图片标签:<img src="图片地址"/>
8.音视频标签:<embed src="音视频文件地址">
9.换行:<br>
10.水平线<hr>
11.背景颜色表示法:1.英语单词.2.RGB的十六进制
文本格式标签
文本格式标签用来修饰文本
<b> 粗体bold
<big>定义大号字。
<small>定义小号字。
<em>定义着重文字。
<i> 斜体italic
<del> 文字当中划线表示删除
<ins> 文字下划线表示插入
<sub> 下标
<sup> 上标
字体、字号标签<font>
课堂案例:
在页面上显示以下文字,字体是灰色,大小为35px,'曾经'加粗,'真挚'大号字体,'珍惜'小号字体,'后悔'着重文字,'机会'斜体,'我会对那个女孩'划线删除,'我爱她'下划线
曾经有一段真挚的爱情摆在我的面前，我没有珍惜，直到失去后才后悔莫及，
如果上天再给我一次机会，我会对那个女孩说，我爱她！
如果要给这份爱加点东西,我希望给她3^2杯的h2o
表格标签(重点)
1.表格用<table>标签
2.<tr>表示行,<tb>类似列
3.三者一起使用才有效
4.其他:<th>特殊的列 让内容居中并加粗
5.单元格的设定:<table border="1" width="300px" height="150px>
案例:定义一个三行三列的表格,单元格大小为300px,200px,边框为1,里面的内容是test1-9,
其中test3和test4要红色背景并居中,test7和test8加粗居中
表单概述(重点)
1.表单用于搜集不同类型的用户输入
2.表单的标签<form>
3.格式:
<form action="指定表单的数据要提交的位置" method="提交的方法">
<input 表单控件></input>
</form>
说明:提交方法有get和post
4.表单的三个要点
表单控件(Form Controls)
动作属性(Action)
方法属性(Method)
表单文本元素(重点)
1.text --表示文本输入
2.password --密码
<input type="text" name="wenben" maxlength="10" size="20" /><br>
type 指定输入控件的类型
name 指定当前input标签的名字
maxlength 限制输入的字符个数
size 输入框的大小
案例:注册页面:
用户名,密码,电话,地址
表单选择元素(重点)
1.单选框 :radio
1.单选框要实现,要靠name属性,让多个input的name属性值一样,才能实现单选
2.因为服务器要知道用户选择了哪个单选框,所以单选框中要有一个value属性
3.checked="checked" 默认选择
案例:来四个单选框,分别是北上广深,默认选择是深圳
2.多选框:checkbox
案例:来5个你喜欢的明星,多选框
表单的下拉列表(重点)
1.下拉列表不是放到input里
2.select:下拉列表,用option定义多个选项
3.selected="selected" 代表默认选项
文本域
1.使用:<textarea>
2.可以给文本域指定大小:cols,rows
表单按钮(重点)
1.普通按键:button
2.重置按键:reset
3.提交按键:submit