html《课时内容》第一篇

html基本结构：

    
        
        
    
    
        内容
    

标签和属性，并使用样式代替:

标签	描述
	定义居中的内容
和	定义HTML字体
	定义删除线文本
	定义下划线文本

属性	描述
align	定义文本的对齐方式
bgcolor	定义背景颜色
color	定义文本颜色

对齐方式的align有：

靠左
居中
靠右
靠下
水平居中
低部
顶部

HTML格式化

HTML可以定义很多供格式化输出的元素，比如粗体和斜体字。

文本格式化标签：

标签	描述
	定义粗体文字
	定义大号字
	定义着重文字
	定义斜体文字
	定义小号字
	定义加重语气
	定义下标字
	定义上标字
	定义插入字
	定义删除字
	使用代替
	使用代替
	使用样式 （style）代替

HTML链接：

• HTML链接是通过标签进行定义的，并且在href属性中指定链接的地址。
• 实列：

   
  w3school是一个非常好的学习Web技术的网站。
  
 

image

HTML图像

• HTML图像是通过标签进行定义的，图像的名称和尺寸是以属性的形式提供的。
  如果是本地的话，后面加上图片的绝对路径或者相对路径。
  如果图片源来自网上，那必须使用绝对路径。

示例：排列图片

• 本例演示如何在文字中排列图像:

未设置对齐方式的图像：

图像  在文本中

已设置对齐方式的图像：

图像  在文本中

图像  在文本中

图像  在文本中

请注意，bottom 对齐方式是默认的对齐方式。

示例：浮动图像

• 本例演示如何使图片浮动至段落的左边或右边。

 
带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。



 
带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本的右侧。

示例：调整图片尺寸

• 本例演示如何将图片调整到不同的尺寸:

通过改变 img 标签的 "height" 和 "width" 属性的值，您可以放大或缩小图像。

示例：制作图像链接

• 本例演示如何将图像作为一个链接使用:

您也可以把图像作为链接来使用：

初识div

认识div在排版中的作用

语法：

…

给div命名，使逻辑更加清晰

我们把一些标签放进

里，划分出一个独立的逻辑部分。为了使逻辑更加清晰，我们可以为这一个独立的逻辑部分设置一个名称，用id属性来为

提供唯一的名称，这个就像我们每个人都有一个身份证号，这个身份证号是唯一标识我们的身份的，也是必须唯一的。
如下两图进行比较，如果设计师把两个图给你，哪个图你看上去能更快的理解呢？是不是右边的那幅图呢。

语法：

…

---

table标签，认识网页上的表格

table标签 ＝ 我们平时看到到表格

有时候我们需要在网页上展示一些数据，如某公司想在网页上展示公司的库存清单。如下表：

想在网页上展示上述表格效果可以使用以下代码：

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

• …：当表格内容非常多时，表格会下载一点显示一点，但如果加上标签后，这个表格就要等表格内容全部下载完才会显示。

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

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

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

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

上述代码在浏览器中显示的默认的样式为：

总结：

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

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

用css样式，为表格加入边框

Table 表格在没有添加 css 样式之前，是没有边框的。这样不便于我们后期合并单元格知识点的讲解，所以在这一节中我们为表格添加一些样式，为它添加边框。
代码中加入：

上述代码是用 css 样式代码，为th，td单元格添加粗细为一个像素的黑色边框。

结果窗口显示出结果样式：

表格应用和布局

• 内容目标
  • 会使用表格的基本结构实现简单表格
  • 会使用表格相关标签实现跨行、跨列的复杂表格
  • 会使用表格相关设置进行美化修饰

表格的基本结构:

    
    
        

            

                
姓名
                
性别
                
专业
            
            

                
贝贝
                
男
                
计算机
            
            

                
晶晶
                
女
                
计算机
            
        
    
 

说明：bordercolor="颜色或者十六进制颜色代码"：设置边框的颜色；cellspacing="0"：设置单元格之间的间隔；cellpadding="30"：设置单元格边框和内容之间的间隔；border="1"：设置边框的宽度。

视图

效果图：

跨行跨列的表格：

• 示列

  

    
手机充值、IP卡 
    
办公设备、文具
  
  

    
各种卡的总汇
    
铅笔
    
彩笔
  
  

    
打印
    
刻录
  

如图所示： rowspan:表示跨行； colspan:表示跨列；
办公设备、文具:跨了2行， 各种卡的总汇:跨了2列
详细PPT教程： 表格应用和布局——html02

---

跑马灯marquee:

            滚动文字或图像
      

说明：

scrolldelay：表示滚动延迟时间，默认值为90。
direction：表示滚动的方向，默认为从右向左 up：是从上向下。

end

---

由于时间问题来不及总结以下是关于HTML的资料：

HTML+CSS入门篇
用CSS进行网页布局
导航条菜单的制作
css - 收藏集 - 掘金
用CSS进行网页布局 学习笔记
常见 CSS 布局方式
css文集—猫奴
148个资源让你成为CSS专家