HTML的文件结构:<html>
<head>网页头部信息</head>
<body>网页主体正文部分</body>
</html>
HTML的基本标记:定义网页背景色——bgcolor
<body bgcolor=”背景颜色 ”>
设置背景图片——backgroung
<body background=”图片的地址 ”>
设置文字颜色——text
<body text=”文字的颜色 ”>
设置链接文字属性
<body link=”颜色 ”>
(使用alink可以设置鼠标单击超链接时的颜色
使用vlink可以设置已访问过的超链接颜色)
设置页面边距——margin
topmargin 设置顶边的距离
leftmargin 设置左边的距离
rightmargin 设置右边的距离
bottommargin 设置底边的距离
页面的头部元素<!DOCTYPE>和<head>
<!DOCTYPE>为浏览器提供的一项声明
<head>文档头部信息</head>
页面标题元素<title>
<title>…</title>(输入标题信息在浏览器上显示)
元信息元素<meta>
设置页面关键词
<meat name=”keywords ”content=”输入具体的关键词”>
设置页面主要内容
<meat name=”description ”content=”页面描述 ”>
定义页面的搜索方式
<meat name=”robots ”conten=”搜索方式 ”>
搜索方式取值:all 表示能搜索当前网页及其链接的网页
nofollow 搜索引擎不继续通过此网页的链接搜索其他的网页
follow 搜索引擎继续通过此网页的链接搜索其他的网页
index 表示能搜索当前网页
noindex 表示不能搜索当前网页
none 搜索引擎将忽略此网页
定义编辑工具(generator:设置编辑工具)
<meat name=”generator ”content=”编辑软件的名称 ”>
定义页面的作者信息(author:设置作者信息)
<meat name=”author ”content=”作者的姓名”>
定义网页文字及语言(http-equiv 用于传送HTTP通信协议的标头)
<meat http-equiv=”content-type”content=”text/html ;charest=字符集类型”/>
定义页面的跳转 (refresh网页刷新)
<meat http-equiv=”refresh ”content=”跳转的时间;URL=跳转到的地址”>
定义页面的版权信息——copyright
<meat name=”copyright ”content=”©http://www.baidu.com”/>
脚本元素<script>
<script type=”text/javascript ”src=”dru.js ”></script>
创建样式元素<style>
<style type=”text/css ”>
…………………………………………
</style>
链接元素<link>
<head>
<link rel=”stylesheet ”type=”text/css “href=”theme.css “/>
</head>
设置文字与段落格式
插入空格符号: 
输入特殊符号:&-&;﹤-<;﹥->;x-×;§-§;©-©;®-®;™-&trade
设置字体——face
<font face=”字体样式 ”>……</font>
设置字号——size
<font size=”文字字号 ”>……</font>
设置文字颜色——color
<font color=”字体颜色 ”>……</font>
设置粗体、斜体、下划线——b、strong、em、u
<b>加粗的文字</b>
<strong>加粗的文字</strong>
<i>斜体文字</i>
<em>斜体文字</em>
<cite>斜体文字</cite>
<u>下划线的内容</u>
设置上标和下标——sup、sub
<sup>上标内容</sup>
<sub>下标内容</sub>
设置段落的格式
段落标记——p
<p>段落文字</p>
段落的对齐属性——align
<aling=对齐方式>(left 左对齐、right 右对齐、center 居中对齐)
不换行标记——nobr
<nobr>不换行文字</nobr>
换行标记——br
<br>
插入水平线——hr
<hr>
设置水平线宽度与高度属性——width、size
<hr width=”宽度 ”>
<hr size=”高度 ”>
设置水平线的颜色——color
<hr color=”颜色 ”>
设置水平线的对齐方式——aling
<hr aling=”对齐方式 ”> (left 左对齐、right 右对齐、center 居中对齐)
水平线去掉阴影——noshade
<hr noshade>
设置滚动文字
滚动文字标签——marguee
<marquee>滚动的文字</marquee>
滚动方向属性——direction (默认:文字滚动的方向是从右向左的,可通过direction标记来设置滚动的方向)
<marquee direction=”滚动方向 ”>滚动的文字</marquee>
滚动方式属性——behavior
<marquee behavior=”滚动方式 ”>滚动的文字</marquee>
Behavior标记的属性:scroll-循环滚动,默认效果
Slide-只滚动一次就停止
alternate-来回交替进行滚动
滚动速度属性——scrollamount
<marquee scrollamount=”滚动速度 ”>滚动的文字</marquee>
滚动延迟属性——scrolldelay (毫秒)
<marquee scrolldelay=”时间间隔 ”>滚动的文字</marquee>
滚动循环属性——loop
<marquee loop=”循环次数 ”>滚动的文字</marquee>
滚动范围属性——width、height
< marquee width=”背景宽度 ”height=”背景高度 ” >滚动的文字</marquee>
滚动背景颜色属性——bgcolor
<marquee bgcolor=”背景颜色 ”>滚动的文字</marquee>
滚动空间属性——hspace、vspace(设置滚动文字周围的文字与滚动背景之间的空白区域)
<marquee hspace=”水平范围 ”vspace=”垂直范围 ”>滚动的文字</marquee>
创建精彩的图像和多媒体页面
插入图像并设置图像属性
图像标记——img
<img src=”图像文件的地址”>
属性 描述 属性 描述
src 图像的源文件 dynsrc 设定avia文件的播放
alt 提示文字 loop 设定avia文件循环播放的次数
width,height 宽度和高度 loopdelay 设定avia文件循环播放的延迟时间
border 边框 start 设定avia文件的播放方式
vspace 垂直间距 lowsrc 设定低分辨率图片
hspace 水平间距 usemap 映像地图
align 排列
设置图像高度——height(如果img元素不定义高度,图片就会按照其原始尺寸显示)
<img src=”图像文件的地址 ”height=”图像的高度 ”>
设置图像宽度——width
<img src=”图像文件的地址”width=”图像的宽度 ”>
设置图像的边框——border
<img src=”图像文件的地址 ”border=”图像边框的宽度 ”>
设置图像水平间距——hspace
<img src=”图像文件的地址 ”hspace=”水平边距 ”>
设置图像垂直间距——vspace
<img src=”图像文件的地址 ”vspace=”垂直边距 ”>
设置图像的对齐方式——align
<img src=”图像文件的地址 ”align=”对齐方式 ”>
属性 描述 属性 描述
Bottom 把图像与底部对齐 top 把图像与顶部对齐
left 把图像对齐到左边 right 把图像对齐到右边
middle 把图像与中央对齐
设置图像的代替文字——alt
<img src=”图像文件的地址 ”alt=”提示文字的内容 ”>
添加多媒体文件
<embed src=”多媒体文件地址 ”width=”多媒体的宽度 ”height=”多媒体的高度 ”autostart=”是否自动运行”loop=”是否循环播放 ”></embed>
添加背景音乐——bgsound
<bgsound src=”背景音乐的地址 ”>
设置循环播放次数——loop(-1是无限循环)
<bgsound src=”背景音乐的地址 ”loop=”播放次数 ”>
创建超链接和表单
创建基本超链接
超链接标记——a
<a href=”链接目标 ”>链接显示文本</a>
属性 说明 属性 说明
href 指定链接地址 title 为链接添加提示文字
name 为链接命名 target 指定链接的目标窗口
设置的目标窗口(使用target 属性来控制打开的目标窗口)
<a href=”链接目标 ”target=”目标窗口的打开方式”>
创建图像的超链接
设置图像超链接——a
<a href=”链接目标 ”>链接的图像</a>
设置图像热区链接(形状:矩形-rect 椭圆形-circle 多边形-poly)
<img usemap=”#热区名称 ”>
<map name=”热区名称 ”>
<area shape=”热点形状 ”coords=”区域坐标 ”href=”#链接目标 ”alt=”替换文字 ”>
…………………………………………………………………
</map>
创建锚点链接
创建锚点:<a name=”锚点的名称 ”></a>
链接到页面不同位置的锚点链接:<a href=”#锚点的名称 ”>……</a>
插入表单——form
处理动作——action(用于指定表单数据提交到哪个地址进行处理)
<form action=”表单的处理程序 ”>
…………………………………
</form>
表单名称——name
<form name=”表单名称 ”>
………………………………….
</form>
传送方法——method
<form method=”传送方法 ”>
……………………………..
</form>
编码方式——enctype
<form enctype=”编码方式 ”>
……………………………………
</form>
enctype的取值 取值含义
application/x-www-form-ulencoded 默认的编码形式
multipart/form-data MIME编码,上传文件的表单必须选择项
目标显示方式——target
<form target=”目标窗口的打开方式 ”>
……………………………………
</form>
创建强大的表格
创建并设置表格属性
表格的基本标记——table、tr、td
<table>
<tr>
<td>单元格内的文字</td>
<td>单元格内的文字</td>
</tr>
<tr>
<td>单元格内的文字</td>
<td>单元格内的文字</td>
</tr>
</table>
表格宽度和高度——width、height
<table width=”表格的宽度 ”height=”表格的高度 ”>
表格的标题——caption
<caption>表格的标题</caption>
表格的表头——th
<table>
<tr>
<th>…….</th>
</tr>
</table>
表格对齐方式——aline(left-左对齐 center-居中 right-右对齐)
<table aline=”对齐方式”>
表格的边框宽度——border
<table border=”边框宽度 ”>
表格边框颜色——bordercolor
<table border=”边框宽度 ”bordercolor=”边框颜色”>
单元格间距——cellspacing
<table cellspacing=”间距值 ”>
单元格边距——cellpadding
<table cellpadding=”文字与边框距离值 ”>
表格的背景颜色——bgcolor
<table bgcolor=”背景颜色 ”>
表格的背景图像——background
<table background=”背景图像地址 ”>
设计表头样式——thead
<thead>
…………………………
</thead>
设计表主体样式——tbody
<tbody bgcolor=”背景颜色 ”align=”对齐方式 ”>
…………………………………………………….
</tbody>
设计表尾样式——tfoot
<tfoot bgcolor=”背景颜色 ”align=”对齐方式 ”valign=”垂直对齐方式 ”>
…………………………………………………..
</tfoot>
创建框架结构网页
水平分割窗口——rows
<frameset rows=”高度1,高度2,….,*”>
<frame src=”url ”>
<frame src=”url ”>
……………………..
</frameset>
垂直分割窗口——cols
<frameset cols=”高度1,高度2,….,*”>
<frame src=”url ”>
<frame src=”url ”>
……………………..
</frameset>
嵌套分割窗口
<frameset rows=”30%,*”>
</frame>
<frameset cols=”20%,*”>
<frame>
<frame>
</frame>
</frame>
设置边框——frameborder
<frameset frameborder=”是否显示 ”>
框架的边框宽度——framespacing
<frameset framespacing=”边框宽度 ”>
框架的边框颜色——bordercolor
<frameset bordercolor=”边框颜色 ”>
框架页面源文件——src
<frame src=”html文件的位置 ”>
框架名称——name
<frame src=”html文件的位置 ”name=”子窗口名称 ”>
调整框架窗口的尺寸——noresize
<frame src=”页面源文件地址 ”noresize >
框架边框与页面内容的水平边距——marginwidth
<frame src=”页面源文件地址 ”marginwidth=”value ”>
框架边框与页面内容的垂直边距——marginheight
<frame src=”页面源文件地址 ”marginheight=”value ”>
设置框架滚动条显示——scrolling
<frame scrolling=”yes 或no或auto ”>
不支持框架标记——noframes
<noframes>
</noframes>
浮动框架的页面源文件——src
<iframe src=”url ”></iframe>
浮动框架的宽度和高度——width和 height
<iframe src=”浮动框架的源文件 ”width=”浮动框架的宽 ”height=”浮动框架的高 ”>
</iframe>
浮动框架的对齐方式——align
<iframe src=”浮动框架的源文件 ”align=”对齐方式 ”></iframe>
设置浮动框架是否显示滚动条——scrolling
<iframe src=”浮动框架的源文件 ”scrolling=”是否显示滚动条 ”></iframe>
属性 说明
auto 默认值,整个框架在浏览器页面中左对齐
yes 总是显示滚动条,即使页面内容不足以撑满框架范围,滚动条的位置也会预留出
no 在任何情况下都不显示滚动条
浮动框架的边框——frameborder
<iframe src=”浮动框架的源文件 ”frameborder=”是否显示框架边框 ”></iframe>
今天的文章HTML的基本语法分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/55187.html