html常用总结

最新推荐文章于 2023-03-14 15:50:30 发布
最新推荐文章于 2023-03-14 15:50:30 发布
阅读量1.7k 收藏
点赞数
分类专栏： html&css&js 文章标签： html 浏览器 border generator 文档 框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hsttmht/article/details/7000276
版权

Html索引

Head中常用的标签 2

Body体上的标签 2

Body体里面的标签 3

1. 锚点标签 3

2. 分割线 3

3. 标题字体 3

4. 字体设置 3

5. 设置文字显示 3

6. 特殊字符 4

7. 文字布局 4

8. 对齐方式 5

9.图片插入  运行截图如上面 5

Body体里面的标签——表格 5

1. 表格——<table><tr><th><td> 5

2. table的属性 6

3. 表格分列——水平分列和竖直分列 6

Body体里面的标签——表单 7

1. 表单标签——get、post 7

2.表单控件——<input type=“text/password/checkbox/file....”> 7

3.表单按钮——<input ttpye=“submit/image/reset/button....”value="提交"> 7

Body体里面的标签——框架标记 12

Head中常用的标签

根据 HTML 标准，仅有几个标签在 HTML 的头部分是合法的。它们是：<base>, <link>, <meta>, <title>, <style> 和 <script>。

<head>

<base href="http://www.w3school.com.cn/i/" />

<base target="_blank" />  ----<base> 标签为页面上的所有链接规定默认地址或默认目标。

<title>XHTML Tag Reference</title>

<meta http-equiv=“content-type” content=“text/html;charset=gb2312”>

<meta http-equiv=“refresh” content=“3;url=http://www.foo.com”>

<meta name="keywords" content="your keywords">

<meta name="description" content="your description">

<meta http-equiv="expires" content="0">
<meta http-equiv="pragma" content="no-cache">

<meta name="generator | author | copyright" content="…..">  

</head>

Body体上的标签

<body  bgcolor=“#”-背景色  background="img_url"  --背景图片>

</body>

Body体里面的标签

1.锚点标签

链接式：<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

        上面这行代码显示为：Visit W3School 

        使用 Target 属性，你可以定义被链接的文档在何处显示。

创建指向相同文档中“有用的提示”部分的链接：

<a href="#tips">Visit the Useful Tips Section</a>

锚点式：<a name="tips">Useful Tips Section</a>

        name 属性用于创建 HTML 内部的书签。

2.分割线

<hr size=“pixels” align=“align” width=“pixels” color=“#” noshade>

Size 高度

Align 对齐方式，可以取left或right

Noshade 无阴影效果

      颜色

Eg. <hr noshade color=“#ff00ff” width=“600” size=“8” align=“left”>

3.标题字体

<h#>This is a heading</h#>

按标题级别用黑体字显示标题内容

4.字体设置

<font size="2" face="Verdana" color="red">This is a paragraph.</font>

  字体，大小，颜色

5.设置文字显示

<font color="red" size="5"><b>红色的字哦，大小是5</b></font>

<br>

<font color="#0000ff" size=2"><i>蓝色的字哦，大小是2</i></font>

<br>

<font size=6>

<b>黑体</b>

<br>

<i>斜体</i>

<br>

<u>下划线</u>

<br>

<s>中划线</s>

<br>

<blink>闪烁</blink>

<br>

数组下标<sub>5</sub>

<br>

次方<sup>3</sup>

</font>

6.特殊字符

   空格            ®   注册商标       

7.文字布局

<html>

<head><title>文字布局</title></head>

<body>

<p>话说乾隆年间，有个小朋友...</p>

<p>话说乾隆年间，有个小朋友...</p>

<div>这个小朋友的名字叫做辽阔草原</div>

<ul>

<li>来历一：他爸爸起的

<li type="circle">来历二：瞎编的

<li type="square">来历三：呵呵，为什么要告诉你

</ul>

<ol>

<li>来历一：他爸爸起的

<li>来历二：瞎编的

<li>来历三：呵呵，为什么要告诉你

</ol>

我换行！我自动换行！我换行！我自动换行！

<br>

<br>

<br>

<nobr>我就不换行！就不换行！</nobr>

<pre>

