HTML+CSS学习笔记（一）

一、HTML的概念

HTML：Hyper Text Markup Language 超文本标签语言

HTML：网页的“源码”

浏览器：“解释和执行”HTML源码的工具

 

二、HTML文件的基本结构

 

< html >
< head >
< title >我是标题 </ title >
</ head >

< body >
你好，我是HTML基本结构
</ body >
</ html >

主要由“head头部”和“body主体”组成，网页内容（包括文本、图像、链接等）都在body内

 

三、块级标签

 

      基本块级标签   

1、标题标签<h1>-<h6>

2、段落标签<p></p>

3、水平线标签<hr/>

      常用于布局的块级标签

1、有序列表标签<ol></ol>

2、无序列表标签<ul></ul>

3、定义描述标签

< dl >
     < dt >标题 </ dt >
     < dd >描述 </ dd >
    ……
</ dl >

4、表格<table></table>  一行<tr></tr>  一列<td></td>

< table >
     < Tr >
         < td >百度 </ td >
         < td >新浪 </ td >
         < td >天涯 </ td >
     </ Tr >
     < Tr >
         < td >谷歌 </ td >
         < td >搜狐 </ td >
         < td >猫扑 </ td >
     </ Tr >
</ table >

以上代码的效果：

5、 表单form

一般和table使用

 

< form >
< table >
     < Tr >
         < td >用户名： </ td >
         < td >< input  type ="text"   /></ td >
     </ Tr >
     < Tr >
         < td >密码： </ td >
         < td >< input  type ="password"   /></ td >
     </ Tr >
     < Tr >
         < td  colspan ="2" >< input  type ="button"  value ="提交"   /></ td >
     </ Tr >
</ table >
</ form >

 

效果是：

 

          6、分区标签<div>

 

四、常用的四种块状结构

 

1、div-ul(ol)-li ：常用于分类导航或菜单等

2、div-dl-dt-dd ：常用于图文混编的场合

3、table-tr-td ：常用于图文布局或显示数据

4、form-table-tr-td：常用于布局表单 

 

五、行级标签

 

1、图像标签   

<img  src= "图片地址"  alt="提示文字"   title="提示文字" />

2、范围标签<span> ：显示某行内的独特样式       

<span >文本等行级内容</span>

3、换行标签 <br/>  （注意<br/>和<hr/>2个标签的特殊）

 

六、W3C标准

      1、为什么要使用W3C标准

      W3C:World Wide Web Consortlum,万维网联盟

      W3C的职能：负责制定和维护web行业标准

      W3C标准包括：列的标准

      a.HTML内容方面：XHTML

      b.样式美化方面：CSS

      c.结构文档访问方面：DOM

      d.页面交互方面：ECMAScript

 

      2、XHTML1.0的基本规范

      a.标签名和属性名称必须小写

      b.HTML标签必须关闭

      c.属性值必须用引号括起来

      d.标签必须正确嵌套

      c.必须添加文档类型声明

 

七、关于HTML语义化的理解

      

          HTML代码语义化，搜索引擎的爬虫在搜索页面时只识别含有语义化的标签，如<h1>标题<p>段落等，而不识别表示样式的标签，如<font>字体、<b>加粗等