day19总结：前端html基础（2019-05-13）

1. web标准

• 由万维网（WWW = W3C）指定的网页开发规范

1）结构标准

• html：决定网页上的内容

2）表现标准

• css：决定网页上内容的布局和样式

3）行为标准

• javascript：简称js，决定网页上动态变化的内容

2. 什么是html

• html是超文本标记语言（类似markdown语法）
• html是通过不同的标记（标签）来决定网页上的不同内容，学习html就是学html中的标签（标记）

3. html语法

1）html大小写不敏感

• html == Html == HTml == HTML

2） 标签（标记）

• a. 语法：
  双标签：<标签名 属性名1=值1 属性名2=值2...> 标签内容
  单标签：<标签名 属性名1=值1 属性名2=值2.../> 或者 <标签名 属性名1=值1 属性名2=值2...>
• b. 说明
  标签名：必须是html提供的标签名，不能随便写
  属性：以“属性名=值”的形式成对出现的，多对之间用空格隔开；属性的顺序可以任意，不会影响效果
  值：必须放在双引号中
  标签内容：只有双标签才有标签内容；标签内容可以是任何内容（不光只能是文字，还可以是其他一个或者多个标签）

4. head中的标签

• meta标签：定义了HTML文档中的元数据(设置网页的基本设置)
• title标签：设置网页标题
• style标签：在html中提供CSS代码对应的标签（HTML文档的样式文件）
• link标签：导入图标/CSS文件的标签（文档和外部资源之间的关系）
• script标签：导入js代码/文件的标签（客户端的脚本文件）
• base标签：url基本地址（页面链接标签的默认链接地址）

5. 文本标签

• 如果需要在网页中显示文字，一般不直接将文字写body中，而是根据这个文字的功能找到对应的标签

1）标题标签

• h1-h6标签：双标签，一个标签占一行

        
我是标题1
        
我是标题2
        
我是标题3
        
我是标题4
        
我是标题5
        
我是标题6

2）段落标签

• p标签：双标签，保证一个段落对应一个p标签，一个标签占一行

        

            一花独放不是春，百花齐放春满园
        
  
        
hello
        
world

3）font标签

• 双标签，一行可以有多个

        性别
        男
        女

4）文字效果相关标签

• 在HTML中直接敲空格、缩进是无效的
• 
  标签 ：单标签，往网页中的内容强制换行
•   ：一个像素(一个" "代表空一个像素)
•   ：一个空格
• 标签 ：加粗
• 标签 ：加粗(有强调的意义)
• 标签 ：倾斜
• 标签 ：倾斜(有强调的意义)

6. 列表标签

1）无序列表(ul)

• ul 标签：代表列表容器，是一个整体
• li 标签：列表中的元素

        

            
Python
            
H5
            
Java
            
Testing
        

2）有序列表(ol)

• ol 标签：代表列表容器，是一个整体
• li 标签：列表中的元素

        

            
挑选小龙虾
            
清理小龙虾
            
煮小龙虾
        

3）自定义列表(dl)

• dl标签：代表列表容器，是一个整体
• dt标签：小分类标签(名词)
• dd标签：小分类下面的元素(解释)

        

            
四川
            
成都
            
绵阳
            
眉山
            
辽宁
            
大连
            
沈阳
            
盘锦
        

7. 图片和超链接

1）图片标签(img)

• 单标签，默认情况下一行可以显示多张图片
• src属性：设置图片地址/路径，可以是本地路径也可以是网络地址
• title属性：设置图片标题（当鼠标停留在图片上才会显示出来）
• alt属性：图片加载失败的时候的提示信息

2）超链接(a)

• 双标签
• href属性：跳转的目的地
  a. 网址：点击超链接直接加载网址对应的网页
  b. 本地html文件地址：点击超链接直接加载本地html文件对应的网页
  c. # ：刷新
  d. 选择器：让当前页面滚动到指定的位置
• target属性：跳转方式
  a. _self ：在当前页面中加载新的网页(默认值)
  b. _blank ：在新的页面中加载新的网页

        第1组

        第2组

        第3组

        第4组


        
第一组图片
        
        
        

        
第二组图片
        
        
        

        
第3组图片
        
        
        

        
第4组图片
        
        
        


        
        百度一下
        
        

        
        列表
        
        
        刷新
        
        
        回到顶部

8. 表格标签

1）table标签（代表表格整体）

• cellspacing属性：设置表格中单元格和单元格以及单元格和表格表框的间距
• cellpadding属性：设置单元格中的内容到单元格(上下左右)边框之间的距离
• bgcolor属性：设置整个表格背景颜色(包含单元格的部分)
• width属性：设置整个表格的宽度
• height属性：设置整个表格的高度
• align属性：center(居中)，left(左对齐)，right(右对齐)；让整个表格在它的父标签里面居中、居左或者居右
• border属性：设置单元格边框的宽度
• bordercolor属性：单元格边框的颜色

2）tr标签（代表表格中的一行）

• bgcolor属性：设置一行中所有单元格的背景颜色
• height属性：设置一行的高度
• align属性：让一行中所有单元格的内容在单元格中居中、居左或者居右

3）td标签（代表表格中的一个单元格）

• bgcolor属性：设置指定单元格的背景颜色
• width属性：设置td所在的列的宽度
• align属性：让当前单元格中的内容在单元格中居中、居左或者居右

        

            
            

                
第1行第1列
                
第1行第2列
                
第1行第3列
            
            
            

                
第2行第1列
                
第2行第2列
                
第2行第3列
            
            
            

                
第3行第1列
                
第3行第2列
                
第3行第3列
            
            
            

                
第4行第1列
                
第4行第2列
                
第4行第3列
            
        

4）补充：细线表格

• 设置整个的table的背景颜色是边框线的颜色
• 设置每个单元格的颜色和边框线的颜色不一样
• 设置单元格和单元格的间距(cellspacing)为1

     

            
            

                
第1行第1列
                
第1行第2列
                
第1行第3列
            
            
            

                
第2行第1列
                
第2行第2列
                
第2行第3列
            
            
            

                
第3行第1列
                
第3行第2列
                
第3行第3列
            
            
            

                
第4行第1列
                
第4行第2列
                
第4行第3列
            
     

9. 复杂表格

• colspan属性：列合并
• rowspan属性：行合并