我很厉害的，我是马洪涛

    嘿嘿

啦啦

</pre>

</body>

</html>

8.对齐方式

<h1 align="center">中间中间</h1>

<div align="center">div中间，如果加上表格就看得更清楚喽</div>

<center>***中间***</center>

9.图片插入  运行截图如上面

滔滔<img src="images/01.jpg" alt="有01,我是不会显示出来的" width=200 border="3" valign=bottom>

<img src="images/01.jpg" alt="有01,我是不会显示出来的" width=200 border="5" valign=bottom>345234

<br>

<img src="images/5656.jpg" alt="哪里有这张图片嘛！" border="8">

Body体里面的标签——表格

1.表格——<table><tr><th><td>

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<table border="1">

<tr>

<td>row 1, cell 1</td>

<td>row 1, cell 2</td>

</tr>

<tr>

<td>row 2, cell 1</td>

<td>row 2, cell 2</td>

</tr>

</table>

在浏览器显示如下：

row 1, cell 1

row 1, cell 2

row 2, cell 1

row 2, cell 2

2.table的属性

   bgcolor，border，bordercolorlight，bordercolordark，cellspacing，cellpadding，width，height。

3.表格分列——水平分列和竖直分列

   <td rowspan=“” colspan=“” bgcolor=“”>…</td> （跨行跨列）

<body>

<table width="768" align="center" border="2">

<tr>

<td width="30%" align="center">编号</td>

<td width="30%" align="center">名称</td>

<td align="center">性格</td>

</tr>

<tr>

<td valign="top" height="50">1</td>

<td valign="middle">小猫咪</td>

<td valign="bottom">温顺</td>

</tr>

<tr>

<td rowspan="2" colspan="2">

<font size="5" color="red">我是狮子！</font>

</td>

<td>暴躁</td>

</tr>

<tr>

<td>十分暴躁！</td>

</tr>

<tr>

<td>3</td>

<td>蛇</td>

<td>冷酷</td>

</tr>

</table>

</body>

Body体里面的标签——表单

1.表单标签——get、post

2.表单控件——<input type=“text/password/checkbox/file....”>

3.表单按钮——<input ttpye=“submit/image/reset/button....”value="提交">

输入

多数情况下被用到的表单标签是输入标签（<input>）。输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：

文本域（Text Fields）

当用户要在表单中键入字母、数字等内容时，就会用到文本域。

<form>

First name: 

<input type="text" name="firstname" />

<br />

Last name: 

<input type="text" name="lastname" />

</form>

浏览器显示如下：

窗体顶端

First name: 
Last name: 

窗体底端

注意，表单本身并不可见。同时，在大多数浏览器中，文本域的缺省宽度是20个字符。

单选按钮（Radio Buttons）

当用户从若干给定的的选择中选取其一时，就会用到单选框。

<form>

<input type="radio" name="sex" value="male" /> Male

<br />

<input type="radio" name="sex" value="female" /> Female

</form>

浏览器显示如下：

窗体顶端

Male
Female

窗体底端

注意，只能从中选取其一。

复选框（Checkboxes）

当用户需要从若干给定的选择中选取一个或若干选项时，就会用到复选框。

<form>

<input type="checkbox" name="bike" />

I have a bike

<br />

<input type="checkbox" name="car" />

I have a car

</form>

浏览器显示如下：

窗体顶端

I have a bike
I have a car

窗体底端

表单的动作属性（Action）和确认按钮

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

<form name="input" action="html_form_action.asp" method="get">

Username: 

<input type="text" name="user" />

<input type="submit" value="Submit" />

</form>

浏览器显示如下：

窗体顶端

Username: 

窗体底端

假如您在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 "html_form_action.asp" 的页面。该页面将显示出输入的结果。

表单例题！

<html>

<head><title>表单</title>

<meta http-equiv="content-type" content="text/html;charset=gb2312">

</head>

<body>

<form action="02.html" method="post">

         <font face="Georgia, Times New Roman, Times, serif" size="6"><center>用户注册</center></font>

<table width="750" align="center" border="2" bgcolor="#FFFF00">

<tr>

<td>用户名：</td>

<td>

<input type=text name="username"  size="30" maxlength="10">

</td>

</tr>

