目前所学的html知识小总结

最新推荐文章于 2024-04-22 10:57:48 发布

小王没有BUG

最新推荐文章于 2024-04-22 10:57:48 发布

阅读量392

点赞数

分类专栏：前端文章标签： html5

本文链接：https://blog.csdn.net/aa792978017/article/details/79606170

版权

前端专栏收录该内容

5 篇文章 2 订阅

订阅专栏

注释：<!-- --!>

一、<head>里面的应用元素：

1.显示在网页标题栏上的文字：<title></title>

2.<meta name="    " content="       ">     content里面写的是内容
keyname       具体关键字
  description   对页面的描述语言
generator     编辑软件的名称
author       作者的姓名
robots        所要限制的搜索方式       （1.All:表示能搜索当前网页及链接的网页；2.Index：表示能搜索当前网页；3.Nofollow：表示不能搜索与当前网页链接的网页；4.Noindex；表示不能搜索当前网页；5.None：表示不能搜索当前网页及其链接网页）
build       网页建立的日期（2008.08.08）
copyright     网页版权信息（明日科技）
reply-to      联系人邮箱

        设置网页文字及其语言： <meta charset="UTF-8">
设置网页定时跳转： <meta http-equiv=“refresh” content="跳转时间"；url="跳转地址">
设置到期时间：    =”expires“ content="到期时间"             （时间必须是GMT时间格式：星期，日月年时分秒如Web，14 september 2011 16：20：00 GMT）（网页一旦过期则必须到服务器上重新调用）
禁止从缓存中调用网页:                   ="cache-control(pragma)" content="no-cache"    （如果网页频繁跟新，用这个能使用户每次打开网页都能看到最新的消息）
删除过期的cookie   =”set-cookie“ content=”GMT时间“
强制打开新窗口：   =”windows-target“ content=”_top“      （强制网页在当前窗口中独立显示，防止自己的网页被别人当做frame页调用)
设置网页过渡效果：   =”过渡事件（page-enter/page-exit）“ content=”revealtrans（duration=过渡持续效果，transition=过渡方式)“>   (ie9以上都不能用，过渡方式见另外的说明书)

3.<base>    基底网址标记    <base herf="基地网址">（body中有<a herf="../1.html"></a> 其网址打开的时候是：基底网址/1.html 即把相对地址转换为绝对地址）

二、<body>里面的应用元素

1.body 页面的主体标记（<body text="">）
  text  设定页面文字的颜色
bgcolor 页面背景的颜色
background 页面背景图片
bgproperties 背景图片设为固定，不随页面的滚动而滚动
link  设定默认链接颜色
alink  鼠标单击时的颜色
vlink  访问过后的颜色
margin  页面边距（topmargin。。。）

2.文字标题的建立
<h1></h1>一级标题
<h6></h6>六级标题（网页设置不同等级标题时运用）

<h1 align="标题文字的对齐方式"> left center right 左对齐居中对齐右对齐

设置文字格式                <font 属性=”“>

设置文字字体  face（face=”字体1，字体2，华文彩云“）优先使用字体1，若无1则用二
设置字号  size（size=”3（1-7）（+1-+7）“）3号字体与默认字体相同，字号为相对默认字体大小设置
设置文字颜色  color
字体效果  <strong>粗体</strong>
    <em>斜体<>
    <u>带下滑线的文字
    <strike>删除线
    <code(samp)>等宽文字
特殊字符  空格（&nbsp）等   查html手册   记住常用的即可
上下标   sup 上标   sub下标（数学里面的平方或者底数）

设置段落格式

