html常用语法

最新推荐文章于 2024-10-09 10:36:05 发布

十里夜

最新推荐文章于 2024-10-09 10:36:05 发布

阅读量355

点赞数

分类专栏： html5 文章标签： html

本文链接：https://blog.csdn.net/hgyu_962464/article/details/51236703

版权

html5 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Html CSS JavaScript

Html: Hyper Text Markup Language

软件：Dreamweaver

基本格式：

<html>

<head>

文档头部信息

</head>

<body>

文档正文内容

</body>

</html>

设置页面关键字： <meta name=”keywords” content=”输入具体的关键字”>

设置页面说明： <meta name=”description” content=”设置页面说明”>

定义编辑工具：<meta name=”generator” content=”编辑软件的名称”>

设置作者信息：<meta name=”author” content=”作者的姓名”>

设置网页文字及语言：<meta http-equiv=”contentType” content=”text/html;charset=字符集类型”/>

设置网页的定时跳转：<meta http-equiv=”refresh” content=”跳转的时间;URL=跳转的地址”>

网页的主体标记body

网页背景颜色：bgcolor <body bgcolor=”背景颜色”>

网页背景图片：background <body background=”图片的地址”>

文体的颜色：text <body text=”字体的颜色”>

链接文字属性：link <body link=”颜色”>

边距：margin <body topmargin=”上边距的值” leftmargin=”左边距的值”>

网页注释内容标记：

标题字：<h1>..............<h6>

h1>一级标题<h1> <h4>四级标题<h4>

属性值	含义
left	左对齐
center	居中对齐
right	右对齐

标题字对齐属性 align

文体基本标记 font

字体属性：face <font face=”字体样式”>....</font>

字号属性：size <font size=”字体字号”>.....</font>

颜色属性：color <font color=”字体颜色”>.....</font>

文体格式化标记

粗体标记b , strong

<b>加粗的文字</b> <strong > 加粗的文字 </strong>

斜体标记 i , em , cite

上标标记：sup <sup>上标内容</sup>

下标标记：sub <sub>下标内容</sub>

大字号标记：big <big>大字号内容</big>

小字号标记：small <small>小字号内容</small>

下划线标记：u <u>下划线的内容<u>

段落标记

段落标记：p <p>d段落文字<p>

换行标记：br <br/>

不换行标记：nobr <nobr>不换行内容</nobr>

水平线 hr

插入水平线：hr <hr>

水平线宽度：width <hr width=”宽度”>

水平线高度：size <hr size=”高度”>

水平线去掉阴影：noshade <hr noshade>

水平线颜色：color <hr color=”颜色’>

水平线排列：align <hr align=”对齐方式”> （center, left ,right）

插入空格：

插入特殊符号

特殊符号	特殊符号代码
“	"
&	&
>	<
<	>
×	×
§	§
©	©
®	®
™	™

图像的使用（.png .gif .jpeg）

属性	描述
src	图像的源文件地址
alt	提示文字
width heith	宽度高度
border	边框
vspace	垂直间距
hspace	水平间距
align	排列
dynsrc	设定avi文件的播放
loop	设定avi文件循环播放次数
loopdelay	设定avi文件循环播放延迟
start	设定avi文件播放方式
lowsrc	设定低分辨率图片
usemap	映像地图

插入图像的源文件：src <img src=”图像文件的地址” />

图像的提示文字：alt <img src=”图像文件的地址” alt=”提示文字内容”/>

图像的宽度和高度：width height <img src=”图像文件的地址” width=”宽度” height=”高度”/>

图像的边框：border <img src=”图像文件的地址” border=”图像边框的宽度”/>

图像的垂直边距：vspace <img src=”图像文件的地址” vspace=”垂直边距” />

图像的水平边距：hspace <img src=”图像文件的地址” hspace=”水平边距”/>

图像的排列：align <img src=”图像文件的地址” align=”对齐方式”/>

属性	描述
bottom	图像的底部和当前行的文字底部对齐
top	图像的顶端和当前行的文字顶端对齐
middle	图像水平中线和当前行的文字中线对齐
left	图像左对齐
center	图像水平中线和当前行的文字中线对齐
right	图像右对齐

图像的超链接 <a herf=”链接地址”><img src=”图像文件的地址”/> </a>

图像热区链接

</map>

列表的使用

有序列表标记：ol

<ol> <li>有序列表项</li> <li>有序列表项</li> <li>有序列表项</li> <li>有序列表项</li>...... </lo>

有序列表的序号类型：type

<ol type=”序号类型”><li>有序列表项</li> <li>有序列表项</li> <li>有序列表项</li> <li>有序列表项</li>......</lo>

