html5常用标记总结_随笔

一、文本标签

1.1 标题标记：<hn align=”对齐方式”>标题文本</hn>

注意：

1.标题准备了<h1>----<h6>的标题，按照字号依次递减(块级元素)

2.align表示对齐方式，其值为left,center,right

1.2 字体标记：<font face=”字体名称” size=”字号” color=”字体颜色” >文字</font>

注意：中文网页以黑体，宋体，3号字的效果显示

1.3 段落标记：<p align=”对齐方式” >段落内容</p>

注意：<p>可以作为单标记或双标记：

单标记：段落与上文产生一个空行的间距。

双标记：段落与上下文之间产生一个空行的间距

1.4 换行标记：

注意：<br />表示换行，多次换行多次使用<br />

1.5 预格式化标记：<pre>.....</pre>

注意：预格式化标记可将空格、制表符、回车符等忽略

1.6 转义字符：转义字符让特殊字符显示出来。

语法：&实体名称

二、列表标记

2.1 无序列表

......

</ul>

注意： type表示了项目符号：

disc(默认) 实心圆

circle：空心圆

square：实心方块

2.2 有序列表：

......

</ol>

注意：1. 1:1,2,3,.......

a:a,b,c,d,e.......

A:A,B,C,D,E.......

i:i,ii,iii,iv......

I:I,II,III,IV......

2.start表示起始值,从第几个数开始计算

2.3 嵌套排列

</ul>

</ol>

2.4 分割线标记：<hr align=”对齐方式” size=”水平线高度” width=”水平线宽度”

color=”水平线颜色”>

三、超链接标记

3.1 文本链接：<a href=”目标URL” target=”目标窗口”>指针文本</a>

注意： 1.href表示文本链接的目标资源的URL

绝对地址和相对地址

绝对地址：在任何情况下都可以找到的地址（例如：网址）

相对地址：必须知道当前所在，才能找到（../表示上一级目录，/表示下级目录）例子：../img/baidu.jpg表示在当前位置的上一层目录下的img文件夹中的baidu.jpg 文件。

3.2 图片标记：<img src=”图片文件路径” alt=”提示文本” height=”图片高度” width=”图片宽度”/>

3.3 多媒体标记

3.3.1 滚动字幕标记：marquee可以实现文字或图片的跑马灯效果

marquee的属性：

behavior 指定了跑马灯的效果：scroll(滚动)、slide(滑动)、alternate(交替)

bgcolor:跑马灯的背景颜色

direction:跑马灯的移动方向，left（左）、right(右)、up(上)、down(下)

scrolldelay:每次移动的延迟时间，单位毫秒

loop:跑马灯运行次数，-1表示无限循环

height、width

hspace:左右空白宽度

vspace:上下空白宽度

3.3.2 嵌入音乐文件

3.3.3 嵌入视频文件

四、表格

4.1 表格基本语法：

<table>

<tr>

......

<td>单元格内容</td>

......

</tr>

</table>

注意：

<table>:声明一个表格对象

<tr>:声明一行

<td>:声明一个单元格

4.2 表格的基本属性

1.align 对齐方式：left、center、right

2.border:表格边框

3.bordercolor:边框颜色

4.bgcolor:表格背景颜色

5.background:背景图片

6.height、width

4.3 单元格合并

1.rowspan:所跨的行数

2.colspan:所跨的列数

五、表单

5.1 表单标签：<form action=”URL” method=”get|post” target=”...”></form>

注意：<form>：该标记中包含的数据将被提交到服务器或者电子邮件中

action:指定服务器端处理提交表单信息的程序是什么。URL地址或电子邮件地址

method:get/post:数据传输到服务器的传递方法

target:服务器返回文档结果的显示位置：_blank:在新的浏览器窗口中打开

_self:在当前浏览器中显示

5.2 表单标记

5.2.1 input标签：<input type=”类型” name=”服务器获取用户输入信息的名字” value=”初始值”>

注意：1.type类型（输入类型）:

1. text:单行文本框

2. password:密码输入框

3. radio:单选按钮 checked表示默认

4. checkbox:复选框 checked表示默认

5. submit:提交按钮

6. reset:重置按钮

7. button:普通按钮

2.maxlength：输入的最大长度

5.2.2 select标签

<option value=”选项1” > 选项1

.......

<option value=”选项n” > 选项n

</select>

注意：name:服务器获取用户输入信息的名字

