HTML笔记
1.什么是HTML标记语言
表示网页信息的符号标记语言
2.特点
1.可以设置文本的格式(标题、字号、文本颜色、段落)
2.可以创建列表
3.可以插入图像和媒体
4.可以建立表格
5.超链接,实现页面的跳转
3.HTML文档的保存格式
1.可以以.html
2.可以以.htm
3.可以以.xhtml
4.HTML语法不区分字母大小写
如<HTML>、<Html>、<html>都是指相同的标签
5.HTML中常见的转义字符(字符实体)
空格  
小于号 < <
大于号 > >
...
6.<html>和</html>
HTML文档的文档标记,也称为HTML开始标记,位于网页的最前端和最后端
7.<head>和</head>
HTML文件头标记,也称为HTML头信息开始标记,用来包含文件的基本信息,内容不会在浏览器中显示、
8.<title>和</title>
HTML文档标题标记,网页的主题,显示在浏览器窗口的左上边
9.<body>和</body>
网页的主体部分,内容在浏览器上显示
10.<meta>和</meta>
页面的元信息,提供有关页面的元信息,如针对搜索引擎和更新频度的描述和关键词。必须的属性content,meta标记必须放在head元素里面
11.格式标记
1.<br> 强制换行标记
2.<p> 换段落标记
3.<center> 居中对齐标记
4.<pre> 预格式化标记 保留预先编排好的格式
5.<li> 列表项目标记
6.<ol> 有序列表 有序列表的type类型a A 1 I i
7.<ul> 无序列表
8.<dl><dt><dd> 定义型列表 对列表条目进行简短的说明
9.<hr> 水平分割线
10.<div> 分区显示标记(分层标记)
12.文本标记
1.<hn> 标题标记 从h1-h6,不同级别对应显示大小不同的标题,h1最大,h6最小
2.<font> 字体设置标记 三个常用的属性 size color face(字体)
3.<b> 粗字体标记 将字体加粗
4.<i> 斜字体标记 将字体倾斜
5.<sub> 文字下标字体标记
6.<sup> 文字上标字体标记
7.<cite> 引用方式的字体,通常是斜体
8.<em> 表示强调,通常显示为斜体字
9.<strong> 表示强调,通常显示为粗体字
10.<small> 小型字体标记
11.<big> 大型字体标记
12.<u> 下划线字体标记
13.图像标记
<img> <img src="文件路径" width="属性值" height="属性值" border="属性值" alt="属性值"/>
注意:1是一个单标记 2文件路径错误或者格式错误,无法加载
alt的作用 1.当网页上的图片被加载完成后,鼠标移动到上面去,会显示这个图片指定的属性文字
2.如果图像没有加载或者加载失败,会用文字来代替图像显示
3.搜索引擎可以通过这个属性的文字来抓取图片
14.超链接的使用
基本语法<a href="" target="打开方式" name="页面描点名称"></a>
target="_blank" 在新窗口中打开链接
target="_self" 在当前窗口中打开链接
target="_parent" 在父窗口中打开页面(一般用于框架中)
target="_top" 在顶层窗口中打开文件(一般用于框架中)
15.表格
1.<table>标记
属性:width(宽度) height(高度) border(边框) align(显示位置 left center right) cellspacing(单元格之间的间距,默认是2px)
cellpadding(单元格内容与单元格边框的显示距离,默认是2px)
frame(控制表格边框最外层的四条线框 void(无边框) above(仅有顶部边框) below(仅有底部边框) hsides(显示顶部和底部))
(lhs(仅左侧边框) rhs(仅右侧边框) vsides(左右两侧边框) box(四个边框) border(四个边框))
rules(控制是否显示以及如何显示单元格之间的分割线 none(无分割线) all(包括所有分割线) rows(仅有行分割线) clos(仅有列分割线))
rules(groups(仅在行组和列祖之间有分割线))
2.<caption>标记 表格需要使用标题,就可以使用<caption>标记,位置位于<table>标记之后,<tr>标记之前
属性:align(对齐方式 top(标题放在表格的上部) bottom(标题放在表格的下部) left(标题放在表格的左部) right(标题放在表格的右部))
3.<tr>标记 可以嵌套多个<td>或者<th>标记
属性:bgcolor(背景色) valign(垂直方向对齐方式 bottom(靠顶端对齐) top(靠底部对齐) middle(居中对齐))
align(水平方向对齐方式 left(靠左对齐) right(靠右对齐) center(居中对齐))
4.<th>和<td>标记 <th>是表头标记,通常位于首行或者首列,文字默认会被加粗。<th>和<td>两者的属性一样
属性:bgcolor(背景色) align(设置单元格对齐方式) valign(设置单元格垂直对齐方式) width(宽度) height(高度) rowspan(设置单元格所占行数)
colspan(设置单元格所占列数)
16.HTML框架
框架将浏览器划分为不同的部分,每一部分加载不同的网页,实现在同一浏览器窗口中加载多个页面的效果
<frameset>划分框架标记
属性:cols使用像素和%分割左右窗口,*表示剩余部分。 如果用“*”,“*”将框架分成两个。使用“*”,“*”,“*”表示将框架分成三个部分
rows使用像素和%分割上下窗口,*表示剩余部分。
frameborder指定是否显示边框 0不显示,1显示
border设置边框大小,默认值是5像素
<frame>子窗口标记 是单标记 必须放在<frameset>中
属性:src加在网页文件的URL地址
noresize表示不能调整框架大小,没有设置就可以调整
frameborder指定是否显示边框 0不显示,1显示
scrolling是否需要滚动条 1.auto根据需要自动出现 2.yes有 3.no无
17.表单设计
1.表单标记<from>
基本格式<from action="服务器地址" name="表单名称" method="post/get"></from>
属性:name表单名称
method分为post和get两种方式
action表单数据的处理程序的URL地址
enctype设置表单的编码方式
target和超链接类似
2.文本域和密码
<input>标记
基本格式 <input type="" name="" size="" maxlength=""/>
属性: type 1.text文本输入域 2.password密码输入域
name 定义控件的名称
value 初始化值
size 设置控件的长度
maxlength 输入框中允许输入的最大字符数
3.提交、重置、普通按钮
1.提交按钮<input type="submit"/>
2.重置按钮<input type="reset"/>
3.普通按钮<input type="button"/>
4.单选框和复选框
1.单选框<input type="radio"/>
2.复选框<input type="checkbox"/>
5.隐藏域
<input type="hidden"/>
6.多行文本域
基本格式<textarea name="" rows="" cols="" value=""></textarea>
属性:rows显示的行数 cols显示的列数
7.菜单下拉列表域
1.<select>标记
基本格式<select name="" size="" multiple><option value="" selected>选项1</option></select>
属性:multiple实现多选
2.<option>标记必须放在<select>标记之间
18.HTML<!DOCTYPE>声明标签
定义和用法<!DOCTYPE>声明必须是HTML文档的第一行,位于<html>标签之前
是指明web浏览器关于页面使用哪个HTML版本进行缩写的指令
各版本的声明:HTML5 <!DOCTYPE html> <meta charset="utf-8">
HTML4.01<!DOCTYPE HTML PUBLIC "-//W3C'//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
不允许使用框架
注意规则:1.但标记必须闭合
2.单属性必须添加属性值
3.标记和属性必须使用小写
4.属性的属性值必须使用""
1.什么是HTML标记语言
表示网页信息的符号标记语言
2.特点
1.可以设置文本的格式(标题、字号、文本颜色、段落)
2.可以创建列表
3.可以插入图像和媒体
4.可以建立表格
5.超链接,实现页面的跳转
3.HTML文档的保存格式
1.可以以.html
2.可以以.htm
3.可以以.xhtml
4.HTML语法不区分字母大小写
如<HTML>、<Html>、<html>都是指相同的标签
5.HTML中常见的转义字符(字符实体)
空格  
小于号 < <
大于号 > >
...
6.<html>和</html>
HTML文档的文档标记,也称为HTML开始标记,位于网页的最前端和最后端
7.<head>和</head>
HTML文件头标记,也称为HTML头信息开始标记,用来包含文件的基本信息,内容不会在浏览器中显示、
8.<title>和</title>
HTML文档标题标记,网页的主题,显示在浏览器窗口的左上边
9.<body>和</body>
网页的主体部分,内容在浏览器上显示
10.<meta>和</meta>
页面的元信息,提供有关页面的元信息,如针对搜索引擎和更新频度的描述和关键词。必须的属性content,meta标记必须放在head元素里面
11.格式标记
1.<br> 强制换行标记
2.<p> 换段落标记
3.<center> 居中对齐标记
4.<pre> 预格式化标记 保留预先编排好的格式
5.<li> 列表项目标记
6.<ol> 有序列表 有序列表的type类型a A 1 I i
7.<ul> 无序列表
8.<dl><dt><dd> 定义型列表 对列表条目进行简短的说明
9.<hr> 水平分割线
10.<div> 分区显示标记(分层标记)
12.文本标记
1.<hn> 标题标记 从h1-h6,不同级别对应显示大小不同的标题,h1最大,h6最小
2.<font> 字体设置标记 三个常用的属性 size color face(字体)
3.<b> 粗字体标记 将字体加粗
4.<i> 斜字体标记 将字体倾斜
5.<sub> 文字下标字体标记
6.<sup> 文字上标字体标记
7.<cite> 引用方式的字体,通常是斜体
8.<em> 表示强调,通常显示为斜体字
9.<strong> 表示强调,通常显示为粗体字
10.<small> 小型字体标记
11.<big> 大型字体标记
12.<u> 下划线字体标记
13.图像标记
<img> <img src="文件路径" width="属性值" height="属性值" border="属性值" alt="属性值"/>
注意:1是一个单标记 2文件路径错误或者格式错误,无法加载
alt的作用 1.当网页上的图片被加载完成后,鼠标移动到上面去,会显示这个图片指定的属性文字
2.如果图像没有加载或者加载失败,会用文字来代替图像显示
3.搜索引擎可以通过这个属性的文字来抓取图片
14.超链接的使用
基本语法<a href="" target="打开方式" name="页面描点名称"></a>
target="_blank" 在新窗口中打开链接
target="_self" 在当前窗口中打开链接
target="_parent" 在父窗口中打开页面(一般用于框架中)
target="_top" 在顶层窗口中打开文件(一般用于框架中)
15.表格
1.<table>标记
属性:width(宽度) height(高度) border(边框) align(显示位置 left center right) cellspacing(单元格之间的间距,默认是2px)
cellpadding(单元格内容与单元格边框的显示距离,默认是2px)
frame(控制表格边框最外层的四条线框 void(无边框) above(仅有顶部边框) below(仅有底部边框) hsides(显示顶部和底部))
(lhs(仅左侧边框) rhs(仅右侧边框) vsides(左右两侧边框) box(四个边框) border(四个边框))
rules(控制是否显示以及如何显示单元格之间的分割线 none(无分割线) all(包括所有分割线) rows(仅有行分割线) clos(仅有列分割线))
rules(groups(仅在行组和列祖之间有分割线))
2.<caption>标记 表格需要使用标题,就可以使用<caption>标记,位置位于<table>标记之后,<tr>标记之前
属性:align(对齐方式 top(标题放在表格的上部) bottom(标题放在表格的下部) left(标题放在表格的左部) right(标题放在表格的右部))
3.<tr>标记 可以嵌套多个<td>或者<th>标记
属性:bgcolor(背景色) valign(垂直方向对齐方式 bottom(靠顶端对齐) top(靠底部对齐) middle(居中对齐))
align(水平方向对齐方式 left(靠左对齐) right(靠右对齐) center(居中对齐))
4.<th>和<td>标记 <th>是表头标记,通常位于首行或者首列,文字默认会被加粗。<th>和<td>两者的属性一样
属性:bgcolor(背景色) align(设置单元格对齐方式) valign(设置单元格垂直对齐方式) width(宽度) height(高度) rowspan(设置单元格所占行数)
colspan(设置单元格所占列数)
16.HTML框架
框架将浏览器划分为不同的部分,每一部分加载不同的网页,实现在同一浏览器窗口中加载多个页面的效果
<frameset>划分框架标记
属性:cols使用像素和%分割左右窗口,*表示剩余部分。 如果用“*”,“*”将框架分成两个。使用“*”,“*”,“*”表示将框架分成三个部分
rows使用像素和%分割上下窗口,*表示剩余部分。
frameborder指定是否显示边框 0不显示,1显示
border设置边框大小,默认值是5像素
<frame>子窗口标记 是单标记 必须放在<frameset>中
属性:src加在网页文件的URL地址
noresize表示不能调整框架大小,没有设置就可以调整
frameborder指定是否显示边框 0不显示,1显示
scrolling是否需要滚动条 1.auto根据需要自动出现 2.yes有 3.no无
17.表单设计
1.表单标记<from>
基本格式<from action="服务器地址" name="表单名称" method="post/get"></from>
属性:name表单名称
method分为post和get两种方式
action表单数据的处理程序的URL地址
enctype设置表单的编码方式
target和超链接类似
2.文本域和密码
<input>标记
基本格式 <input type="" name="" size="" maxlength=""/>
属性: type 1.text文本输入域 2.password密码输入域
name 定义控件的名称
value 初始化值
size 设置控件的长度
maxlength 输入框中允许输入的最大字符数
3.提交、重置、普通按钮
1.提交按钮<input type="submit"/>
2.重置按钮<input type="reset"/>
3.普通按钮<input type="button"/>
4.单选框和复选框
1.单选框<input type="radio"/>
2.复选框<input type="checkbox"/>
5.隐藏域
<input type="hidden"/>
6.多行文本域
基本格式<textarea name="" rows="" cols="" value=""></textarea>
属性:rows显示的行数 cols显示的列数
7.菜单下拉列表域
1.<select>标记
基本格式<select name="" size="" multiple><option value="" selected>选项1</option></select>
属性:multiple实现多选
2.<option>标记必须放在<select>标记之间
18.HTML<!DOCTYPE>声明标签
定义和用法<!DOCTYPE>声明必须是HTML文档的第一行,位于<html>标签之前
是指明web浏览器关于页面使用哪个HTML版本进行缩写的指令
各版本的声明:HTML5 <!DOCTYPE html> <meta charset="utf-8">
HTML4.01<!DOCTYPE HTML PUBLIC "-//W3C'//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
不允许使用框架
注意规则:1.但标记必须闭合
2.单属性必须添加属性值
3.标记和属性必须使用小写
4.属性的属性值必须使用""