HTML5 学习笔记 2017-02-13 am

细线表格

在表格标签中向通过指定外边距为0来实现细线表格是不靠谱的，其实它是将2条线合并为一条线，所以看上去很不舒服

细线表格的制作方式
1.给 table 标签设置 bgcolor
2.给 tr 标签设置 bgcolor
3.给 table 标签设置 cellspacing="1px"

注意点
table 标签和 tr 标签以及 td 标签都支持 bgcolor 属性，但是以上内容仅仅作为了解，因为样式以后都是通过 CSS 来控制的

表格标签的其他标签
表格标题
 
  在表格标签中提供了一个标签专门用来设置表格的标题这个标签叫做 caption， 只要将标题写在 caption 标签中，那么标题就会自动相对于表格的宽度居中 
  caption 标签的注意点 
  caption 一定要写在 table 标签中，否则无效 
  caption 一定要紧跟在 table 标签后面 
  标题单元格标签 
  在表格标签中提供了一个专门用来存储每一列的标题，这个标签叫做 th 标签，只要将当前列的标题存储在这个标签中就会自动居中+加粗文字 
  到此为止我们就发现其实表格中有两种单元格，一种是 td，一种是 th， td 是专门用来存储数据的，th 是专门用来存储当前列的标题的 
 

        
                1.1
                1.2
        

                2.1
                2.2
 
  
  
  
 
表格的结构
 
  由于表格中存储的数据比较复杂，为了便于管理和阅读以及提升语义，我们可以对表格中存储的数据进行分类 
 
表格中存储的数据可以分为4类
 
  表格的标题 
  表格的表头信息 
  表格的主体信息 
  表格的页尾信息 
 
表格的完整结构

        
                
                        今日小说排行榜
                
        
        
                排名
                关键词
                趋势
                今日搜索
                最近七日
                相关链接
        
        
                1
                暴走大事件
                
                          ![](images/up.jpg)
                
                623557
                4088311
                
                          贴吧
                          图片
                          百科
                
        
 
  
  
  
  
  
 

    表格的标题
    
        
            每一列的标题
        
    
    
        
            数据
        
    
    
        
            数据

今日小说排行榜
排名	关键词	趋势	今日搜索	最近七日	相关链接
1	暴走大事件	![](images/up.jpg)	623557	4088311	贴吧图片百科

表格的标题
每一列的标题
数据
数据

 
 caption 作用：指定表格的标题
 thead 作用：指定表格的表头信息
 tbody 作用：指定表格的主体信息
 tfoot 作用：指定表格的附加信息 
 注意点 
  
  如果我们没有编写 tbody，系统会给我们添加 tbody 
  如果指定了 thead 和 tfoot，那么在修改整个表格的高度时，thead 和 tfoot 有自己默认的高度，不会随之表格的高度变化而变化 
  
 
    学生信息
    
        
            姓名
            年龄
        
    
    
        
            张三
            20
        
        
            李四
            40
        
    
    
        
            2
            30
        
    

 
 单元格的合并 
  
  水平方向上的单元格合并可以给 td 标签添加一个 colspan 属性，来指定把某一个单元格当作多个单元格来看待（水平方向） 
  例如 
 含义：把当前单元格当作两个单元格来看待 
  垂直方向上的单元格合并可以给 td 标签设置一个 rowspan 属性，来指定把某一个单元格当作多个单元格来看待（垂直方向） 
  例如 
 含义：把当前单元格当作两个单元格来看待 
  
 注意点 
  
  由于把某一个单元格当作了多个单元格来看待，所以会多出一些单元格，所以需要删掉一些单元格才能正常显示 
  一定要记住单元格合并永远都是向后或者向下合并，而不能向前或者向上合并 
  
 
    
        
        
    
    
        
        
        
    
    
        
        
        
    



    
        
        
        
    
    
        
        
        
    
    
        
        
        
    

 
 表单标签 
 什么是表单
 表单就是专门用来收集用户信息的
 什么是表单元素
 什么是元素
 在 html 中 标签/标记/元素都是指 HTML 中的标签 
  
  例如：标签/标记/a 元素 
 
 
 
 表单元素其实还是 HTML 中的一些标签，只不过这些标签比较特殊，在浏览器中所有的表单标签都有特殊的外观和默认的功能 
  
  表单的格式 
  
 
        <表单元素>

 
 常见的表单元素 
  
  input 标签，input 标签有一个 type 属性，这个属性有很多类型的取值，取值的不同就决定了 input 标签的功能和外观不同 
  
 注意：表单元素一定要写在表单中t 
 明文输入框 
 账号：
 
 暗文输入框 
 密码：
 
 给输入框设置默认值 
 账号：
