首页 > 代码库 > 重温html和css
重温html和css
----------------------------------------------------------------普通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="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