html 标签

<hn></hn> 共有6类,从h1到h6,用作设置文本标题

<p></p>段落标签,用于设置文本的段落

<span></span>没有语义,只是为了设置单独文本的样式。

//////////////////////////////////////////////////////////////

<strong></strong>强调字体,加粗

<q></q>短文本引用,如:引用了别人的名言等。默认添加双引号

<blockquote></blockquote>长文本引用,引用较长的话。默认添加双引号

html中不识别回车和空格,所以要实现回车和空格,用标签

<br/>分行显示,即回车

&nbsp;空格

<hr/>添加水平横线,分割用,默认灰色,有点粗

<address></address>地址标签,为网页添加地址信息,默认斜体

<code></code>在文本中插入一行代码

<pre></pre>用于在文本中插入多段代码

///////////////////////////////////////////////////////////

<ul>
  <li>精彩少年</li>
  <li>美丽突然出现</li>
  <li>触动心灵的旋律</li>
</ul>                                            用于显示信息列表,默认li标签前面会带个小点。

<ol>
   <li>前端开发面试心法 </li>
   <li>零基础学习html</li>
   <li>JavaScript全攻略</li>
</ol>                                           用于有顺序的显示信息列表,默认li标签前面会带个数字顺序,默认从1开始。

<div></div>把逻辑独立的区域划分出来

id=""为div命名,唯一的

////////////////////////////////////////////////////////////////

创建表格的四个元素:

table、tbody、tr、th、td

1、<table>…</table>:整个表格以<table>标记开始、</table>标记结束。

2、<tbody>…</tbody>:当表格内容非常多时,表格会下载一点显示一点,但如果加上<tbody>标签后,这个表格就要等表格内容全部下载完才会显示。

3、<tr>…</tr>:表格的一行,所以有几对tr 表格就有几行。

4、<td>…</td>:表格的一个单元格,一行中包含几对<td>...</td>,说明一行中就有几列。

5、<th>…</th>:表格的头部的一个单元格,表格表头。

6、表格中列的个数,取决于一行中数据单元格的个数。

7、复杂表格

  (1)rowspan 属性规定单元格可横跨的行数;

  (2)colspan 属性规定单元格可横跨的列数

默认:

1、table表格在没有添加css样式之前,在浏览器中显示是没有表格线的

2、表头,也就是th标签中的文本默认为粗体并且居中显示

<table summary="表格简介文本" >  <caption>2012年到2013年库存记录</caption>    为表格添加摘要和标题,不会显示在页面中,主要用于搜索引擎抓取

/////////////////////////////////////////////////////////////////////////

<a  href="目标网址"  title="鼠标滑过显示的文本">链接显示的文本</a>     title 用于语义化,便于搜索引擎抓取

<a href="目标网址" target="_blank">click here!</a>   链接默认在当前窗口打开,设置target,在新的窗口打开

mailto 属性发送电子邮件:

如果mailto后面同时有多个参数的话,第一个参数必须以“?”开头,后面的参数每一个都以“&”分隔。

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本"> 为网页插入图片

<form   method="传送方式"   action="服务器文件"></form>  

例如:

<form    method="post"   action="save.php">
           <label for="username">用户名:</label>
           <input type="text" name="username" />
           <label for="pass">密码:</label>
           <input type="password" name="pass" />
</form>                                                            所有表单控件(文本框、文本域、按钮、单选框、复选框等)都必须放在<form></form>标签之间(否则用户输入的信息提交不到服务器上)。

文本输入框、密码输入框

1、type:

   当type="text"时,输入框为文本输入框;

   当type="password"时, 输入框为密码输入框。

   当type="submit"时, 为提交按键。

    当type="reset"时, 为重置按键。

2、name:为文本框命名,以备后台程序ASP 、PHP使用。

3、value:为文本输入框设置默认值。(一般起到提示作用)

举例

<form>
  姓名:
  <input type="text" name="myName">
  <br/>
  密码:
  <input type="password" name="pass">
</form>

<textarea  rows="行数" cols="列数">文本</textarea> 当用户需要在表单中输入大段文字时,需要用到文本输入域

form表单中的label标签

小伙伴们,你们在前面学习表单各种控件的时候,有没有发现一个标签--label,这一小节就来揭晓它的作用。

label标签不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本,就会触发此控件。就是说,当用户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和该 label标签相关连的表单控件上)。

语法:

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

注意:标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

例子:

<form>
  <label for="male">男</label>
  <input type="radio" name="sex" id="male" />
  <br />
  <label for="female">女</label>
  <input type="radio" name="sex" id="female" />
  <label for="email">输入你的邮箱地址</label>
  <input type="email" id="email" placeholder="Enter email">
</form>

 css总结:>作用于元素的第一代后代,空格作用于元素的所有后代。

 

常用的块状元素有:

 

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

 

常用的内联元素有:

 

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

 

常用的内联块状元素有:

 

<img>、<input>

 

 

//////////////////////////////////////////////////////////////////////////

文字排版

letter-spacing  字母间距

word-spacing   字间距

text-align:center;  居中(图片、字)

line-height:1.5em;  1.5倍的行高

text-indent:2em; 首行缩进2个字符

text-decoration:line-through;  文字删除线。用于把原价划掉

text-decoration:underline  下划线

font-style:italic; 斜体

font-weight:bold; 粗体

 ///////////////////////////////////////////////////////////////////////////////////

层模型有三种形式:

1、绝对定位(position: absolute)

2、相对定位(position: relative)

3、固定定位(position: fixed)

 

 

 

 

 

posted @ 2015-05-02 00:33  谢靖鹏  阅读(225)  评论(0编辑  收藏  举报