HTML初级知识点总结最详细的总结Word文件下载.docx
- 文档编号:21445996
- 上传时间:2023-01-30
- 格式:DOCX
- 页数:10
- 大小:20.02KB
HTML初级知识点总结最详细的总结Word文件下载.docx
《HTML初级知识点总结最详细的总结Word文件下载.docx》由会员分享,可在线阅读,更多相关《HTML初级知识点总结最详细的总结Word文件下载.docx(10页珍藏版)》请在冰豆网上搜索。
hn>
n的取值1-6,1级标题最大
效果:
加粗显示,带有自动换行
属性:
align控制标题的对齐方式,取值left(左对齐,默认值)|center(居中)|right(右对齐)
2、段落标记<
p>
把内容分段展示,自动换行
align,控制段落内容的对齐方式,取值left(左对齐,默认值)|center(居中)|right(右对齐)
3、换行符<
br/>
单标记,不需要结束标记,换行但不分段
空格符号:
&
nbsp;
表示一个空格
强制换行符:
<
4、水平线标记<
HR/>
单标记
水平线,默认是一个粗细为2px(像素)的线条
size控制水平线的粗细,取值为整数,单位为像素(px)
width控制水平线的长度,取值可以是像素单位,也可以是百分数(相对于浏览器窗口百分比)
noshade设置水平线不带有阴影,该属性不需要取值
color设置水平线的颜色,取值可以是英文的颜色值,也可以是十六进制的颜色代码
align控制水平线的对齐方式,取值left(左对齐)|center(居中,默认值)|right(右对齐)
5、分节标记<
div>
把内容设置为一节,前后带有自动换行
align控制div中内容的对齐方式,取值left(左对齐,默认值)|center(居中)|right(右对齐)
6、居中标记符<
center>
把center标记中的内容居中显示
7、文本控制标记<
font>
控制字体的各种显示样式
size控制字体的大小,取值为绝对值时,1--7,数字越大字体越大,取相对值时,参考的是默认字体(3号),取值在-2--+4之间
color控制字体的颜色
face控制字体的字体,取值可以是多个值,多个值之间使用逗号分割,取值时从左往右依次取值,找到合适的值为止,假如都不支持,使用默认格式显示
8、字体的物理样式
加粗:
b>
斜体:
i>
下划线:
u>
删除线:
s>
上标:
sup>
下标:
sub>
1、常用逻辑字符
<
ADDRESS>
网页设计者或维护者的信息,通常显示为斜体
CITE>
表示文本属于引用,通常显示为斜体
CODE>
表示程序代码,通常显示为固定宽度字体
DFN>
表示定义了的术语,通常显示为黑体或斜体
EM>
强调某些字词,通常显示为斜体
KBD>
表用户的键盘输入,通常显示为固定宽度字体
SAMP>
表示文本样本,通常显示为固定宽度字体
STRONG>
特别强调某些字词,通常显示为粗体
VAR>
表示变量,通常显示为斜体
2、列表标记
1、有序列表,<
ol>
,需要配合<
li>
标记使用
一个<
标记对应一个选项
ol的属性:
type控制列表的符号样式,取值1|A|a|i|I,默认是1
start控制列表的起始值,取值为任意的整数
li的属性:
type控制选项自身的符号样式,取值1|A|a|i|I
value控制选项本身的起始值,取值为任意整数,但是修改自身起始值之后,会对同一个列表中本选项之后的同级<
标记产生影响
2、无序列表,<
ul>
,配合<
ul的属性:
type控制所有选项的符号样式,取值disc(实心圆,默认值)|circle(空心圆)|square(方块)
type控制选项本身的符号样式
li标记用在ol中,type属性的取值跟ol的type属性取值走,用在ul中,跟着ul的type属性取值走
3、定义列表,<
dl>
,完成对定义列表的声明
dt>
,术语标记,可以理解为类似于列表选项的标题使用
dd>
描述标记,可以理解为类似于列表的选项使用
三.在网页中使用图片
标记:
img>
单标记,不需要结束标记
属性:
src引入图片资源的路径
绝对路径:
资源在服务器上的位置,该位置是从盘符出发
相对路径:
资源在服务器上的相对位置,从网页本身出发
..\返回上一层文件夹
width控制显示图片的宽度,取值为像素或者百分数
height控制显示图片的高度,取值为像素或者是百分数
只设置宽度或高度时,图片保持等比缩放,同时设置时,同时生效
border控制显示图片的边框,取值为像素,默认不显示边框
hspace控制显示图片水平方向上的空白,取值为像素
vspace控制显示图片垂直方向上的空白,取值为像素
align控制图片和周围文本的对齐方式
垂直方向上:
top文本和图片顶部对齐
bottom文本底部和图片底部对齐
middle文本的底部和图片的中部对齐
absmiddle绝对中间对齐,文本的中部和图片的中部对齐
水平方向上:
left图片在左,文本在右
right文本在左,图片在右
图片的对齐方式:
借助<
或者<
四.在网页中使用超链接
4、超链接
标记:
a>
...<
/a>
通过链接跳转到新的资源
href链接的目标资源的路径
链接外部资源时,一定是绝对路径,并且需要在路径前加上【http:
//】这个网络通信协议
target指定超链接的打开方式,_self在自身的页面打开超链接(默认的打开方式),_blank重新打开一个新的浏览器窗口
建立锚点(书签)
内部书签
1、设置锚点的名称例如:
aname="
锚点名"
>
2、使用超链接完成跳转例如:
ahref="
#锚点名"
外部书签
锚点所在页面的路径#锚点名"
超链接
发送电子邮件,格式<
mailto:
邮箱地址"
发送邮件<
2、链接多媒体
五.表格的应用
表格的结构
table>
---声明表格
caption>
/caption>
---表格的标题
tr>
----表格的行
td>
....<
/td>
---表格的列
....
/tr>
...
/table>
标记,定义表格,所有表格的内容书写在<
开始和<
结束标记之间
frame控制表格最外层的四个边框
取值:
void默认值,不显示边框
above仅显示上边框
below仅显示下边框
hsides显示上下边框
vsides显示左右边框
lhs仅显示左边框
rhs仅显示右边框
box、border显示四个边框
rules控制表格内部分割线
none默认值,不显示
rows显示行分割线
cols显示列分割线
all显示所有分割线
bordercolor控制边框的颜色
border控制表格的所有边框,取值为像素
cellspacing控制单元格与单元格之间的空白,取值为像素
cellpadding控制单元格内容和单元格边框之间的空白,取值为像素
width设置单元格的宽度,取值为像素或者百分数
height设置单元格的高度,取值为像素或者百分数
align控制表格的对齐方式,取值left(默认值)|center|right
bgcolor设置表格的背景色
background设置表格的背景图
当背景色和背景图同时设定时,优先使用背景图
表格的标题,必须书写在<
之间
align控制表格标题的位置,取值top(标题在表格的顶部)|bottom(标题在表格的底部)
定义表格的行
align控制整行单元格内容的水平对齐方式,取值left(默认值,缺省值)|center|right
valign控制整行单元格内容的垂直对齐方式,取值top|middle(默认值)|bottom
height设置行的高度,取值为像素
bgcolor设置行的背景色
background设置行的背景图
bordercolor设置行的边框颜色
列标记
th>
列标题标记
都可以作为列使用,<
列标题标记,内容有加粗显示的效果,并且带有自动居中
align控制单元格内容的水平方向对齐方式,取值left|center|right
valign控制单元格内容的垂直方向对齐方式,取值top|middle(默认值)|bottom
height设置单元格的高度,取值以像素为单位,当同一行中不同的单元格设置的高度也不相同时,整行的高度取值按最大值来
width设置单元格的宽度,取值以像素为单位,当同一列中不同行的单元格设置的宽度不相同时,整列的宽度取值按最大值来
bgcolor设置单元格的背景色
bakground设置单元格的背景图
rowspan合并行
colspan合并列
合并行和合并列的取值都是整数,合并几个单元格取值就是几
六.框架的应用
1、框架
框架集标记<
frameset>
,在原有的html结构基础上,<
替换了<
的位置,换句话说,<
和<
不能共存,只能出现一个
rows设置横向框架的数量和高度,框架的数量取决于rows属性的取值个数,每个框架的高度取决于值的大小
cols设置纵向框架的数量和宽度,框架的数量取决于cols属性的取值个数,每个框架的宽度取决于值的大小
rows和cols的取值方式
1、像素值
2、百分数
3、比例取值
rows和cols取值,可以有多个值,值与值之间使用逗号分割,并且不能有空格格,cols和rows属性一般不同时设定,要想实现页面的纵向和横向分割,可以使用框架的嵌套来实现
frameborder使用在frameset中,可以控制框架集下的所有框架边框是否显示
框架标记<
frame/>
src引入目标资源的路径
name给框架起名字,需要配合超链接的target属性来使用,达到链接目标框架的目的
frameborder控制框架的边框是否显示,0表示不显示,1显示默认的3D边框
scrolling控制框架是否加入滚动条,取值yes(加入滚动条,需要时加入)|no(不加入滚动条)|auto(需要时加入滚动条,默认值)
noresize固定框架的边框,该属性不需要取值
marginheight在框架中显示内容时,控制内容和框架上下边框之间的空白,取值以像素为单位,以上边框为准
marginwidth在框架中显示内容时,控制内容和框架左右边框之间的空白,取值以像素为单位,以左边框为准
noframes>
当浏览器不支持框架时,显示的替换内容,必须包含一对<
7、表单的应用
表单
1.表单标记<
form>
表单不能嵌套使用,所有表单的内容必须书写在表单的开始标记和结束标记之间
表单结构:
<
inputtype=”text”>
单行文本格式
inputtype=”password”>
密码输入框
inputtype=”checkbox”>
复选框格式
inputtype=”radio”name=”sex”>
单选框格式
inputtype=”submit”>
提交的格式
inputtype=”reset”>
重置格式
inputtype=”button”>
自定义格式
select>
下拉菜单格式
option>
汉族<
/option>
满族<
壮族<
土家族<
/select>
textarea>
cols="
50"
rows="
4"
请多多指教多行文本
/textarea>
/form>
表单域<
input>
不同功能的表单域type属性的取值不同
type控制表单域的功能
取值text单行文本
password密码输入框
checkbox复选框
radio单选按钮
要实现单选,还要在后面加上一样的名字,例:
inputtype=”radio”name=”.....”>
submit提交
reset重置
button自定义按钮
value属性使用在提交、重置、自定定义按钮中,可以改变按钮的默认值
value属性使用在单行文本和密码框中,添加默认值
maxlength属性使用在单行文本和密码框中,限制输入的最大字符数,取值为整数
checked=“checked”使用在复选框和单选框中,表示该选项默认被选中
,菜单里有多个选项,一般用于选择年.月.日
属性1:
,一对option代表一个下拉选项
属性2:
,一对select代表一个下拉菜单
多行文本:
/textarea>
成对出现
cols=”....”cols取值为整数,限制每行的最多内容
Rows=”...”rows取值为整数,限制多行文本的行数
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- HTML 初级 知识点 总结 详细