html和css知识总结

一、html

1、元素:

html就是由各种各样的html元素构成的文本文件。
元素与标签的区别例:
<p>这是一个p标签
<p>这是内容</p>,这就是一个元素,元素是由一个开始和结束的标签组成的,用来包含某些内容。

2、标签:

标签可以分为块级、行级标签和内联标签

块级标签的特征:

1、默认独占一行
2、支持定义宽高。没有宽高时,默认撑满一排
3、支持所有css命令

行级标签的特征

1、同排可以继续跟同类的标签
2、内容撑开高度
3、不支持宽高
4、不支持上下的margin和padding
5、代码换行被解析

内联块标签的特征:

1、具有行级标签的属性
2、可以设置宽高

块级标签主要有:

<div></div> 
       双标签;可以把内容分割为独立的、不同的部分。
       <h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6> 
       双标签;这用来定义标题的标签。<h1>用来定义最大的标题。<h6>用来定义最小的标题。默认属性;margin、font-wight、font-size
<p></p>  
       双标签;用来定义文章段落、内容。默认属性;margin
       <ul>
           <li></li>
       </ul> 
       双标签;<ul><li>标签定义无序列表,必须组合使用。不可嵌套其他标签,如果要嵌套,必须在子级的li中嵌套。默认属性;margin、padding-left、list-style-type
       <ol>
           <li></li>
       </ol>
        双标签;<ol><li>标签定义有序列表,必须组合使用。不可嵌套其他标签,如果嵌套,必须在子级的li中嵌套。默认属性;margin、padding-left、list-style-type
        自定义列表:<dl> <dt> <dd></dd> <dt/></dl>

行级标签主要有:

<span></span>
双标签;表示没有意义的内容;没有默认属性
<q></q>:短文本引用 比如在你的网页的文章里想引用某个作家的一句诗,这样会使你的文章更加出彩,那么<q>标签是你所需要的</q><blockquote></blockquote>长文本引用
<br>换行标签
<hr>分割线标签
address 为页面加入地址信息 <address>上海市松江区丽德创业园</address> 样式为斜体
code 在网页中显示一些计算机专业的编程代码,当代码为一行代码时,你就可以使用code标签了 <code>var i = 0;</code>
pre 预格式化的文本 要插入多行代码时不能使用code标签,如果是多行代码,可以使用pre标签

<a href="http://www.baidu.com" target="" title="鼠标放在上面的tips"></a>
双标签;表示链接;target="blank"表示在新窗口打开链接 target="self"表示在当前窗口打开链接,为默认值。默认值有:text-decoration
<a>标签的四种状态:1、a:link 表示未被访问的链接 2、a:visited 表示已被访问的链接 3、a:hover 表示鼠标指针移动到链接上 4、a:active 表示正在被点击的链接
<strong></strong>
双标签;表示强调;默认属性:font-weight
<em></em>
双标签;默认属性:font-style:intalic;

表格、表单标签主要有:

 表格标签:table tbody这个标签不怎么使用
     tr 表格的行 th 表格的头部的一个单元格,表格表头
     td 表格的一个单元格 caption 表格标题 summary 属性 表格的摘要
     <img src="路径"alt="描述" title=“鼠标滑过时显示的文本”/>
     单标签;表示图片;
     <form action="url" method="get" target="-self"></form>
     action属性 表示输入的数据被传送到的地址,比如一个PhP页面
     method属性有get/post,数据传送的方式 target属性self/blank,black是在新网页中打开
     lable标签为input标签定义标注label元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。标签的 for 属性应当与相关元素的 id 属性相同
     <input type="text" name="文本" value=""/>
     用于账号的输入
     <input type="password" name="mima" value=""/>
     用账号的密码输入
     <input type="checkbox" name="" value="" checked="checked"/>
   用于复选框 当checked="checked"时,该选项被默认选中
   <input type="radio" value="nan" name=""/>
   用于单选框
   <input type="file"/>
   用于文件上传
   <input type="button" value="按钮"/>
   用于创建按钮
   <input type="reset" value="重置"/>
   设置按钮为重置按钮
   <input type="submit" value="提交"/>
   设置按钮为提交按钮
   <input type="hidden" value="存储数据使用"/>
   <textarea value="" name="">我是文本框</textarae>
   论坛类的留言框,reset设置为none时可以控制扩展。文本域可以控制行和列的数值。
   cols属性:多行输入域的列数。rows属性多行输入域的行数。
<select>
           <option>12</option>
           <option>13</option>
           <option>14</option>
   </select>
   列表数据选择。一般用于闹钟。具有multiple属性:可以实现多选功能。option下拉属性。
   <iframe src="" width="" height=""></iframe>
  <dl>
     <dt>我们是列表标题</dt>
     <dd>我们是列表内容</dd>
     <dd>我们是列表内容</dd>        
  </dl>
 例:
 <dl>
     <dt>城市</dt>
     <dd>北京</dd>    
     <dd>上海</dd>        
 </dl>

标签属性的转换

display : block; 显示为块级标签
display : in-line; 显示为行级标签
display : none; 显示为无

二、css的样式

待整理...............

blog

小道士