HTML标签总结


一、文字
1.标题文字 <h#>..........</h#> #=1~6;h1为最大字,h6为最小字

2.字体变化 <font>..........</font> 
【1】字体大小 <font size=#>..........</font> #=1~7;数字愈大字也愈大 
【2】指定字型 <font face="字体名称">..........</font> 
【3】文字颜色 <font color=#rrggbb>..........</font>
               rr:表红色(red)色码
               gg:表绿色(green)色码
               bb:表蓝色(blue)色码
               rrggbb也可用6位颜色代码数字

3.显示小字体 <small>..........</small> 

4.显示大字体 <big>..........</big>

5.粗体字 <b>..........</b>

6.斜体字 <i>..........</i> 

7.打字机字体 <tt>..........</tt>

8.底线 <u>..........</u>

9.删除线 <strike>..........</strike>

10.下标字 <sub>..........</sub>

11.上标字 <sup>..........</sup>

12.文字闪烁效果 <blink>..........</blink>

13.换行(也称回车) <br>

14.分段 <p> 

15.文字的对齐方向 <p align="#"> #号可为 left:表向左对齐(预设值) center:表向中对齐 right:表向右对齐 P.S.<p align="#">之后的文字都会以所设的对齐方式显示,直到出现另一个<p align="#">改变其对齐方向,遇到<hr>或<h#>标签时会自动设回预设的向左对齐。

16.分隔线 <hr> 
【1】分隔线的粗细 <hr size=点数> 
【2】分隔线的宽度 <hr size=点数或百分比> 
【3】分隔线对齐方向 <hr align="#"> 
      #号可为 left:表向左对齐(预设值) center:表向中对齐 right:表向右对齐 
【4】分隔线的颜色 <hr color=#rrggbb> 
【5】实心分隔线 <hr noshade>

17.居中对齐 <center>..........</center>

18.依原始样式显示 <pre>..........</pre>

19.<body>指令的属性
【1】背景颜色 -- bgcolor <body bgcolor=#rrggbb> 
【2】背景图案 -- background <body   background="图形文件名"> 
【3】设定背景图案不会卷动 -- bgproperties <body bgproperties=fixed> 
【4】文件内容文字的颜色 -- text <body text=#rrggbb> 
【5】超连结文字颜色 -- link <body link=#rrggbb> 
【6】正被选取的超连结文字颜色 -- vlink <body vlink=#rrggbb> 
【7】已连结过的超连结文字颜色 -- alink <body alink=#rrggbb>

20.文字移动指令<MARQUEE>..........</MARQUEE>
      移动速度指令是:scrollAmount=#     #最小为1,速度为最慢;数字越大移动的越快。
      移动方向指令是:direction=#           up向上、down向下、left向左、right向右。     
      指令举例:<MARQUEE scrollAmount=3 direction=up>..........</MARQUEE>

二、图片
1.插入图片 <img src="图形文件名">

2.设定图框 -- border <img src="图形文件名" border=点数>

3.设定图形大小 -- width、height <img src="图形文件名" width=宽度点数 height=高度点数>

4.设定图形上下左右留空 -- vspace、hspace <img src="图形文件名" vspace=上下留空点数 hspace=左右留空点数>

5.图形附注 <img src="图形文件名" alt="说明文字">

6.预载图片
<img src="高解析度图形文件名" lowsrc="低解析度图形文件名"> P.S.两个图的图形大小最好一致;

7.影像地图(Image Map) <img src="图形文件名" usemap="#图的名称"> <map name="图的名称">
<area shape=形状 coords=区域座标列表 href="连结点之URL">
<area shape=形状 coords=区域座标列表 href="连结点之URL">
<area shape=形状 coords=区域座标列表 href="连结点之URL">
<area shape=形状 coords=区域座标列表 href="连结点之URL"> </map <
【1】定义形状 -- shape
shape=rect:矩形 shape=circle:圆形 shape=poly:多边形 
【2】定义区域 -- coords
a.矩形:必须使用四个数字,前两个数字为左上角座标,后两个数字为右下角座标
例:<area shape=rect coords=100,50,200,75 href="URL"> 
b.圆形:必须使用三个数字,前两个数字为圆心的座标,最后一个数字为半径长度
例:<area shape=circle coords=85,155,30 href="URL">
c.任意图形(多边形):将图形之每一转折点座标依序填入
例:<area shape=poly coords=232,70,285,70,300,90,250,90,200,78 href="URL"

三、表格相关
1.表格标题
<caption>..........</caption> 