type	列表项目的序号类型
1	数字 1. 2. 3. 4. ...........
a	小写字母a. b. c. ............
A	大写字母A. B. C. ............
i	小写罗马数字 i. ii. iii. iv. ..........
I	大写罗马数字 I. II. III. IV. .............

有序列表的起始数值：start <ol type=”序号类型 start=”起始数值”> .................... </ol>

无序列表标记：ul

<ul> <li>无序列表项</li> <li>无序列表项</li> <li>无序列表项</li> <li>无序列表项</li>...... </ul>

无序列表的类型：type <ul type=”序号类型 > .................... </ul>

数值类型	列表项目的符号
disc	默认值，实心圆
circle	空心圆
square	正方形

目录列表标记：dir

定义列表标记：dl

菜单列表标记：menu

表格的创建

表格的基本构成：table tr td

<table>

<tr> <td>单元格内的文字</td> <td>单元格内的文字</td>. ...... </tr>

...............

<table>

设置表格的标题：caption <caption>表格的标题</caption>

表头：th <table> <th>表头内容</th> <th>表头内容</th> .........</table>

表格的宽度：width <table width=”表格宽度”>

表格的高度：height <table height=”表格高度”>

表格对齐方式：align <table align=”对齐方式”>

表格边框宽度：border <table border=”边框宽度”>

表格边框颜色：bordercolor <table border=”边框宽度” bordercolor=”边框颜色”>

内框宽度：cellspacing <table cellspacing=”内框宽度值 ”>

表格内文字与边框间距：cellpadding <table cellpadding=”文字与边框距离值”>

表格背景颜色：bgcolor <table bgcolor=”背景颜色”>

表格背景图像：background <table backgroud=”背景图像地址”>

表格的行属性

高度控制：height <tr height=”行的高度”>

边框颜色：bordercolor <tr bordercolor=”边框的颜色”>

行的背景：bgcolor,background <tr bgcolor=”行的背景颜色”>

行文字的水平对齐方式：align <tr align=”水平对齐方式”>

行文字的垂直对齐方式：valign <tr valign=”垂直对齐方式’>

单元格属性

单元格的大小：width,height <td width=”单元格宽度” height=”单元格高度”>

水平跨度：colspan <td colspan=”跨度的列数”>

垂直跨度:rowspan <td rowspan=”跨度的行数”>

对齐方式：align,valign <td align=”水平对齐方式” valign=”垂直对齐方式”>

单元格的背景颜色：bgcolor <td bgcolor=”背景颜色”>

单元格的边框颜色：bordercolor <td bordercolor=”边框颜色”>

单元格的亮边框颜色：bordercolorlight <td bordercolorlight=”亮边框颜色”>

单元格的暗边框颜色：bordercolordark <td bordercolordark=”暗边框颜色”>

单元格背景图像：background <td background=”背景图像的地址”>

表格的结构

表格的表首标记：thead <thead bgcolor=”背景颜色” align=”对齐方式”> ......................</thead>

表格的表主体标记：tbody <tbody bgcolor=”背景颜色” align=”对齐方式”>.......................</tbody>

表格的表尾标记：tfoot <tfoot bgcolor=”背景颜色” align=”对齐方式”>........................</tfoot>

超链接的创建

相对路径绝对路径

内部链接

内部链接 <a href=”链接地址”> .................. </a>

链接的目标窗口 <a href=”链接地址” target=”目标窗口的打开方式”>

属性值	含义
_self	在当前页面打开链接（默认）
_blank	在一个全新的空白窗口打开链接
_top	在顶部框架中打开链接，即在根框架中打开链接
_parent	在当前框架的上一层里打开链接

锚点链接

建立锚点 <a name=”锚点的名称”> </a>

链接同一页面的锚点 <a href=”#锚点的名称”> ............ </a>

链接到其他的页面中的锚点 <a href=”链接的文件地址 # 锚点的名称”> ............. </a>

外部链接

链接到外部网站 <a href=”http://...............”> .............. </a>

链接到E-mail <a href=”maitlo:邮件地址”> ............... </a>

链接到FTP <a href=”ftp://ftp 地址”> ................ </a>

链接到Telnet <a href=”telnet://地址”> ............... </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-urlencoded	默认的编码形式（所有网页的表单使用的可接受类型）
multipart/form-data	MIME编码，上传文件的表单必须选择该项

目标显示方式：target <form target=”目标窗口的打开方法”>.....</form>

插入表单对象

文字字段：text

参数类型	含义
type	用来指定插入那种表单元素，如type=”text”,即为文字字段
name	文字字段的名称，用于和页面中其他控件加以区别。名称由英文或数字以及下划线组成，但没有大小写区分
value	用来定义文本框的默认值
size	确定文本框在页面中显示的长度，以字符为单位
maxlength	用来设置文本框中最多可以输入的字符数