HTML+CSS入门

    
        
        
        
    
    
        
Hello World!
    

语义化：明白每个标签的用途（在什么情况下使用此标签合理）比如，网页上的文章的标题就可以用标题标签，网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段落就得放在段落标签中等等

讲了这么多语义化，但是语义化可以给我们带来什么样的好处呢？

1. 更容易被搜索引擎收录。

2. 更容易让屏幕阅读器读出网页内容。

段落文本
标签，这个标签是没有语义的，它的作用就是为了设置单独的样式用的。

如果现在我们想把下面的第一段话“美国梦”三个字设置成blue（蓝色），所以这样情况下就可以用到标签了。

使用标签来制作文章的标题。

在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个
标签中，这个
标签的作用就相当于一个容器。

头部标签
header标签代表头部，但作用等同于div，只是具备语义化

标签定义底部区域

定义区段

定义侧边栏区域

使用
标签实现换行效果

语法：

xhtml1.0写法：




html4.01写法：




大家注意，现在一般使用 xhtml1.0 的版本的写法（其它标签也是），这种版本比较规范。


标签是一个空标签，没有HTML内容的标签就是空标签，空标签只需要写一个开始标签，这样的标签有
、
和。

总结：在 html 代码中输入**回车、空格**都是没有作用的。在html文本中想输入回车换行，就必须输入
。

 使用特殊字符 ;实现空格标签
 
使用
标签实现水平线标签

使用
标签实现无序列表

ul-li是没有前后顺序的信息列表。

语法：


  
信息
  
信息
   ......


ul-li在网页中显示的默认样式一般为：每项li前都自带一个圆点

使用
标签实现有序列表

使用标签为网页添加图片
语法：
"图片地址" alt="下载失败时的替换文本" title = "提示文本">
讲解：

1、src：标识图像的位置；

2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；

3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；

4、图像可以是GIF，PNG，JPEG格式的图像文件。

使用标签为网页添加超链接

语法：

"目标网址"  title="鼠标滑过显示的文本">链接显示的文本

a标签有的target属性，代表打开网页的方式。可选值为”_self和_blank”，默认值为_self，代表在当前页面打开链接，_blank代表在新窗口打开链接。

使用table家庭为网页添加表格

创建表格的四个元素：table、tr、th、td

1、…：整个表格以标记开始、标记结束。

2、…：表格的一行，所以有几对tr 表格就有几行。

3、…：表格的一个单元格，一行中包含几对...，说明一行中就有几列。

4、…：表格的头部的一个单元格，表格表头。

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

6、border属性可以为表格添加边框，属性值为数字。

注意：

1、table标签用来定义整个表格，为双标签，必须有结束标签。

2、table标签里面可以放caption标签和tr标签。

3、caption标签用来定义表格的标题。

4、tr标签用来设置表格的行，tr里面只能放th或者td标签，一组tr标签代表一行。

5、th用来设置表格的标题，会加粗居中显示。也就是th标签中的文本默认为粗体并且居中显示。

6、td同来设置表格的列，一组td标签代表一列。

7、table表格在没有添加border属性之前, 在浏览器中显示是没有表格线的。

使用thead、tbody、tfoot定义表格

标签来定义表格的行,和来定义表格的列,标签定义表格头部,标签来定义表格的内容,来定义表格的底部

使用表单标签，与用户交互 - 使用
创建表单

表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。

语法：

"传送方式"   action="服务器文件">

讲解：

1. ：标签是成对出现的，以开始，以
结束。

2.action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。

3.method ： 数据传送的方式（get/post）。

注意:

1、所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在 
 标签之间（否则用户输入的信息可提交不到服务器上哦！）。

2、method : post/get 的区别这一部分内容属于后端程序员考虑的问题。感兴趣的小伙伴可以查看本小节的 wiki，里面有详细介绍。