----------------------------------------------------------------普通html标签-------------------------------------------------------------------------
1、p标签
<p>段落内容</p>具有分行的作用
2、strong和em强调
strong用于加粗强调。em用于斜体强调
3、span标签
span
标签是没有语义的,它的作用就是为了设置单独的样式用的,在head中定义格式后直接调用
4、q标签引用(如图)
5、blockquote标签
浏览器对<blockquote>标签的解析是缩进样式。如下图所示:
6、 标签输入空格
在html中直接输入space空格键在浏览器上是不会显示的,需用 效果如图;
7、<hr />水平横线标签
<hr/>和<br />标签一样也是一个空标签,所以只有一个开始标签,没有结束标签。效果如图
8、<address>标签
一般用于对地址进行浏览器上的斜体显示,如<q>标签,如图
9、<code>一行代码显示标签
用法:<code>代码语言</code>
下图一未加入了code的效果图,图二为代码加了code效果图
10、<pre>多行代码显示标签
如图:
11、<ul>新闻信息列表标签
如图:
12、<ol>顺序排列标签
13、<div>标签
在网页制作过程过中,可以把一些独立的逻辑部分划分出来,放在一个<div>
标签中,这个<div>标签的作用就相当于一个容器。
div就是把整个网页划分成每一个小小的部分,CSS在对每一个小部分美容美化。
①给div命名
<div id="版块名称">…</div>,最右图为效果图对比
------------------------------------------------------------------------------------------------------------------------------------------------------------
表格
14、<table>标签
<tr>决定行数为大标签,<th>为表格表头标签,作用于文字,<td>为表格的一个单元格
<table>作用对比 :无table情况
对于<thead><tbody> 和<tfooter>的理解
【转】为了让大表格(table)在下载的时候可以分段的显示,就是说在浏览器解析HTML时,table是作为一个整体解释的,使用TBODY可以优化显示。如果表格很长,用tbody分段,可以一部分一部分地显示,不用等整个表格都下载完成。下载一块显示一块,表格巨大时有比较好的效果。
tbody、tfoot、thead一般来说用得不是很多,对于比较复杂的页面,页面的排版用到了很多的表格,表格的结构也就相对的复杂了,所以又将表格分割成三个部分:题头、正文和脚注。而这三部分分别用: thead, tbody, tfoot来标注。
thead 表格的头 用来放标题之类的东西
tbody 表格的身体 放数据本体
tfoot 表格的脚 放表格的脚注之类
我觉得最直接的用处是:
TBODY包含行的内容下载完优先显示,不必等待表格结束.另外,还需要注意一个地方。表格行本来是从上向下显示的。但是,应用了thead/tbody/tfoot以后,就“从头到脚”显示,不管你的行代码顺序如何。也就是说如果thead写在了tbody的后面,html显示时,还是以先thead后tbody显示。
15、用css对表格进行边框处理
16、<caption>为表格添加标题和摘要
①同样也可以用css对caption等标签进行样式设定 ②<caption>标签不固定摆放位置,但最好是固定存放于某个位置
17、summary标签
summary 属性规定表格内容的摘要。
summary 属性不会对普通浏览器中产生任何视觉变化。
简单的说 就是表格的解释 这个表格主要用来存什么的 做什么的
但是在浏览器中看不到任何效果 只有查看源代码的时候能看到 也就相当于是一个解释 说明这个表格是用来做什么的
----------------------------------------------------------------我是表格和链接的分界线------------------------------------------------------------------------ 链接
18、<a>标签的链接
<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>①其中的title并不是虚设,作用见下图;
(使用 title 属性,只是可以让鼠标悬停在超链接上的时候,显示该超链接的文字注释。
该属性是可选的,建议加上,该属性可以辅助用户更好的理解你的超链接用处。)
②target="_blank在新窗口打开链接
<a href="目标网址" target="_blank">click here!</a>
19、用mailto在网页中链接email地址
用法示例
19、<img>标签为网页加入图片
<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">
1、src:标识图像的位置;
2、alt:指定图像的描述性文本,当图像不可见时(下载不成功时),可看到该属性指定的文本;
3、title:提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本);
4、图像可以是GIF,PNG,JPEG格式的图像文件。
--------------------------------------------------------------------我是链接和数据交互的分界线---------------------------------------------------------------
数据交互
20、用表单数据与用户进行交互------<form method="传送方式" action="服务器文件">
交互:表单是可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据。------------------------------如何处理?
1.<form> :<form>标签是成对出现的,以<form>开始,以</form>结束。
2.action :浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。
3.method : 数据传送的方式(get/post)。
4.text为文本框password为密码框
21、<textarea>文本域
1、<textarea
rows="
行数"
cols="
列数"
>
文本</textarea>
2
、cols :
多行输入域的列数。
3
、rows :
多行输入域的行数。
如图:
22、用户选择、单选/复选框
用法:<input type="radio/checkbox" value="值" name="名称" checked="checked"/>
1、radio单选框, checkbox复选框
2、value:提交数据到服务器的值(后台程序PHP使用)
3、name:为控件命名,以备后台程序 ASP、PHP 使用
4、checked:当设置 checked="checked" 时,该选项被默认选中,下图为check效果
注意:同一组的单选按钮,name 取值一定要一致,比如上面例子为同一个名称“radioLove”,这样同一组的单选按钮才可以起到单选的作用。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>单选框、复选框</title> </head> <body> <form action="save.php" method="post" > <label>性别:</label> <label>男</label> <input type="radio" value="1" name="gender" /> <label>女</label> <input type="radio" value="2" name="gender" /> </form> </body> </html>
22、注:关于label标签
<label> 标签为 input 元素定义标注(标记)。
label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
注:<label> 标签的 for 属性应当与相关元素的 id 属性相同。
试用代码:
<html> <body> <p>请点击文本标记之一,就可以触发相关控件:</p>
<form> <label for="male">Male</label> <input type="radio" name="sex" id="male" /> <br /> <label for="female">Female</label> <input type="radio" name="sex" id="female" /> </form> </body> </html>
23、select下拉列表框
下图为select默认选择设置,如checked=“checked”
24、select multiple多个下拉选择
用法如下
25、submit 提交数据
用法:<input type="submit" value="提交">
①type
:只有当type值设置为submit时,按钮才有提交作用
②value
:
按钮上显示的文字
26、reset重置信息
<input type="reset" value="重置">
27、form表单中的label标签
<label for="控件id名称">
22点处对此有解释
注:用于与用户交互的value的作用不一样
------------------------------------------------------------------表单交互结束---------------------------------------------------------------------------------------------------------------------------------------------------下一篇css----------------------------------------------------------------------------------