首页 > 代码库 > 重温html和css

重温html和css

----------------------------------------------------------------普通html标签-------------------------------------------------------------------------

1、p标签

<p>段落内容</p>具有分行的作用

 

2、strong和em强调

strong用于加粗强调。em用于斜体强调

 

3、span标签

span标签是没有语义的,它的作用就是为了设置单独的样式用的,在head中定义格式后直接调用

 

4、q标签引用(如图)

技术分享

5、blockquote标签

浏览器对<blockquote>标签的解析是缩进样式。如下图所示:

技术分享

 

6、&nbsp;标签输入空格

在html中直接输入space空格键在浏览器上是不会显示的,需用&nbsp;效果如图;

技术分享

 

 

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="http://www.mamicode.com/目标网址"  title="鼠标滑过显示的文本">链接显示的文本</a>
①其中的title并不是虚设,作用见下图;

(使用 title 属性,只是可以让鼠标悬停在超链接上的时候,显示该超链接的文字注释。

该属性是可选的,建议加上,该属性可以辅助用户更好的理解你的超链接用处。)

 

技术分享技术分享

 ②target="_blank在新窗口打开链接

<a href="http://www.mamicode.com/目标网址" target="_blank">click here!</a>

 

19、用mailto在网页中链接email地址

技术分享

 

 技术分享用法示例

 

19、<img>标签为网页加入图片

<img src="http://www.mamicode.com/图片地址" 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="http://www.mamicode.com/值"    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="http://www.mamicode.com/提交">

①type:只有当type值设置为submit时,按钮才有提交作用

②value按钮上显示的文字

技术分享技术分享

 

26、reset重置信息

<input type="reset" value="http://www.mamicode.com/重置">

技术分享技术分享

 

 27、form表单中的label标签

<label for="控件id名称">

 22点处对此有解释

注:用于与用户交互的value的作用不一样

------------------------------------------------------------------表单交互结束---------------------------------------------------------------------------------------------------------------------------------------------------下一篇css----------------------------------------------------------------------------------

 

重温html和css