表格标题位置 -- align
<caption align="#"> #号可为 top:表标题置于表格上方(预设值)
bottom:表标题置于表格下方

2.定义列 <tr>

3.定义栏位 《1》<td>:靠左对齐
            《2》<th>:靠中对齐ⅱ粗体 
【1】水平位置 -- align <th align="#">
                   #号可为 left:向左对齐   center:向中对齐 right:向右对齐
【2】垂直位置 -- align <th align="#"> #号可为
                 top:向上对齐 middle:向中对齐     bottom:向下对齐 
【3】栏位宽度 -- width      <th width=点数或百分比> 
【4】栏位垂直合并 -- rowspan     <th rowspan=欲合并栏位数> 
【5】栏位横向合并 -- colspan       <th colspan=欲合并栏位数>
四、表格的主要属性 
1. <table>标记的主要属性 
     align定义表格的对齐方式,有三个属性值center,left,right 
     background定义表格的背景图案,属性值为图片的地址 
     bgcolor定义表格的背景颜色,属性值是各种颜色代码 
     border定义表格的边框宽度,属性值是数字 
     bordercolor定义表格边框的颜色,属性值是各种颜色代码 
     cellpadding定义单元格内容与单元格边框之间的距离,属性值是数字 
     cellspacing定义表格中单元格之间的距离 
     height定义表格的高度,属性值是数字 
     width定义表格的宽度,属性值是数字 

2. <tr>标记,表格是由多行与多列组成的,<tr>标记用来定义表格的一行,他的属性极其属性值定义的是表格中的该行,其主要属性与属性值如下: 
     align定义对齐方式,属性值与上同 
     background定义背景图案 bgcolor定义背景色 

3. <td>标记。用<td>标记概况起来的内容表示表格的单元。其主要属性与属性值和<table>标记的一样,补充两个合并列和行的代码: 
     colspan定义合并表格的列数,属性值是数字 
     rowspan定义合并表格的行数,属性值是数字 

五、FRAME
1、分割视窗指令 <frameset>..........</frameset> 
【1】垂直(上下)分割 -- rows
<frameset rows=#> #号可为点数:
     如欲分割为100,200,300三个视窗,则<frameset rows=100,200,300>;
     亦可以*号代表,如<frameset rows=*,500,*>
     百分比:如<frameset rows=30%,70%>,各项总和最好为100%;
【2】水平(左右)分割 -- cols <frameset cols=点数或百分比>

2、指定视窗内容 -- <frame>
<frameset cols=30%,70%> <frame> <frame> </frameset>
【1】指定视窗的文件名称 -- src <frame src=HTML档名> 
【2】定义视窗的名称 -- name
<frame name=视窗名称> 
【3】设定文件与上下边框的距离 -- marginheight
<frame marginheight=点数> 
【4】设定文件与左右边框的距离 -- marginwidth
<frame marginwidth=点数> 
【5】设定分割视窗卷轴 -- scrolling 
<frame scrolling=#> #号可为 yes:固定出现卷轴
           no:不出现卷轴 
           auto:自动判断文件大小需不需要卷轴(预设值)
【6】锁住分割视窗的大小 -- noresize <frame noresize>

转载于:https://www.cnblogs.com/gao-feng/p/7856707.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/415280.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android 取消返回键返回事件,返回桌面,再按一次退出程序,双击事件

mainactivity返回桌面代码&#xff1a; activity下添加如下代码即可: Override public void onBackPressed() {Intent home new Intent(Intent.ACTION_MAIN);home.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);home.addCategory(Intent.CATEGORY_HOME);startActivity(home);} …

js cesium 中弧度、角度转化

参考如下代码&#xff1a; const { heading, pitch, roll } viewer.camera; console.log({ heading, pitch, roll }); // 弧度 const radians Cesium.Math.toRadians(heading) console.log(radians) // 角度 const degrees radians * (180 / Math.PI); console.log(degrees…

一个jdbc connection连接对应一个事务

Spring保证在methodB方法中所有的调用都获得到一个相同的连接。在调用methodB时&#xff0c;没有一个存在的事务&#xff0c;所以获得一个新的连接&#xff0c;开启了一个新的事务。 Spring保证在methodB方法中所有的调用都获得到一个相同的连接。在调用methodB时&#xff0c;没…

工作173:一级控制二级菜单的变化

1第一步 组件封装 利用$emit触发 触发结束 页面进行渲染 <!--封装部门选择的插件 需要的组件 子组件--> <template><el-select :value"value" placeholder"请选择所属部门" change"handleChange"><el-optionv-for&quo…

