weixin_30954607
weixin_30954607

HTML和CSS总结（基础版）

　 HTML和CSS总结
HTML
HTML文档基本结构 整体结构 
<html>
    
    <head>
    head>
    --主体部分
    <body>
    body>
html>

 
HTML头部结构 title标签 描述网页的主题，将在浏览器窗口的标题栏显示网页标题。
例子：
搜狐-中国最大的门户网站
meta标签 1、描述文档类型和字符编码


其中属性"http-equiv"提供"名称/值"中的名称，"content"提供"名称/值"中的值，所以以上述HTML代码的含义如下。
名称：Content-Type(文档内容类型)
值：text/html; charset=gb2312(文本类别的html类型，字符编码为简体中文)
charset表示字符集编码，常用的编码有如下四种。
gb2312:简体中文，一般用于包含中文和英文的页面。
ISO-885901：纯英文，一般用于只包含英文的页面。
big5：繁体，一般用于带有繁体字的页面。
utf-8：国际通用的字符编码，同样适用于中文和英文的页面。和"gb2312"编码相比,utf-8的国际通用性更好，但字符编码的压缩比较低，对网页性能有一定的影响。
字符编码:浏览网页时我们可以通过浏览器的菜单如I.E.)查看->编码进行语言设置;但如果HTML文件中有这行,浏览器将自动设置相应的语言项
2、描述搜索关键字和描述



实现的方式仍然为"名称/值"对的形式，其中keywords表示搜索关键字，description表示网站内容的具体描述。
提高被搜索的频率和排名的常用办法：
1、在google等搜索引擎中登录自己的网站（花钱）
2、在知名网站中加入链接（花钱）
3、在论坛中发帖宣传（花时间）
4、设置自己网站的meta标签（提供利于被搜索的信息，容易忽视的好习惯）
 设置keyword、description的好处，提高被google、百度等搜索到的命中率和排名。
基本块级标签 标题标签

~

 表示一段文字的标题（主题），并且支持多层次的内容结构，并赋予了标题一定的外观：所有标题字体加粗，

字号最大，

字号最小
例子：
<h1>一级标题h1>
<h2>二级标题h2>
<h3>三级标题h3>
<h4>四级标题h4>
<h5>五级标题h5>
<h6>六级标题h6>

 
段落标签

 表示一段文字的内容，一个段落中可以包含多行文字，文字内容随浏览器窗口的大小自动换行。
例子：
<p>有勇气既会有奇迹p>

 
水平线标签
 表示一条水平线，注意该标签比较特殊，没有结束标签，直接使用"
"表示标签的开始和结束。水平线长度可调
页面布局的块级标签 有序列表标签
    		 表示多个并列的列表项，它们之间有明显的先后顺序，使用
      、
    表示有序列表，
  1. 、
    2. 表示各列表项
    例子：
    
<ol type="a">
    <li>填写信息li>
ol>

     
    无序列表标签
      		 无序列表与有序列表类似，但多个并列的列表项之间没有先后顺序，使用
        、
      表示无序列表，
    • 、
      • 表示各列表项
      例子：
      
<ul type="circle">
    <li>如何激活会员名li>
ul>

       
      定义列表标签
      		 用于描述某个术语或产品的定义或解释，它使用
      、
      表示定义列表,
      、
      表示术语，
      、
      表述术语的具体描述。在实际应用中，定义列表还被扩展应用到图文混编的场合。
      相对于
      有更多的外边距。
      例子：
      <dl>
    <dt>标题dt>
    <dd>内容dd>
dl>

       
      表格标签、表示行，表示列。
      在实际应用，你会发现
      用于描述一个表格，它使用规整的数据显示。它使用、
      表示表格，
      、
      所控制的表格并不像我们常规理解的表格，
      中的每行中的垂直并列的列之间是没有任何联系的，当我们修改其中一个
      的样式时，是不会影响到与之垂直并列的其他列。
      例子：
      <table>
    <tr>
        <td>内容td>
    tr>
table>

       
      表单标签
      		 用于描述需要用户输入的页面内容，它使用、表示表单，表示输入内容项（行级标签）
      例子：
      <form>
    <input type="text" name="name"/>
form>

       
      分区标签
      		 用于页面布局时对区块的划分，可以容纳其中块级和行级标签，没有明显的外观效果。
      例子：
      常用的块状结构 1、div-ul(ol)-li:常用于分类导航或菜单等场合。
      2、div-dl-dt-dd:常用于图文混编场合。
      3、table-tr-td:常用于规整数据的显示场合。
      4、form-table-tr-td:常用于表单布局的场合。
      块级标签的特点 1、前后断行显示，块级标签比较“霸道”，默认状态下占据一整行。
      2、具有一定的宽度和高度，可以通过设置块级标签的width、height属性来控制
      3、块级标签常用作容器，即可以再"容纳"其他块级标签或行级标签，而行级标签一般用于组织内容，即只能用于容纳"文字"、图片或其他行级标签。
      从页面布局的角度，块级标签又细分为基本块级标签和常用于页面布局的块级标签
      行级标签 图像标签 用于显示图片
      例子：
      图片地址" alt="图片替代文字" title="鼠标悬停提示文字"/>
      设计和制作王爷时，需要从方便用于使用的角度考虑问题。用户体验已越来越成为Web设计和开发需要考虑的重要因素，用户体验的原则之一就是以用户为中心，并体现在细微之处。例如，使用标签时，强烈推荐同时使用"alt"和"title"属性，避免因网速太慢或路径错误带来的"一片空白"或"错误"：同时，增加的鼠标提示信息也方便用户的使用。
      超连接标签 根据超连接的应用场合，可以把链接分为如下三类。
      1、页面间链接：A页到B页，最常用，用于网站导航。
      2、锚链接：A页甲位置到A页（本页）乙位置或A页甲位置到B页的乙位置。
      3、功能性链接：在页面中调用其他程序功能，例如电子邮件、QQ、MSN等。
      范围标签 用于标识行内的某个范围。
      例子：
      <span>文本内容span>

       
      换行标签
      		 表示强制换行显示，该标签和
      标签一样，没有结束标签。
      文本域标签