重温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="目标网址"  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----------------------------------------------------------------------------------

时间: 2024-10-29 19:05:44

重温html和css的相关文章

重温HTML和CSS知识

 HTML之基本结构 <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>标题</title> <link href="XXX.css" rel="stylesheet"> <script type="text/javascript" src="XXX.js&q

关于CSS的只言片语

这段时间做了一个简单的页面,借机又重温了一下CSS的相关知识,现总结一下: 工欲善其事必先利其器,让我们先做一点准备工作 1.在页面添加: <meta http-equiv="x-ua-compatible" content="ie=edge"> 指定IE利用标准模式渲染页面,而不是兼容模式 <meta name="viewport" content="width=device-width,initial-scale=

前端攻略-从路人甲到英雄无敌

记得那年,我初学前端,遇见了很多的文章,在浩瀚的知识海洋里我手足无措,不知从何开始.己所不欲,勿施于人.这篇文章就会帮你去遨游前端学习的海洋,主要包含了在我之前的学习过程中整理的一些资源和一些感悟.我打算将整篇文章切分为两部分,第一部分重温HTML与CSS的基本知识,第二部分概括JavaScript.前端框架与设计模式. HTML 与 CSS基础 前端的领域里,任何东西都离不开HTML 与 CSS.HTML与CSS基本上控制了你看到的所有东西,HTML用来定义内容而CSS负责样式与布局. 首先从

重温HTML之frameset、css、选择器

分帧(frameset) HTML 框架是划分窗口的技术 就是把一个窗口分隔成多个窗口 每个窗口显示不同的网页内容多用于后台 也叫做分帧 Frameset 注意 如果你在页面上写frameset了那么就不能出现body <frameset></frameset> 常用属性: Cols  分列单位可以写像素也可以写百分比 之后除上面内容外还可以写*(*代表剩余所有) Rows 分行单位可以写像素也可以写百分比 之后除上面内容外还可以写*(*代表剩余所有) Frameborder  分

重温CSS之文档结构

出处:http://limits.cnblogs.com 我们来看看几个基本的HTML页面 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"&g

重温CSS之背景、文本样式

CSS背景样式: 背景色:background-color属性,设置元素的背景色,如:div {background:blue;}--设置所有div元素的背景为蓝色: 背景图像:background-image属性,设置元素的背景图像,如:div{background-image:url('img.jpg');}--设置div元素的背景图片: 背景重复:background-repeat属性,对元素的背景图像进行平铺设置:默认值:repeat背景图像将在垂直方向和水平方向重复.repeat-x背

重温css系列01

独自坐着地铁 突然一股莫名的孤独感涌上心头,原来这么久都是一个人承载着生活中的苦辣与酸甜! 往往都在拼命的往终点狂奔,忽略了太多身边的人和事了,需要我们静下来,重新整理一下自己的思绪,勿忘初衷!——2015-10-12(帮朋友搬家) 好,我们进入今天的主题 重新整理一下css中一些容易忽略的问题 1.css盒子模型   <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF

重温css的一些知识点

1,块级元素:div h(1-6) p ul li ,块级元素父元素是body,所以与浏览器一样宽,始终占一行  行内元素:a span img 2,选择符: 1,上下文选择符 特殊上下文选择符:标签1 > 标签2 :标签1不能是标签2的父元素之外的其他祖先元素 2,ID和类选择符 标签带类选择符:p.className   带这个className的段落 3,属性选择器3,伪类: 1,链接伪类 a:link a:visited a:hover a:active 2,input:focus 3,

css水平居中那点事

昨晚深夜写了css垂直居中那点事,今晚该写他的兄弟篇:css水平居中那点事了..…^^ 其实本来这两个可以连在一起写,可是为了不要搞混,为了让思路更清晰,最后决定还是分开来些比较好...这样以后也有利于自己重温~~ 一,text-align 为什么要第一个写text-align呢? 其实也没有为什么.....(别打我) 但text-align是一个很神奇的东西,在ie6中使用text-align会有惊喜 text-align是文本居中的意思,是使一个块级元素的行内内容对齐,所以正常来说,text