cesium根据输入高度设置相机camera视角高度

核心代码&#xff1a; camera.setView({destination: Cesium.Cartesian3.fromRadians(viewer.camera.positionCartographic.longitude, viewer.camera.positionCartographic.latitude, n.height),orientation: {heading: Cesium.Math.toRadians(n.heading),pitch: Cesium.Math…

RecyclerView跳转到指定位置,RecyclerView上下滑动监听,RecyclerView滑动速度

1、RecyclerView跳转到指定位置 只需调用recycleview的置顶方法&#xff1a; recyclerView.scrollToPosition(15); 如果你需要让第15item在屏幕居中&#xff0c;只需吧scrollToPosition参数变小即可: 如&#xff1a; recyclerView.scrollToPosition(12);或 recyclerView.…

工作169:vue项目报错[Vue warn]: Property “visible“ must be accessed with “$data.visible“ because properties

vue项目中报错&#xff1a; [Vue warn]: Property "visible" must be accessed with "$data.visible" because properties starting with "$" or "_" are not proxied in the Vue instance to prevent conflicts with Vue internalsS…

Python 开篇及第一个Python程序

本节内容 python 简单介绍python 2.x 或者python 3.xpython 安装第一个python程序一、python简单介绍 python的创始人为吉多.范罗苏姆(Guido van Rossum)。1989年的圣诞节期间&#xff0c;吉多.范罗苏姆为了在阿姆斯特丹打发时间&#xff0c;决心开发一个新的脚本解释程序&…

cesium进行模型高度测量的代码片段

主要参考 https://sandcastle.cesium.com/index.html?srcPicking.html export function monitorMove() {const viewer window.viewer;const scene viewer.scene;const handler new Cesium.ScreenSpaceEventHandler(scene.canvas);let previousPickedEntity undefined;var…

工作171:阅读账号里面的新增调用接口操作

第一步 点击新增操作 第二步 找到当前组件下面的 add的方法 第三步 找到子组件下面的混入方法

recycleview 使用详解,添加头部尾部,混合item,侧滑菜单,跳转到指定位置,实现九宫格布局

添加头部尾部&#xff0c;混合item&#xff1a;https://blog.csdn.net/meixi_android/article/details/82256319 侧滑菜单&#xff1a;https://blog.csdn.net/meixi_android/article/details/82344439 实现九宫格布局&#xff1a;https://blog.csdn.net/meixi_android/articl…

PHP输入流 php://input 相关【转】

为什么xml_rpc服务端读取数据都是通过file_get_contents(‘php://input, ‘r)。而不是从$_POST中读取&#xff0c;正是因为xml_rpc数据规格是xml&#xff0c;它的Content-Type是text/xml。php://input碰到了multipart/form-data在使用xml-rpc的时候&#xff0c;server端获取cli…

js 全屏 退出全屏

直接上代码&#xff1a; 全屏 function fullScreen() {var el document.documentElement;var rfs el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen;if(typeof rfs ! "undefined" && rfs) {rf…

Android java 中的问号与冒号? : 表达式,与%1$表达式

A&#xff1a;布尔表达式(真/假)&#xff0c;B&#xff1a;执行语句 &#xff0c;C &#xff1a;执行语句 最直观的&#xff1a; A &#xff1f; B &#xff1a;C (如果A为真执行B否则执行C) android中的一段代码 1 return mData ! null ? mData.size() : 0; 声明s代表连接…

浏览器跨域访问解决方案

浏览器跨域访问解决方案 2015年11月4日 18972次浏览跨域的概念 跨域大家都知道&#xff0c;不同地址&#xff0c;不同端口&#xff0c;不同级别&#xff0c;不同协议都会构成跨域。例如&#xff1a;about.haorooms.com和www.haorooms.com都会构成跨域。总结起来只要协议、域名、…

oracle 分页

我直接贴代码了&#xff0c;做一个备份 public async zbjhList(request: Hapi.Request, h: Hapi.ResponseToolkit) {const { page, size } request.payload;const min (page - 1) * size;const max page * size;let sql SELECT * FROM (SELECT ROWNUM AS rowno, t.* FROM …

Android 2017-2018面试题详解

面试题&#xff08;固定答案不解答&#xff0c;自己可以找到&#xff09; 顺序是根据记忆排的&#xff0c;没有优先级之分&#xff0c;都是重点。 1.Activity的启动过程&#xff08;不要回答生命周期&#xff09; http://blog.csdn.net/luoshengyang/article/details/6689748…