前端开发学习──初识Html

html结构

html 超文本标记语言，它的结构标准如下：

  声明文档类型
  根标签
 头标签
    
     标题标签

  主体标签

html标签

• 单标签

• 注释标签

• 水平线标签

  ---

• 换行标签


• 双标签

• 段落标签

  文本内容

  ，特点：上下自动生成空白行，而
标签换行不会生成空白行

• 标题标签，h1-h6 取值到h6，建议h1标签在一个页面里只能出现一次

• 文本标签 文本内容

• 文本格式化标签：
  1.文本加粗标签 和 ，前者更具语义化
  2.文本倾斜标签 和 ，前者更具语义化
  3.删除线标签 和 ，前者更具语义化
  4.下划线标签 和 ，前者更具语义化

• 图片标签:

• src：图片来源，必写

• alt：替换文本，当图片不显示的时显示的文字

• title：提示文本，当鼠标放到图片上时显示的文字

• width：图片宽度

• height：图片高度
  注：图片没有定义宽高的时候，图片按照百分之百比例显示，如果只更改图片的宽度或者高度，图片等比例缩放

• 超链接标签:

• href：跳转的路径，必写

• title：提示文本，当鼠标放到链接上时显示的文字

• target：_self为默认值，在自身页面打开（关闭自身页面，打开链接页面）；_blank打开新页面 （自身页面不关闭，打开一个新的链接页面）

• 无序列表

        
d
 
        
a
        
c
        
e

type：disc默认 实心小圆圈；square 小方块；circle 空心小圆圈

• 有序列表

        
e
        
re
        
a
        
f

• type:type=”1,a,A,i,I” type的值可以为1,a,A,i,I

• start:start=”2” 决定了开始的位置

• 自定义列表

        
        
帮助中心
        
        
购物指南
        
订单操作
        
账户管理
   
        
        
帮助中心1
        
购物指南2
        
订单操作3
        
账户管理4
  

• meta标签：content 属性始终要和 name 属性或 http-equiv 属性一起使用。

• 搜索关键字，某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类
  

• 网页描述
  

• 网页重定向:5s后跳转到www.baidu.com
  

• link标签

• 链接外部样式表
  

• 设置icon图片
  
  

  

表格

表格由

标签来定义。每个表格均有若干行（由 标签定义），每行被分割为若干单元格（由

单元格合并：colspan=”2” 合并同一行上的单元格;rowspan=”2” 合并同一列上的单元格

内容垂直对齐方式valign="top | middle | bottom"

标题

标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等 标题 1 2 3 4 5 6 7 8 9 10 11 12 table属性： Border=”4” 边框 Width=”300” 宽度 Height=”400” 高 cellspacing=”2” 单元格与单元格的距离 cellpadding=”10” 内容距边框的距离 align=”left | right | center” 如果直接给表格用align=”center” 表格居中，如果给tr或者td使用 ，tr或者td内容居中 bgcolor=”yellow” 背景颜色 bordercolor="red" 边框颜色 表头

标题

1	2	3
4	5	6
7		9
10	11

表单

• 表单域
  
  • action :表单提交的目标地址。
• method :POST 的安全性更加，因为在页面地址栏中被提交的数据是不可见的；GET通过地址栏提供（传输）信息，可见，安全性差
• 输入框

        
        用户名：
        
        

        
        密码：
        
    

• maxlength="6" 限制输入字符长度

• readonly=”readonly” 将输入框设置为只读状态（不能编辑）

• disabled="disabled" 输入框未激活状态

• name="username" 输入框的名称

• value="html" 将输入框的内容传给处理文件

• 单选框

 男
 女

• 只有将name的值设置相同的时候，才能实现单选效果。

• checked=”checked” 设置默认选择项

• 多选框

 1
 2
 3

• 下拉列表

            
                苹果
                香蕉
            
            
                电脑
                冰箱
            


            
                苹果
                香蕉
            
            
                电脑
                冰箱
            

• Multiple=”multiple” 将下拉列表设置为多选项

• Selected=”selected” 设置默认选中项目

• 对下拉列表进行分组， label=“” 分组名称

• 多行文本框
  

• Cols 控制输入字符的长度。

• Rows 控制输入的行数

• 文件上传
  

• 重置按钮
  

• 文件提交按钮

• ,可以实现信息提交功能

• ,不能提交信息，配合JS使用

• ,图片按钮可实现信息提交功能

• 表单信息分组

        

            
分组1
            
        
        

            
分组2
            
            
                苹果
                香蕉
            
            
                电脑
                冰箱
            
        
        

示意图

• 对表单信息分组

• 表单信息分组名称

• 其他表单控件

html特殊字符

特殊字符

标签语义化

好的语义化的网站标准就是去掉样式表文件之后，结构依然很清晰。

• 标签语义化意义：
• 网页结构合理
• 有利于seo:和搜索引擎建立良好沟通，有了良好的结构和语 义你的网页内容自然容易被搜索引擎抓取
• 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）
• 便于团队开发和维护
• 尽可能少的使用无语义的标签div和span；
• 在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
• 不要使用纯样式标签，如：b、font、u等，改用css设置。
• 需要强调的文本，可以包含在strong或者em标签中strong默认样式是加粗（不要用b），em是斜体（不用i）；