html基础笔记
2016-04-30 18:33
561 查看
utf-8 国际标准字符集：常用语言与符号。
课时3：HTML文字标记及换 行，图片标记讲解。
知识点：
1:-html文字标记。
2--html<br/><p><img><hr><hn>
3--html实体
4---
1》普通文字在页面上正常显示。
2》字体标记：
<i></i>:双标记，标记斜体
例：<i>我</i>;
<strong></strong> 文本加粗；
<sup></sup>小写上标；
<sub></sub>小写下标；（用于写提示符）；
<font ></font>
font 中的属性：
size="值"——1~6；
color="#FF0000" 文本颜色；
face="隶书" 书法体；
二：html <br/><p><img><hr><hn>
a:<br/> 换行标记，浏览器解释大段空白，只认为是一个空格，
b:<p></p> 段落标记 上下都加空行，而且换行；
c:<hr/> 画线标记
属性：
color="#FF0000" 颜色
width="400" 长短
size="50" 高度
d：<hn> 标题标记；范围1~6大小依次减小。
<h1>今天</h1>
e:<img src=" "/> 图片标记；
属性：
src="图片路径"
路径规则：
1:->绝对路径；盘符+所有路径；
2：->相对路径 index.html-->imgs
1)同一目录下,平级：直接写文件名
2）在index.html目录下级：目录名称/文件名称
3）在index.html上级：../文件名
三：html实体：
出现与html语言相同的语句；
把字符与控制符进行转换的；
1:查实体html帮助手册或敲一个&符号；
例 单引号->&prime(英文版)；
":"
<:<
>:>
四：html<a>
超链接：点击后发生页面跳转的文字，图片
<a>页面上显示的元素</a>
1.本地跳外网：路径必须是全路径；
用属性 href="写全属性 "；
例：<a herf="http://www.baidu.com">百度</a>
2.跳内网：内网跳转遵循相对路径规则：
3.图片作为超链接：
例：
<a href="http://www.sohu.com"><img src="imgs/1.jpg"></a>
课时5：实例讲解table表格及其中属性
知识点：
一.table
二.form表单
一：table
<table></table> 表格标记；
<tr></tr> 行元素
<td></td> 列元素
1.. table包含行，行包含列；
属性：
border="1" 表格边框
align="center" 表格的水平位置left左 center中 right右
width="600" 表格宽度
height="300" 表格高度
cellpadding="20" 文字距离左边框的最小距离
callspacing="30" 边框距离；
bgcolor="#FF0000" 背景色；
background="imgs/1.jpg"
当背景图宽度和高度<表格的宽度和高度 背景图会在横向和纵向平铺（重复）；
当背景图宽度和高度>表格的宽度和高度 表格从左上角开始引用图片的一部分（和表格的宽度和高度相同。）
2..tr属性：只控制该行内容
align="center" left center right行中内容的左中右
height="100" 行高
valign="bottom" 行中内容的上中下 top middle bottom
3..td属性：只控制该列内容
align="right" left center right行中内容的左中右
valign="top" 行中内容的上中下 top middle bottom
width="100" 列宽（影响整行的列宽）
height="40" 行高（影响整行的宽）；
最后是td的align和valign
height遵循行高。
标记具有就近原则。
写在td中：
colspan="列数"合并列
rowspan="行数"合并行
注意：行和列都合并：先列后行。
二：form表单：主要是用来和用户交互的；
<form></form> 表单
1.input
<input type="元素名称"/>
普通按钮 button:value="按钮文字" js/jquery代码
复选框： checkbox:value="隐藏起来"
默认选中项：checked="checked" 处理和传递时用；
file 上传控件
hidden 隐藏域，value="" 和php脚本
image： 图片提交按钮；src="图片路径"；
<form>
action="处理页面" b.html；
method=“post/get”
get:传递数据相当于坐着拖拉机，慢而少；
post：传递数据相当于坐着和谐号，快而多；
submit 图片提交按钮，与image功能一样，是按钮形态的 有一个value的值；
password：
radio： 单选框，具有排他效果，添加name="相同"的属性；
一般是单项选择：
text 文本框：
reset 重置，把所有表单元素 还原成默认状态 value="按钮上的文字"；
2.非input:
a. <select></select> 下拉列表
<select>
<option>北京</option>
<option>天津</option>
<option selected="selected">上海</option> selected="selected" 默认选项
</select>
b. <textarea></textarea> 文本域
属性：
cols="文本列数" 最大列数
rows="文本行数" 最大行数
课时7 table表格加form表单实例讲解注册页面的搭建
一：demo 注册页（table+form）
课时8：HTML中框架集的讲解及实例布局网站后台页面；
知识点：
一：demo 注册页（table+form）
二：框架集 frameset
<frameset></frameset>写网站后台
div、css、table，框架集
属性：
rows="val1,val2,val3....*" val值有几个意味着页面上有几行 val表示行高，*：表示剩余的全部。
cols="val1,val2,val3....*" .................
<frame src="链接页面的路径">
frame中的属性：
frameborder="0" 框架边框
scrolling="no" 没有滚动条
noresize="noresize" 不能重新改变框架集的大小
在框架集的主干部分添加name="名字"属性，为其命名；
target="名字"；
课时3：HTML文字标记及换 行，图片标记讲解。
知识点：
1:-html文字标记。
2--html<br/><p><img><hr><hn>
3--html实体
4---
1》普通文字在页面上正常显示。
2》字体标记：
<i></i>:双标记，标记斜体
例：<i>我</i>;
<strong></strong> 文本加粗；
<sup></sup>小写上标；
<sub></sub>小写下标；（用于写提示符）；
<font ></font>
font 中的属性：
size="值"——1~6；
color="#FF0000" 文本颜色；
face="隶书" 书法体；
二：html <br/><p><img><hr><hn>
a:<br/> 换行标记，浏览器解释大段空白，只认为是一个空格，
b:<p></p> 段落标记 上下都加空行，而且换行；
c:<hr/> 画线标记
属性：
color="#FF0000" 颜色
width="400" 长短
size="50" 高度
d：<hn> 标题标记；范围1~6大小依次减小。
<h1>今天</h1>
e:<img src=" "/> 图片标记；
属性：
src="图片路径"
路径规则：
1:->绝对路径；盘符+所有路径；
2：->相对路径 index.html-->imgs
1)同一目录下,平级：直接写文件名
2）在index.html目录下级：目录名称/文件名称
3）在index.html上级：../文件名
三：html实体：
出现与html语言相同的语句；
把字符与控制符进行转换的；
1:查实体html帮助手册或敲一个&符号；
例 单引号->&prime(英文版)；
":"
<:<
>:>
四：html<a>
超链接：点击后发生页面跳转的文字，图片
<a>页面上显示的元素</a>
1.本地跳外网：路径必须是全路径；
用属性 href="写全属性 "；
例：<a herf="http://www.baidu.com">百度</a>
2.跳内网：内网跳转遵循相对路径规则：
3.图片作为超链接：
例：
<a href="http://www.sohu.com"><img src="imgs/1.jpg"></a>
课时5：实例讲解table表格及其中属性
知识点：
一.table
二.form表单
一：table
<table></table> 表格标记；
<tr></tr> 行元素
<td></td> 列元素
1.. table包含行，行包含列；
属性：
border="1" 表格边框
align="center" 表格的水平位置left左 center中 right右
width="600" 表格宽度
height="300" 表格高度
cellpadding="20" 文字距离左边框的最小距离
callspacing="30" 边框距离；
bgcolor="#FF0000" 背景色；
background="imgs/1.jpg"
当背景图宽度和高度<表格的宽度和高度 背景图会在横向和纵向平铺（重复）；
当背景图宽度和高度>表格的宽度和高度 表格从左上角开始引用图片的一部分（和表格的宽度和高度相同。）
2..tr属性：只控制该行内容
align="center" left center right行中内容的左中右
height="100" 行高
valign="bottom" 行中内容的上中下 top middle bottom
3..td属性：只控制该列内容
align="right" left center right行中内容的左中右
valign="top" 行中内容的上中下 top middle bottom
width="100" 列宽（影响整行的列宽）
height="40" 行高（影响整行的宽）；
最后是td的align和valign
height遵循行高。
标记具有就近原则。
写在td中：
colspan="列数"合并列
rowspan="行数"合并行
注意：行和列都合并：先列后行。
二：form表单：主要是用来和用户交互的；
<form></form> 表单
1.input
<input type="元素名称"/>
普通按钮 button:value="按钮文字" js/jquery代码
复选框： checkbox:value="隐藏起来"
默认选中项：checked="checked" 处理和传递时用；
file 上传控件
hidden 隐藏域，value="" 和php脚本
image： 图片提交按钮；src="图片路径"；
<form>
action="处理页面" b.html；
method=“post/get”
get:传递数据相当于坐着拖拉机，慢而少；
post：传递数据相当于坐着和谐号，快而多；
submit 图片提交按钮，与image功能一样，是按钮形态的 有一个value的值；
password：
radio： 单选框，具有排他效果，添加name="相同"的属性；
一般是单项选择：
text 文本框：
reset 重置，把所有表单元素 还原成默认状态 value="按钮上的文字"；
2.非input:
a. <select></select> 下拉列表
<select>
<option>北京</option>
<option>天津</option>
<option selected="selected">上海</option> selected="selected" 默认选项
</select>
b. <textarea></textarea> 文本域
属性：
cols="文本列数" 最大列数
rows="文本行数" 最大行数
课时7 table表格加form表单实例讲解注册页面的搭建
一：demo 注册页（table+form）
课时8：HTML中框架集的讲解及实例布局网站后台页面；
知识点：
一：demo 注册页（table+form）
二：框架集 frameset
<frameset></frameset>写网站后台
div、css、table，框架集
属性：
rows="val1,val2,val3....*" val值有几个意味着页面上有几行 val表示行高，*：表示剩余的全部。
cols="val1,val2,val3....*" .................
<frame src="链接页面的路径">
frame中的属性：
frameborder="0" 框架边框
scrolling="no" 没有滚动条
noresize="noresize" 不能重新改变框架集的大小
在框架集的主干部分添加name="名字"属性，为其命名；
target="名字"；
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 