<tr>

<td>密    码：</td>

<td>

<input type=password name="pwd" size="15" maxlength="12">

</td>

</tr>

<tr>

<td>密码确认:</td>

<td>

<input type=password name="pwd2" size="15" maxlength="12">

</td>

</tr>

<tr>

<td>性    别：</td>

<td>

<input type=radio name="gender" value="male" checked>男

<input type=radio name="gender" value="female">女

</td>

</tr>

<tr>

<td>爱    好：</td>

<td>

<input type="checkbox" name="interest" value="vc" checked>VC

<input type="checkbox" name="interest" value="vb" checked>VB

<input type="checkbox" name="interest" value="vfoxpro">VF

<input type="checkbox" name="interest" value="vjava">VJ

<br>

<input type="checkbox" name="interest" value="bc">BC

<input type="checkbox" name="interest" value="cobol">CO

<input type="checkbox" name="interest" value="java">JA

<input type="checkbox" name="interest" value="delphi">Delphi

</td>

</tr>

<input type="hidden" name="interest" value="jsp">

<tr>

<td>您的学历：</td>

<td>

<select name="province">

<option value=0>--请选择--</option>

<option value=01>小学</option>

<option value=02>初中</option>

<option value=03>高中</option>

<option value=04>本科</option>

<option value=05>硕士</option>

<option value=06>博士</option>

</select>

</td>

</tr>

<tr>

<td>您的简历</td>

<td>

<textarea rows="12" cols="80" name="intro" wrap="hard">请输入您的简历：</textarea>

</td>

</tr>

                

                <tr>

<td>上传附件：</td>

<td>

<input id="File" name="UpLoadFile" type="file" /> 

</td>

</tr>

<tr>

<td colspan="2">

                    <center>

<input type="submit" value="提交">

<input type="reset" value="重置">

                        <br>

<input type="button" value="ok">

                        <input type="image" src="1.png" width=30>

                    </center>

</td>

</tr>

</table>

</form>

<center>滔滔制作！</center>

</body>

</html>

 

Body体里面的标签——框架标记

<frameset rows=“row1,row2…” cols=“col1,col2…”>
   <frame name=“” src=“” noresize>
   <frame name=“” src=“” scrolling=“”>
   ……
</frameset>

    <frameset rows="20%,*">

        <frame name="top" src="Untitled-1.html" noresize>

        <frameset cols="20%,*">

            <frame name="left" src="Untitled-2.html" noresize>

            <frame name="right" src="1.html">

        </frameset>

</frameset>

