HTML学习笔记（2）

1 head标签中的结构

1. 编码结构：

• charset---编码
• ascll
• ansi
• Unicode
• guk --- 中文
• gb2312 ---中文
• big5 --- 繁体中文
• UTF-8 --- 全世界180多个国家语言（通用字符集）

1. 关键字keywords
   

2. 网页描述description
   

3. 网页重定向refresh
   

4. 链接外部样式表文件
   

5. icon图标
   

6. 其他属性：
   告诉搜索引擎你的站点的制作的作者

• cOntect= "all|none|index|noindex|follow|nofollow"
• 其中的属性说明如下：
  • 设定为all：文件将被检索，且页面上的链接可以被查询；
  • 设定为none：文件将不被检索，且页面上的链接不可以被查询；
  • 设定为index：文件将被检索；
  • 设定为follow：页面上的链接可以被查询；
  • 设定为noindex：文件将不被检索，但页面上的链接可以被查询；
  • 设定为nofollow：文件将不被检索，页面上的链接可以被查询。

3 表格

展示数据，是对网页重构的一个有益补充。

        
                  
张三
        
12
        
哈哈哈
    
    
        
李四
        
09
        
呵呵呵
    

• 属性

1. border="1" 边框
2. 宽度
3. 高度
4. cellspacing="20" 单元格与单元格的距离
5. cellpadding="20" 内容距边框的距离
6. align="left | right | center" 如果直接给表格用align="center" 表格居中；如果给tr或者td使用align="center" ，tr或者td内容居中；
7. bgcolor=”red” 背景颜色。

1. 表格的标准结构

2. 表头和单元格合并

     
表头
     
        
张三
                
前端工程师
    
    
        
张三
        
21
            
    
        
张三
        
21
        

3. 表格标题、边框颜色、内容垂直对齐

• 表格标题：th 与td用法一样：对标题文字自动加粗并水平居中对齐

  
  张三
  21
  前端工程师
  

• 边框颜色：bordercolor="red"

• 内容的垂直对齐方式：valign="top | middle | bottom" 靠上|中|下

4. 表单：搜集信息

• 表单的组成：

1. 提示信息
   • 昵称
   • 密码
   • 确认密码
   • ...

2. 表单控件

3. 表单域
   • from action="1.php" method="get"
   • 属性：action
   • method="get|post"
   • get:通过地址栏提供（传输）信息，安全性差
   • post:通过1.php来处理信息，安全性高
4. 文本输入框
   • input type="text" name="username"
   • maxlengt="6" 限制输入字符长度
   • readOnly="readonly" 将输入框设置只读状态
   • disabled="disabled" 输入框未激活状态
   • name="username" 输入框的名字
   • value="前端" 将输入框的内容传给处理文件
5. 密码输入框
   • input type="passward" name="pwd"
   • 文本输入框中的所有属性对密码输入框都有效
6. 单选框
   • 男
   • 只有将name的值设置相同的时候，才能实现单选的效果
   • checked="checked" 设置默认选中项
7. 下拉列表
   • select
     • option下拉列表的选项/option
     • option下拉列表的选项/option
   • /select
   • multiple="multiple" 下拉列表设为
   • selected="selected"
8. 多选框
   • input type="checkbox" checked="checked"
   • checked="checked" 设置默认选中项
9. 多行文本框
   • textarea cols="30" rows="10"
   • cols="30" 控制字符输入长度
   • rows="10" 控制输入行数
10. 文件上传控件
    • input type="file"
11. 文件提交按钮
    • input type="submit" ---可以实现提交功能
12. 普通按钮
    • input type="button" value="普通按钮" --- 不能实现提交功能，配合js使用
13. 图片按钮
    • input type="image" src="按钮.jpg" ---图片按钮可实现提交功能
14. 重置按钮
    • input type="reset" ---将信息重置到默认状态
15. 表单信息分组
    • fieldset legend分组信息/legend /fieldset
    • fieldset /fieldset ---对表单信息进行分组
    • legend /legend ---表单信息分组名称
16. HTML5新特性
    • input type="url" 网址控件
    • input type="date" 日期控件
    • input type="time" 时间控件
    • input type="email" 邮件控件
    • input type="number" step="2" 数字控件 step---步长
    • input type="range" step="10" 滑块控件 step---步长

5. 标签语义化

• 标签语义化概念：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）
• 标签语义化意义：

1. 网页结构合理
2. 有利于seo:和搜索引擎建立良好沟通，有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取；
3. 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）
4. 便于团队开发和维护

• 好的语义化的网站就是去掉样式表文件之后，结构依然很清晰。
• 注意事项：

1. 尽可能少的使用无语义的标签div和span；
2. 在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
3. 不要使用纯样式标签，如：b、font、u等，改用css设置。
4. 需要强调的文本，可以包含在strong或者em标签中strong默认样式是加粗（不要用b），em是斜体（不用i）；