密码：
 
 单选框 
  
  默认情况下单选框不会互斥，要想单选框互斥那么必须给每一个单选框标签都设置一个 name 属性，然后 name 属性还必须设置相同的值 
  要想让单选框默认选中某一个框，那么可以给 input 标签添加一个 checked 属性 
  在 html 中如果属性的取值和属性的名称一样，可以只写一个，但是在 xhtml 中必须写上取值，所以在企业开发中我们推荐不省略取值 
  
 性别
男

女

保密
 
 多选框 
 爱好
篮球

足球

棒球

足浴
 
 普通按钮 
  
  可以通过 value 属性来给按钮指定标题 
  作用：配合 JS 完成一些操作
   
  
 图片按钮 
  
  作用：配合 JS 完成一些操作 
  
 
 
 input type="image" src="image/register.jpg" 这里 image 有提交的功能
 重置按钮 
  
  作用:用于清空表单中已经填写好的数据 
  注意点：如果想要修改重置按钮默认的按钮标题可以通过 value 属性来修改 
  
 
 
 提交按钮 
  
  作用：将表单中已经填写好的数据提交到远程服务器 
  注意点：要想把表单中填写好的数据提交到远端服务器必须具备两个条件 
  需要给 form 表单添加一个 action 的属性，通过这个 action 属性指定需要提交到的服务器地址 
  需要给需要提交到服务器的表单元素添加一个 name 属性 
  
 账号：

 
 隐藏域 
  
  作用：配合提交按钮将一些数据默默的悄悄咪咪的提交到服务器，Ajax相关 
  
 
 
 label 标签 
  
  默认情况下文字和输入框是没有关联关系的，也就是说点击文字输入框不会聚焦，如果向点击文字时让对应的输入框聚焦，那么就需要让文字和输入框进行绑定 
  要想让输入框和文字绑定在一起，那么我们可以使用 label 标签 
  绑定格式： 
  将文字利用 label 标签包裹起来 
  给输入框添加一个 id 属性 
  在 label 标签中通过 for 属性和输入框中的 id 进行绑定即可 
  
 账号：
 密码:

 
 datalist 标签 
  
  作用：给输入框绑定待选项 
  datalist 格式： 
  
 
        

 
  
  如何给输入框绑定待选项 
  搞一个输入框 
  搞一个 datalist 列表 
  给 datalist 列表标签添加一个 id 
  给输入框添加一个 list 属性，将 datalist 的 id 对应的值赋值给 list 属性即可 
  
 

        
        
        
        
        

 
 H5新增的表单标签 
 邮箱表单
 可以自动校验输入的内容是否符合邮箱的格式 
 邮箱：
 
 URL表单
 可以自动校验输入的内容是否是 URL 地址 
 域名：
 
 数字表单
 输入框中只能输入数字 
 电话：
 
 日历表单
 可以通过日历来选择日期 
 时间：
 
 取色板表单
 可以通过取色板来选择颜色 
 颜色：
 
 select 标签 
 作用：用于定义下拉列表
 格式： 
 
 
 注意点 
  
  下拉列表不能输入内容，但是可以直接在列表中选择内容 
  可以通过给 option 标签添加一个 selected 属性来指定列表的默认值 
  可以通过给 option 标签包裹一层 optgroup 标签来给下拉列表中的数据分类 
  
 
 
 textarea 标签 
 作用：定义一个多行输入框
 格式： 
 
 
 注意点 
  
  默认情况下输入框可以无限换行 
  默认情况下输入框有自己的宽度和高度 
  可以通过 cols 和 rows 来指定输入框的宽度和高度，但是虽然指定了列数和行数，仍然可以无限往下输入 
  默认情况下输入框是可以手动拉伸的 
  
 fieldset 标签 
 fieldset 标签，可以给表单添加一个边框，legend 标签，可以给边框指定一个标题 
 
        注册界面

HTML5 学习笔记 2017-02-13 am

细线表格

表格标签的其他标签

今日小说排行榜

表格的结构

单元格的合并

表单标签

label 标签

datalist 标签

H5新增的表单标签

select 标签

textarea 标签

fieldset 标签

你可能感兴趣的:(HTML5 学习笔记 2017-02-13 am)