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.表单控件——<inputtype=“text/password/checkbox/file....”>
7
3.表单按钮——<inputttpye=“submit/image/reset/button....”value="提交">
7
Body体里面的标签——框架标记 12
Head中常用的标签
根据HTML标准,仅有几个标签在HTML的头部分是合法的。它们是:<base>,<link>,<meta>,<title>,<style>和<script>。
<head>
<basehref="http://www.w3school.com.cn/i/"/>
<basetarget="_blank"/>----<base>标签为页面上的所有链接规定默认地址或默认目标。
<title>XHTMLTagReference</title>
<metahttp-equiv=“content-type”content=“text/html;charset=gb2312”>
<metahttp-equiv=“refresh”content=“3;url=http://www.foo.com”>
<metaname="keywords"content="yourkeywords">
<metaname="description"content="yourdescription">
<metahttp-equiv="expires"content="0">
<metahttp-equiv="pragma"content="no-cache">
<metaname="generator|author|copyright"content="…..">
</head>
|
Body体上的标签
<bodybgcolor=“#”-背景色background="img_url"--背景图片>
</body>
|
Body体里面的标签
1.锚点标签
链接式:<ahref="http://www.w3school.com.cn/"target="_blank">VisitW3School!</a>
上面这行代码显示为:VisitW3School
使用Target属性,你可以定义被链接的文档在何处显示。
创建指向相同文档中“有用的提示”部分的链接:
<ahref="#tips">VisittheUsefulTipsSection</a>
|
锚点式:<aname="tips">UsefulTipsSection</a>
name属性用于创建HTML内部的书签。
|
2.分割线
<hrsize=“pixels”align=“align”width=“pixels”color=“#”noshade>
Size高度
Align对齐方式,可以取left或right
Noshade无阴影效果
颜色
Eg.<hrnoshadecolor=“#ff00ff”width=“600”size=“8”align=“left”>
|
3.标题字体
<h#>Thisisaheading</h#>
按标题级别用黑体字显示标题内容
|
4.字体设置
<fontsize="2"face="Verdana"color="red">Thisisaparagraph.</font>
字体,大小,颜色
|
5.设置文字显示
<fontcolor="red"size="5"><b>红色的字哦,大小是5</b></font>
<br>
<fontcolor="#0000ff"size=2"><i>蓝色的字哦,大小是2</i></font>
<br>
<fontsize=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>来历一:他爸爸起的
<litype="circle">来历二:瞎编的
<litype="square">来历三:呵呵,为什么要告诉你
</ul>
<ol>
<li>来历一:他爸爸起的
<li>来历二:瞎编的
<li>来历三:呵呵,为什么要告诉你
</ol>
我换行!我自动换行!我换行!我自动换行!
<br>
<br>
<br>
<nobr>我就不换行!就不换行!</nobr>
<pre>
我很厉害的,我是马洪涛
嘿嘿
啦啦
</pre>
</body>
</html>
|
8.对齐方式
<h1align="center">中间中间</h1>
<divalign="center">div中间,如果加上表格就看得更清楚喽</div>
<center>***中间***</center>
|
9.图片插入运行截图如上面
滔滔<imgsrc="images/01.jpg"alt="有01,我是不会显示出来的"width=200border="3"valign=bottom>
<imgsrc="images/01.jpg"alt="有01,我是不会显示出来的"width=200border="5"valign=bottom>345234
<br>
<imgsrc="images/5656.jpg"alt="哪里有这张图片嘛!"border="8">
|
Body体里面的标签——表格
1.表格——<table><tr><th><td>
表格由<table>标签来定义。每个表格均有若干行(由<tr>标签定义),每行被分割为若干单元格(由<td>标签定义)。字母td指表格数据(tabledata),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
<tableborder="1">
<tr>
<td>row1,cell1</td>
<td>row1,cell2</td>
</tr>
<tr>
<td>row2,cell1</td>
<td>row2,cell2</td>
</tr>
</table>
在浏览器显示如下:
row1,cell1
|
row1,cell2
|
row2,cell1
|
row2,cell2
|
|
2.table的属性
bgcolor,border,bordercolorlight,bordercolordark,cellspacing,cellpadding,width,height。
3.表格分列——水平分列和竖直分列
<tdrowspan=“”colspan=“”bgcolor=“”>…</td>(跨行跨列)
<body>
<tablewidth="768"align="center"border="2">
<tr>
<tdwidth="30%"align="center">编号</td>
<tdwidth="30%"align="center">名称</td>
<tdalign="center">性格</td>
</tr>
<tr>
<tdvalign="top"height="50">1</td>
<tdvalign="middle">小猫咪</td>
<tdvalign="bottom">温顺</td>
</tr>
<tr>
<tdrowspan="2"colspan="2">
<fontsize="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.表单控件——<inputtype=“text/password/checkbox/file....”>
3.表单按钮——<inputttpye=“submit/image/reset/button....”value="提交">
输入
多数情况下被用到的表单标签是输入标签(<input>)。输入类型是由类型属性(type)定义的。大多数经常被用到的输入类型如下:
文本域(TextFields)
当用户要在表单中键入字母、数字等内容时,就会用到文本域。
<form>
Firstname:
<inputtype="text"name="firstname"/>
<br/>
Lastname:
<inputtype="text"name="lastname"/>
</form>
浏览器显示如下:
窗体顶端
Firstname:
Lastname:
窗体底端
注意,表单本身并不可见。同时,在大多数浏览器中,文本域的缺省宽度是20个字符。
单选按钮(RadioButtons)
当用户从若干给定的的选择中选取其一时,就会用到单选框。
<form>
<inputtype="radio"name="sex"value="male"/>Male
<br/>
<inputtype="radio"name="sex"value="female"/>Female
</form>
浏览器显示如下:
窗体顶端
Male
Female
窗体底端
注意,只能从中选取其一。
复选框(Checkboxes)
当用户需要从若干给定的选择中选取一个或若干选项时,就会用到复选框。
<form>
<inputtype="checkbox"name="bike"/>
Ihaveabike
<br/>
<inputtype="checkbox"name="car"/>
Ihaveacar
</form>
浏览器显示如下:
窗体顶端
Ihaveabike
Ihaveacar
窗体底端
表单的动作属性(Action)和确认按钮
当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。
<formname="input"action="html_form_action.asp"method="get">
Username:
<inputtype="text"name="user"/>
<inputtype="submit"value="Submit"/>
</form>
浏览器显示如下:
窗体顶端
Username:
窗体底端
假如您在上面的文本框内键入几个字母,然后点击确认按钮,那么输入数据会传送到"html_form_action.asp"的页面。该页面将显示出输入的结果。
表单例题!
<html>
<head><title>表单</title>
<metahttp-equiv="content-type"content="text/html;charset=gb2312">
</head>
<body>
<formaction="02.html"method="post">
<fontface="Georgia,TimesNewRoman,Times,serif"size="6"><center>用户注册</center></font>
<tablewidth="750"align="center"border="2"bgcolor="#FFFF00">
<tr>
<td>用户名:</td>
<td>
<inputtype=textname="username"size="30"maxlength="10">
</td>
</tr>
<tr>
<td>密码:</td>
<td>
<inputtype=passwordname="pwd"size="15"maxlength="12">
</td>
</tr>
<tr>
<td>密码确认:</td>
<td>
<inputtype=passwordname="pwd2"size="15"maxlength="12">
</td>
</tr>
<tr>
<td>性别:</td>
<td>
<inputtype=radioname="gender"value="male"checked>男
<inputtype=radioname="gender"value="female">女
</td>
</tr>
<tr>
<td>爱好:</td>
<td>
<inputtype="checkbox"name="interest"value="vc"checked>VC
<inputtype="checkbox"name="interest"value="vb"checked>VB
<inputtype="checkbox"name="interest"value="vfoxpro">VF
<inputtype="checkbox"name="interest"value="vjava">VJ
<br>
<inputtype="checkbox"name="interest"value="bc">BC
<inputtype="checkbox"name="interest"value="cobol">CO
<inputtype="checkbox"name="interest"value="java">JA
<inputtype="checkbox"name="interest"value="delphi">Delphi
</td>
</tr>
<inputtype="hidden"name="interest"value="jsp">
<tr>
<td>您的学历:</td>
<td>
<selectname="province">
<optionvalue=0>--请选择--</option>
<optionvalue=01>小学</option>
<optionvalue=02>初中</option>
<optionvalue=03>高中</option>
<optionvalue=04>本科</option>
<optionvalue=05>硕士</option>
<optionvalue=06>博士</option>
</select>
</td>
</tr>
<tr>
<td>您的简历</td>
<td>
<textarearows="12"cols="80"name="intro"wrap="hard">请输入您的简历:</textarea>
</td>
</tr>
<tr>
<td>上传附件:</td>
<td>
<inputid="File"name="UpLoadFile"type="file"/>
</td>
</tr>
<tr>
<tdcolspan="2">
<center>
<inputtype="submit"value="提交">
<inputtype="reset"value="重置">
<br>
<inputtype="button"value="ok">
<inputtype="image"src="1.png"width=30>
</center>
</td>
</tr>
</table>
</form>
<center>滔滔制作!</center>
</body>
</html>
|
Body体里面的标签——框架标记
<framesetrows=“row1,row2…”cols=“col1,col2…”>
<framename=“”src=“”noresize>
<framename=“”src=“”scrolling=“”>
……
</frameset>
<framesetrows="20%,*">
<framename="top"src="Untitled-1.html"noresize>
<framesetcols="20%,*">
<framename="left"src="Untitled-2.html"noresize>
<framename="right"src="1.html">
</frameset>
</frameset>
|
分享到:
相关推荐
经过一段时间的学习,对于HTML也有了基础的认识。所以我就一点点的总结一下各类常用的标签的用法。
HTML常用的标签及使用总结..pdf
自己总结的HTML常用标签自己总结的HTML常用标签自己总结的HTML常用标签自己总结的HTML常用标签自己总结的HTML常用标签自己总结的HTML常用标签自己总结的HTML常用标签自己总结的HTML常用标签自己总结的HTML常用标签...
html html5 css html常用标签(元素)的总结 html常用标签(元素)的总结 html常用标签(元素)的总结 html常用标签(元素)的总结 html常用标签(元素)的总结 html常用标签(元素)的总结 html常用标签(元素)的...
html常用知识点总结,参考网上学习教程总结的知识点
该网页包含了常用的html基本标签,包括了一些标签的小例子演示,都集成在一个html页面中,方便初学者学习和温习,基础中的基础,框架的基础例子
HTML基础知识点总结
#html#初学者#总结#常用知识点
自己总结的一些常用的HTML的标签属性!
html中常用的转义字符总结,具体内容如下所示: 不断行的空格   半方大的空格   全方大的空格 < 小于 < > 大于 > & &符号 " 双引号" © 版权符号:copyright: ®...
第1天--(下午)HTML常用标签总结、HTML表单详解.rar
HTML前端开发最终取决于掌握标签的多少 HTML大概有七八百个标签 这里给大家总结了下HTML常用标签
HTML常用的标签及使用总结..docx
query常用方法总结: $("标签名") //取html元素 document.getElementsByTagName("") $("#ID") //取单个控件document.getElementById("") $("div #ID") //取某个控件中 控件 $("#ID #ID") // 通过控件ID取其中的控件 ...
一、实验目的 1.掌握JSP程序运行环境配置的基本要求。 2.熟悉HTML的常用标签使用以及静态网页的制作。 二、实验学时 2H 三、实验性质
html网页标签与结构设计的学习
HTML常用的标签及使用总结..docx
HTML常用代码标记 HTML常用的各种代码和标记的总结
主要总结了常用的html和css基础用法以及h5和c3的常用知识点
自己总结的小经验,很基础,将一些专业素养的,英文解释也放进去了。可以参考。平时忘了什么就瞅瞅,大佬们可以查阅一下。平时下载可以用来复习或者挑选。