一、认识HTML
1、什么是HTML?
hipertext超文本 、markup标记 、language语言
2、html 作用
标记是用来告诉文本的语义的,也就是告诉浏览器哪些是标题,哪些是段落。
注意:HTML的作用只有一个,它是用来给文本添加语义的,并不是改变其样式。
标签h1的作用
错误:h1标签是可以修改文字的大小,并且让文字加粗
正确:h1标签是专门给指定的文字添加语义,并告诉浏览器哪些文字是标题
3、HTML的发展史
HTML5 支持html1-4的规范 也支持XHTML1-1.1的规范
4、编写第一个html的页面
编写步骤:
1.新建文档,修改其后缀为.html。
若出现将文件名后缀修改为.html后仍无效的情况,则打开文件目录窗口上方的文件夹选项(选项),在查看中的高级设置中找到隐藏已知文件类型的扩展名这一选项,并将勾选取消,重新尝试步骤一即可。
2.利用Notepad++打开。
3.编写html代码(html的结构)。
4.保存编写的html代码至源文件。
5.利用浏览器打开(千万别用IE,太坑了!!!)。
HTML的基本结构
<html>
<head>
<title>html标题</title>
</head>
<body>
html内容
</body>
</html>
注意:
成对出现
注意首行缩进(缩进不仅会让编程者自己的思路更清晰,更会增加程序的可读性)
title必须写在head里
5、字符集问题
在HTML中,文字制定的字符集必须和文件的字符集一致,否则就会出现乱码。
<head>
<meta charset=”字符集”>
</head>
ISO-8859-1:西方欧洲的字符。
GBK(GBK2312) :中文汉字和常见的外文。
UTF-8 :世界上所有的文字 (体积大)。
例如:
<meta charset=”UTF-8”>
那么企业开发中用哪个呢?(可以通过浏览器自己查看网页编码格式)
如果你的网站仅仅包含中文, 那么GBK体积小访问快,已经足够;如果你的网站中出现了中文以外的字符包含了其他国家的语言则UTF-8,体积大。
6、DTD文档声明
因为h5集合了html1-4的版本 XTHML1-1.1的版本所以编写网页的DTD声明 只需要编写H5即可。
<!DOCTYPE html> //文档的声明
注意点:
- 必须写在第一行。
- 不是一个html标签。
- 没有结束标签。
- 对大小写不敏感。
7、HTML和HTML5的区别
HTML和HTML5都是用来编写网页的。Html语法松散,容错性强。Xhtml更为严格,他对编写的要求很高,必须写闭合标签,必须加引号等。Html5除了语法松散,还增加了许多新特性。
8、Html 和htm的差别
win85/98的后缀名不能大于3位,而现在操作系统后缀允许大于3位,所以windows下无所谓3或4位。
二、html各类标签介绍
1.标题标签
<h1></h1> //一级
<h2></h2> //二级
<h3></h3> //三级
<h4></h4> //四级
<h5></h5> //五级
<h6></h6> //六级
作用:告诉浏览器哪些文本是标题
注意点:
- 标题标签只是添加语义,而不是修改其样式。
- 标题标签h1-h6,一共6个。
- 在企业开发中h1 只能使用一次。
2.段落标签
<p></p>
作用:告诉浏览器这段文字是段落。
注意:在浏览器中段落独占一行。
3.水平线标签
<hr>
作用:在页面中显示的水平线。
注意点:在浏览器中独占一行的。
4.图片标签
作用:在页面中插入图片。
格式:
<img src="" alt="" title="" height="" width="">
标签属性:src 图片的路径。
绝对路径:电脑的物理路径。
相对路径:相对自己本页面而言。
alt:图片无法显示,指定文字描述。
title:鼠标悬浮图片时,提示文字。
height:高。
width:宽。
注意:img标签不是独占一行的。
5.br标签
作用:换行。
注意点:
- 如果这段描述完了,则使用P标签换行。
- 如果这段没有描述完想换行,则使用br标签。
- 多个br标签可以连续使用,使用多少次就是换多少行。
但是在企业中,99%的换行都是因为段落的结束,而另起段落的 。
6.a标签
格式:
<a href="" >热点</a>
作用:从一个页面跳转到另一个页面。
属性:
- href:你要跳转的地址。
- target: 控制新的页面打开模式。
- _blank新打开一个页面显示 。
- _self覆盖原网页打开(默认值)。
注意点:
- 可以跳转本地页面也可以跳转外网(如www.baidu.com)。
- a标签不是独占一行的。
- 热点可以是图片也可以是文字。
- href必须指定目标地址,不然不知道跳转到何处。
7.假链接
作用:开发的时候,在页面并没有完全写好的情况下,为了避免用户体验差,一般做假链接。
格式:
<a href="#">热点</a>
<a href="javascript:">热点</a>
两者的区别:
- 会自动回到顶部(淘宝就是这么玩的,回到顶部)。
- javascript不会回到顶部
8.锚链接
作用:跳转到页面中的指定位置
格式:
<a href="#two">热点</a>
<p id="two">跳转的位置</p>
注意点:除了能跳转本页面指定的位置,还能跳转别的页面的指定的位置。
<a href="跳转页面的路径#two">热点</a>
三、什么是列表
作用:给一些数据添加列表语义,告诉浏览器这些数据是一个整体(列表)。
列表的分类
1.无序列表(用的最多的)
格式:
<ul>
<li></li>
<li></li>
<li></li>
...
</ul>
属性:type
属性值:
- dise 默认的为实心圆
- square 实心方
- circle 空心圆
注意点:
- 对整个无序列表添加样式点 必须写在ul标签里面
- 独占一行的
- 列表标签是可以嵌套的
应用场景:
- 商品列表的展示。
- 新闻的列表。
- 导航条。
快捷键:
- ul>li*n :一个ul下面有n个li。
- ctrl+d :复制当前行。
2.有序列表(用的比较少)
格式:
<ol>
<li></li>
<li></li>
...
</ol>
属性:type
取值:
- 默认的以数字排序
- a/A 以英文的大小写排序
- i/I 以罗马文数字的大小写排序
应用场景:同上
3.自定义列表
格式:
<dl>
<dt>标题</dt>
<dd>内容</dd>
<dd>内容</dd>
...
<dt>标题</dt>
<dd>内容</dd>
<dd>内容</dd>
...
</dl>
应用场景:图文混排
四、表格
1.什么是表格
表格是一种数据的呈现形式,当数据量比较大的时候,表格的展现会让数据更加的清晰。
2.什么是表格标签
用来给一堆数据添加表格的语义。
格式:
<table> 表格
<tr> 行
<td></td><td></td><td></td>.... 列 内容写在td里面
</tr>
<tr>
<td></td><td></td><td></td>....
</tr>
</table>
3.表格中的属性:
- border:表格中的边框 默认情况下0 取值代表边框的粗细
- cellspacing 单元格与单元格之间的间距 默认为2个像素的
- cellspadding 单元格与内容之间的距离 默认1个像素
- width: 表格的宽度 默认情况下为内容的宽度
- height:表格的高度 默认情况下为内容的高度
- align: 水平对齐的方式: left center right 默认left
在table中设置 表格在浏览器中为 居左 居中 居右
在tr中设置 当前行的内容在表格中 居左 居中 居右
在td中设置 当前列(当前单元格)的内容在表格中 居左 居中 居右 - valign 垂直对齐方式 : top middle bottom
在table中设置 无效
在tr中设置 当前行的内容在表格中 居上 居中 居下
在td中设置 当前列(当前单元格)的内容在表格中 居上 居中 居下 - bgcolor 设置表格的背景颜色
在table中设置 为整个表格添加背景颜色
在tr中设置 为当前行添加背景
在td中设置 为当前列(当前单元格)添加背景 - th(推荐不使用)
作用:给表格中的文字加粗 居中
<tr><td>XXX</td></tr>
<tr><th>XXX</th></tr>
注意:表格是独占一行的!
4.表格的结构
作用:由于表格中存储的数据比较复杂(标题 头 主体 尾巴)为了方便管理和阅读,我们必须要提升表格的语义,我们可以把表格分为4类。
结构:
<table>
<caption>表格的标题</caption>
<thead>
<tr><td></td><td></td></tr>
</thead>
<tbody>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
......
</tbody>
<tfoot>
<tr><td></td><td></td></tr>
</tfoot>
</table>
caption :指定表格的标题。
thead :指定表格的头。
tbody :指定表格的主体。
tfoot :指定表格的附加信息。
5.合并单元格
格式:
合并行 :rowspan=“n” ,n代表合并几行。
合并列 :colspan=“n” ,n代表合并几列。
注意点 : 写在td里面。
五、什么是表单
表单是用来收集用户填写的信息的。
1.什么是表单元素
什么是元素?
a:a标签 a标记 a元素
元素就是一种新的说法而已。
组成表单标签的元素。
表单元素
格式:
<form>
表单元素
</form>
快捷键 :input:type的值 tab。
属性:value 输入框的默认值。
注意:表单元素不是独占一行的!
技术分析
(HTML的表单标签)
-
表单标签:
需要提交的表单需要使用<form></form>
括起来。
action:提交路径。
method:提交方式 Get(获取数据) 和 Post(提交数据 Post 安全性较高) 。
文本框:<input type=”text”/>
name:控件的名称 (一组控件的名称)。
value :控件的值。
size :控件的长度。
maxlength:控件中文字的最大数量。
readonly:控件设置为只读的。
密码框:<input type=”password”/>
单选按钮:<input type=”radio”/>
Checked:默认选中
复选框:<input type=”checkbox”/>
下拉列表框:<select><option></option></select>
Selected:默认选中
Multiple:全部显示
文件上传项:<input type=”file” name=”file”/>
文本域:<textarea name=”” cols=”” rows=””></textarea>
提交按钮:<input type=”submit” value=”注册”>
重置按钮:<input type=”reset” value=”重置”>
普通按钮:<input type=”button” value=”普通按钮”>
隐藏字段:<input type=”hidden” name=”id”/>
-
提交方式
GET :默认值
提交的数据都会在地址栏中进行显示
提交的数据的时候是有大小的限制
POST :
提交的数据不会再地址栏中进行显示
提交的数据没有大小限制 -
文本框
格式:<input type="text">
提高用户输入的体验
1.给输入框添加id属性并赋值
2.把文字放入label标签
3.将label中添加for属性并赋值 值=id的值 -
密码框
格式:<input type="password">
-
单选按钮
格式:<input type="radio">男
注意:想要实现单选 表单radio的name属性值必须相同
如何默认选择 一个radio checked=“checked” -
多选按钮
格式:<input type="checkbox">读书
注意:实现默认选中 添加 checked属性 -
按钮
普通按钮:格式<input type="button" value="我是普通按钮">
注意:value 给按钮赋值【按钮的显示文字】
普通按钮结合js使用的 -
重置按钮
格式:<input type="reset" value="重置">
-
提交按钮
格式:<input type="submit" value="提交">
作用:把用户的输入信息提交到后台
注意点:提交到那里去? form里 action指定提交地址 -
隐藏域
格式:<input type="hidden" name="" value="999">
文件元素<input type="file">
非input标签
1.下拉框
格式:
<select>
<option>苏州</option>
<option>非洲</option>
<option>八宝粥</option>
</select>
注意:下拉框不能输入内容。
添加selected默认选择该内容 selected=“selected”
2.文本域
格式:<textarea>
文本 :</textarea>
注意:默认情况下,可以无限换行。
默认情况下输入框有自己的宽和高
可以通过rows/cols来设置文本域的宽/高
文本域的宽高可以拉伸 (之后学习CSS可控制其不被拉伸)
数据是如何过去的?
name属性 以键值对的形式传输的。
数据的提交方式是什么?
form里 method常见的两大提交方式 get/post。
六、HTML的框架
- 技术分析
HTML的框架标记( HTML5不支持<frameset>
标签。)
<frameset></frameset>
注意点:使用了frameset标签,不需要使用body。 - 属性
rows:横向切分页面。
cols:纵向切分页面。
frameborder :是否显示框架边框 ( 0 、 1、 yes、 no)。
<frame>
标签代表切分每个部分的页面
src:引入页面的路径.。
name 框架页面的名称。
noresize :禁止调整大。
scrolling : 是否显示滚动条。