段落标记  <p></p>
取消换行标记  <nobr><nobr> (一行文字太长，会加滚动条而不换行)
换行标记  <br/>
保持排版标记  <pre></pre>
居中对齐标记  <center></center>
向右缩进标记  <blockquote></blockquote>
添加水平线  <hr width= height= color= align= noshade>    (设置宽高，颜色，对齐方式，去掉水平线阴影)
文字标注标记  <ruby>被说明的文字<rt>文字的标注</rt></ruby>   （同样可设置文字标注的属性，颜色，字体等）
声明变量标记  <var></var> （效果为斜体，一般用于变量声明如：x+y=2；等数学情形）
忽视HTML标签标记 <plaintext(xmp)> (时HTML标记失去作用，直接显示代码，一般放在<body>后面)
地址文字标签  <address></address> (一般用于定义地址，签名，文档作者身份等信息，电子邮箱等等）

列表
无序列表标记  <ul type=”“> <li>第一项</li> </ul> （ul表示无序列表的开始，li表示每一项）
         （type表示列表项开始的符号 disc 实心圆；circle：空心圆；square：实心方型）

有序列表标记  <ol type= start=""><li></li></ol>  (type表示列表开始的符号   1：数字1.2.3；i：小写罗马数字；I：大写罗马数字；a：英文字母abc；A：英文字母ABC)
          (start表示有序列表起始数值)

定义标记列表  <dl>
     <dt>名词1<dd>解释1
     <dt>名词2<dd>解释2   (dl表示定义列表的开始，dt后面时要解释的名词，dd后面时解释（一个dt可有多个dd）)
    <dl>

菜单列表标记  <menu><li></menu>    (效果跟无序列表一样，主要用于设计单列的菜单列表)
目录列表  <dir><li></dir>     (主要用于显示文件内容的目录大纲，通常用于设置一个压缩窄列的列表，用于显示一系列的列表内容)
设置列表文字的颜色 <li><font color=></font></li>
有序无序列表的嵌套使用 <ul><ol></ol></ul>    (依据需求直接嵌套即可)

超链接的使用

建立文本链接   <a href="链接地址" target="目标窗口打开方式">链接文字</a>   (可以时绝对地址也可以是相对地址)
设置超链接的目标窗口       (_parent:在上一级窗口打开，常在分帧的框架页面中使用；_blank:新建一个窗口打开；_self:在同一个窗口打开；_top:在浏览器的整个窗口打开，将会忽略所有框架结构)
建立书签  <a name="书签名字">文字</a>   (name中的为书签的名字，后面将是设置跳转效果)
链接到同一页面的书签 <a href="#书签名字">文字</a>   （语法：href=“#+书签名字”，点击链接则会跳转到书签名字的文字）
链接到不同页面的书签 <a href="链接的文件地址#书签的名称">链接的文字</a>

外部链接
    <a href="http://...">链接文字</a>       (通过http)
    <a href="ftp://..">链接文字</a>   (通过ftp文件传输协议)

发送email  <a href="mailto:792978017@qq.com"></a>  (通过mailto标签发送邮件，会自动打开计算机系统中默认的电子邮件客户端软件)
    <a href="mailto:电子邮件地址?CC=电子邮件地址">         （抄送收件人）
                                ？Subject=主题文字  （电子邮件主题）
           ？BCC=电子邮件地址  （暗送收信人）
           ？Body=邮件内容       （电子邮件内容）

下载文件 <a href=“文件所在地址” （绝对地址和相对地址都可以）

脚本链接 <a href="javascript:..."></a> (地址上放上脚本语言）？？不确定得去调查

空链接 “#” （指向链接后，鼠标变手型）

使用图片

添加图片  <img src="图片文件的地址" height=   width=   border= hspace=   vspace=   aglin=   title=   alt=   >
       （高；宽；边框；图像水平间距（设置图片与图片或文字的间距）；垂直间距（同水平）；图像相对于文字基准线的对齐方式（下面详解）；图像的提示文字（鼠标放到图片上显示的内容）；图像的替换文字（图片无法显示的时候显出来）)

    aglin=  top  把图像的顶部与同行文字（或图像）的最高部分对齐
      middle  把图像的中部与同行的中部对齐（通常是文本的基线，并不是时间的行中间）
      bottom  把图像的底部与同行文本的底部对齐
      texttop  把图像的顶部和同行中最高的文本的顶部对齐
      absmiddle   把图像的中部和同行中最大项的中部对齐
      baseline 把图像的底部和文本的基线对齐
      absbottom 把图像的底部和同行中的最低项对齐
      left  使图像和左边界(网页的左边界)对齐（文字环绕图像）
      right  使图像的右边界对齐（同上）
插入avi文件  <img src="" dynsrc="avi.文件地址" loop=“循环次数”（数值或-1/infinite（无限次）） start=“播放方式”（fileopen：网页打开时播放；mouseover鼠标放上去播放，不是点击）>

图像超链接  <a href="链接地址" target=“目标窗口的打开方式（同上面出现过的一样）”><img src=></a>
设置图像热区链接 <img src="" usemap="映射图像名称">         （在图像文件设置热区映射图像名称）
    <map name="映射图像名称"><area shape="热区形状" coords=“热区坐标” href="热区地址"></map> （定义热区形状和坐标）
    shape值：rect（矩形区域）;circle(圆形)；poly（多边形）
    coords：（rect包含四个参数：left top right bottom（理解为两个对角的点坐标））    （circle包含三个 circle-x circle-y radius）

创建表格：

表格基本结构  <table width= height= align= border= bordercolor= cellspacing= cellpadding= bgcolor= background=>(table表格标记，tr行标记，td行内格子，caption标题，th表头，)
     <caption>表格标题</caption>      (cellspacing内框宽度，就是单元格之间的宽度，cellpadding文字与边框的间距)
     <tr> <th> </th>
      <td> </td>       （可以单独对th，td，tr设置以上的属性）
      <td>    </td>       （valign=垂直对齐方式（top middle bottom））
     </tr>
     </table>
水平垂直跨度（跨行，列）<td colspan="列数"（rowspan=“行数”）>      （所跨的其他格子不用再写td，第一个各自写了colspan或rowspan即可）
单元格亮边框与暗边框 <td bordercolorlight="颜色代码" bordercolordark=“”>
表格的表首标记    <thead><tr><th></th></tr></thead>      （用于表首第一行，表示它是表首，结构化语言）
表格的表主体标记 <tbody><tr><th></tbody>        （用再第一行后面，包含剩下所有的行，以示表格主体这个结构）
表格的表尾标记  <tfoot></tfoot>         （一般用于注释表格，或者写日期啥的）
表格的嵌套   (直接嵌套即可，嵌套再设置属性，可能会简便省事一些)

层--div标签（主要介绍常用属性，冷门的去查手册把）

div属性 <div align= id="唯一id" class="类"></div> （id:唯一标识，只能有一个（css中：#唯一id{}调用）；class：类型标识，可多个（css中：.类{}调用））

多媒体页面

滚动文字标记marquee <mraquee direction="滚动方向"（up down left right） behavior="滚动方式"（scroll 循环滚动默认；slide滚一次就停；alternate 来回交替滚动）scrollamount="滚动速度"（像素为单位）scrolldelay="滚动延迟"（单位时毫秒）loop="循环次数">
<width="滚动宽度" height="滚动高度" bgcolor="滚动背景颜色" hspace="水平留白空间" vspace="竖直留白空间 ">

添加背景音乐bgsound <bgsound src="背景音乐地址" loop="循环次数">

添加多媒体文件 <embed src="多媒体文件地址" width="播放界面宽度" height="" autostart="true/false(是否自动播放)" loop="true/false(是否循环播放，否则播放一次)"hidden="true/false（是否显示播放页面，可用于隐藏界面，播音乐）" quality="high" pluginspage="插件地址" type="所需插件类型" womde="transparent"(插入背景透明的flash动画)>（可以插入flash，mpeg等类型文件）

(PS:embed用于非IE浏览器，object用于IE，为避免不兼容两个同时用，embed放在object里面)

object标签 (用于添加多媒体对象，如flash，音频，视频等) <object classid="需要下载的插件类型" codebase="下载插件的地址" quality="high(以高质量播放视频)"><param name="filenname" value="音频文件地址" （name="wmode" value="transparent"加入背景透明的flash动画）/></object>

HTML5新增元素：

新增的结构元素
  <section></section> (定义文档或应用程序的一个区段，标示文档结构)
  <article></article> (表示文档中的一块独立的内容，如博客或报纸中的一篇文章)
  <header></header> （表示页面中的一个内容区块或者整个页面的标题）
  <nav></nav>  （表示导航链接的部分）
  <footer></footer> （表示整个页面或页面中一个内容区块的注脚。一般包含作者信息，日期，联系信息啥的）

新增的块级语义元素
  <aside></aside>  （表示article元素的内容之外的与article内容相关的内容）
  <figure><figcaption>figure标题</figcaption>其他内容</figure>  （表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元）
  <dialog>内容</dialog> （定义对话）（常用dt dd定义对象和对话内容）

新增的行内元素
  <mark></mark>  （主要用在视觉上向用户呈现那些需要突出显示或高亮显示的文字）
  <time></time>  （表示时间或日期，可以同时表示两者）
  <progress></progress> （表示正在运行中的进程，可用于显示js中耗时间的函数的进程）
  <meter></meter>  （表示度量，仅用于已知最大值和最小值的度量，必须定义度量范围，可以在元素的文本中和min/max属性中定义）

小王没有BUG

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
目前所学的html知识小总结

注释：<!-- --!>一、<head>里面的应用元素：1.显示在网页标题栏上的文字：<title></title>2.<meta name=" " content=" "> content里面写的是内容keyname 具体关键字description 对...
复制链接

扫一扫