value ：初始值

option：下拉框的内容

multiple:多选，若没有multiple则是单选

selected:表示默认选项

size:表示长度

5.2.3 textarea 标签：<textarea name=”...” cols=”...” rows=”...” wrap=”off/virtual/physical”>

</textarea>

注意: name：多行文本框的名称

cols：一行可容纳的字符数

rows：表示可显示额的行数

wrap:virtual和phycal控制自动换行

SVG 即 Scalable Vector Graphics，是一种用来绘制矢量图的 HTML5 标签。你只需定义好XML属性，就能获得一致的图像元素。

使用SVG之前先将标签加入到HTML body中。就像其他的HTML标签一样，可以为SVG标签为之添加ID属性。也可以为之添加css样式，例如“border-style:solidborder-width:2px”。SVG标签跟其它的HTML标签有通用的属性。将SVG元素加入到HTML代码中，SVG提供很多绘图形状，例如线条、圆、多边形等。

SVG线条：

SVG线条用标签定义，在此标签内你还可以定义其他的属性。

该标签包括像起点坐标(x1,y1)和终点坐标(x2,y2)这样的属性。指定x1,y1,x2,y2值来设定起点终点坐标。在指定好坐标后，可以为之添加一些样式，在style属性中使用“stroke:Green”为线条指定颜色。同样也可以用stroke-width:2为线条设置宽度。

代码1：使用SVG画线

<!DOCTYPE html>

<head>

<title>Mrbool.com - HTML5 Tutorials</title>

</head>

<body>

<h2>HTML5 SVG Line Example</h2>

</svg>

</body>

</html>

SVG画圆：

SVG提供了一种不同的标签来画圆。正如你看到的下面代码，circle有个id为myCircle。为了定义圆的中心以及半径，使用cx="55" cy="55"以及r="50"属性分别定义。使用fill="#219E3E"为圆填充颜色。同样你可以用stroke="#17301D" stroke-width="2"定义圆周线条颜色和宽度。

代码2:使用SVG画圆

<!DOCTYPE html>

<head>

<title>Mrbool.com - HTML5 Tutorials</title>

</head>

<body>

<h2>HTML5 SVG Circle Example</h2>

</svg>

</body>

</html>

SVG矩形:

同样的使用标签来画矩形，我们同样设置了 id 属性 “myRectangle” ,用 width="300" height="100" 定义高宽，使用 fills 属性定义填充颜色。用 strock 定义边框。还有一点需要注意，我用 fill-opacity="0.5" stroke-opacity="0.5" 为 stroke 和 filling 都添加了透明度。

代码3:SVG画矩形

<!DOCTYPE html>

<head>

<title>Mrbool.com - HTML5 Tutorials</title>

</head>

<body>

<h2>HTML5 SVG Rectangle Example</h2>

</svg>

</body>

</html>

SVG椭圆：

同样是用标签来绘制椭圆。设置其 id="myEllipse" ，给定起中心坐标 cx="120"cy="60"，长轴短轴半径 rx="100" ry="50",并用设置填充颜色、边框宽度以及边框颜色style="fill:#3F5208stroke:blackstroke-width:3"。

代码4:SVG画椭圆

<!DOCTYPE html>

<head>

<title>Mrbool.com - HTML5 Tutorials</title>

</head>

<body>

<h2>HTML5 SVG Ellipse Example</h2>

</svg>

</body>

</html>

SVG多边形：

使用特定标签绘制多边形,points属性用来定义多边形的几个顶点，用左边对来定义，形如 points="10,10 75,150 150,60" ，这里定义了三个顶点(10,10),(75,150),(150,60)。同上面一样，用 style="fill:#63BCF7stroke:blackstroke-width:3" 定义多边形填充颜色、边框以及边框宽度。

代码5：SVG画多边形

<!DOCTYPE html>

<head>

<title>Mrbool.com - HTML5 Tutorials</title>

</head>

<body>

<h2>HTML5 SVG Polygon Example</h2>

</svg>

</body>

</html>

li:{list-style-type:circle}

也可以用image代替type位置，链接你喜欢的图片

circle:是空心圆点。square：方形

disc：默认实心圆。

不知道你说的是不是这个意思

欢迎分享，转载请注明来源：内存溢出

原文地址:https://54852.com/zaji/7292185.html

html5常用标记总结

发表评论

评论列表（0条）