学bu会喵de猫
关注
专栏目录
HTML常用的标签总结
weixin_44950875的博客
11-12 1759
前端HTML基础常用标签的整理
前端HTML5常用知识点总结
04-03
#html#初学者#总结#常用知识点
在html中将多个div进行多行多列分布时
最新发布
qq_69413049的博客
03-14 2324
通过改变各部分的宽高来设置div在盒子中的分布
HTML 表格
weixin_57766805的博客
02-15 390
HTML 表格 表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 HTML 表格的基本结构 Table : 定义表格 Th : 定义表格的标题栏 Tr : 定义表格的行 Td : 定义表格的列 H...
html表格设计（分列，设置边框）
weixin_44074105的博客
04-14 6387
先放一段代码，展示效果，再详细解释。 <html> <body> <table border = "1px" cellspacing = "0px" width = "800px"> <tr> <th colspan="2">姓名</th> <td colspan="3" style="background-color:#f5f5f0;">Rhett Butler<
html5内容分列,Html5+CSS3基础知识汇总-CSS3篇
weixin_42506994的博客
06-05 306
CSS选择器：使用CSS对html页面中的元素实现一对一，一对多或者多对一的控制：1.属性选择器在CSS3中追加了三个选择器:[att*=val];[att^=val];[att$=val]–>att表示为属性，val表示为属性的属性值。[att*=val]:如果元素用att表示的属性的值中包含val指定的字符，那么该元素使用这个样式。[att$=val]:如果元素用att表示的属性的属性值...
HTML常用标签总结
03-09
经过一段时间的学习，对于HTML也有了基础的认识。所以我就一点点的总结一下各类常用的标签的用法。
HTML编码方法总结，常用
03-16
自己总结的小经验，很基础，将一些专业素养的，英文解释也放进去了。可以参考。平时忘了什么就瞅瞅，大佬们可以查阅一下。平时下载可以用来复习或者挑选。
html中常用的转义字符总结
12-13
html中常用的转义字符总结，具体内容如下所示：  　不断行的空格  　半方大的空格  　全方大的空格 <　小于 < >　大于 > &　&符号 "　双引号" ©　版权符号:copyright: ®...
html表格自动分列,CSS3 Columns分列式布局方法简介
weixin_42165018的博客
05-31 1014
幸运的是，CSS3里提供了一批新的创建列式布局的column属性，有了这些属性，我们不需要再使用float,clear,margin等属性进行调控，避免了很多麻烦。CSS代码CSS3里的column系列属性提供了各种不同的功能，通过组合使用它们，你能得到相应的任何分栏式布局：1.column-count: 列数目2.column-gap: 各列之间间隙宽度3.column-width: 建议宽度；...
html分列代码,实现分列的两段excel vba 分列代码
weixin_29266679的博客
06-20 500
excel vba 分列多用于一般常规的分列操作完成不了的情况。Excel内置的分列，仅用于有规律的数据进行分列。比如下面的截图，这样的数据源，分列就可以考虑使用excel vba 分列完成。A列数据源，要将汉字和数字分列后的效果如B:D列。下面是两段excel vba 分列的代码，案例和答案来自论坛版主。第一段excel vba 分列的代码：Sub vba分列()Dim oJs As Objec...
html td设置在最右侧,html – 拆分td在两个
weixin_31236935的博客
06-03 782
我试图拆分一个TD(表格单元格)看起来好像是两个单元格.问题是当细胞在高度上生长时,我不能使两个div在里面占据所有可用的高度.由于这些单元格可以动态生长,因此无法设置固定高度(可以解决问题).这是我的代码：JS Binarticle,aside,figure,footer,header,hgroup,menu,nav,section { display: block; }td { border:...
网页中<li>分列显示
yaodaos的专栏
07-18 1594
.my ul { width: 410px; } .my li { width: 200px; /*如果显示三列 则width改为70px*/ float: left; display: block; } 金鳞岂是池中物 一遇风云便化龙 九霄龙吟惊天变 风云际会潜水游 那些花儿 那些花儿 如果显示的文字多而换行显示了，就调节宽度
html页面布局5列,html页面中表单怎么用div分列布局
weixin_31099497的博客
06-03 744
HTML 表单用于搜集不同类型的用户输入。 实例 文本域 (Text field) 本例演示如何在 HTML 页面创建文本域。用户可以在文本域中写入文本。 密码域 本例演示如何创建 HTML 的密码域。 (可以在本页底端找到更多实例。分享一个HTML5 表单的写法例子HTML表单提交到.HTML实例form action="1.html" method="get" 在另一个html里如何接收呢? ...
html表格自动分列,html页面中表单怎么用div分列布局
weixin_35944230的博客
05-31 1214
html页面中表单怎么用div分列布局主要分两个步骤操作：第一种情况，float浮动相同让两个div盒子的float值相同，比如都设置float:left或float:right，宽度设置合适即可。这里我们通过案例实现一行两列DIV布局。1、完整实例DIV+CSS代码：html>两个DIV并排.div-a{float:left;width:49%;border:1pxsolid#F00...
CSS3----Columns:比table更好用的分列式布局方法
热门推荐
Damys
05-04 1万+
CSS3里的column系列属性提供了各种不同的功能，通过组合使用它们，你能得到相应的任何分栏式布局： column-count: 列数目 column-gap: 各列之间间隙宽度 column-width: 建议宽度；未必会使用，浏览器基于此数值进行计算 column-rule-width：列之间分割线宽度 column-rule-style：列之间分割线风格 column-rule-color
HTML常用标签总结及用法实例
<!...定义了网页的主要内容部分，俗称身体。 在HTML中，各种标签有各自的用途，下面将逐一总结常用...希望通过对HTML常用标签的总结和学习，能够帮助大家更好地理解和应用HTML标签，为日后的网页开发工作打下坚实的基础。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值