前端知识归纳(1)-- HTML基础

目录概览:

一、HTML文档结构

1.声明文档类型。
2. 它包裹了整个完整的页面,是一个根元素。
3. 它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。
4. 它包含你访问页面时所有显示在页面上的内容。

参考资料:

学习Web开发

二、head元素

它里面的子元素主要分为三类,描述网页基本信息的、指向渲染网页所需要的其他文件链接及各大厂商根据自己需要定制的。

参考资料:

  • HTML meta 标签总结与属性使用介绍
  • 移动端重构系列2——新建空白页面

三、字符实体

字符实体.png

参考资料:

HTML Symbol Entities Codes

四、路径指南

本地路径方面,如在磁盘里面访问,Windows 约定使用反斜线 () 作为路径中的分隔符,如"E:\娱乐\音乐\蓝莲花.mp3";而UNIX 系统使用正斜线 (/),如“/users/marvin/music/蓝莲花.mp3”。

五、元素

1.页面间的跳转

当其用于页面之间的跳转时主要有三个常用属性,分别为:

  • title:指链接标题,一般与内容文字一样。鼠标滑过时暂停一会,会有个title提示效果。
  • href:指定链接的目标地址(如果暂时不能确定目标地址可先用#表示)。
  • target:定义打开窗口方式,默认是当前窗口打开,有四种取值,分别为:
    • _self:当前窗口打开,此值为默认值。
    • _blank:新窗口打开(该值是使用最多的)。
    • _parent:表示在当前框架的父框架打开(一般用于iframe中,先不用了解,以后再说)。
    • _top:表示顶层框架打开(一般用于iframe中,先不用了解,以后再说)。

2.页面内的跳转

元素用于页面内的锚点跳转时,应该先为该页面设置一些锚点,而定义锚点有两种办法:
通过
元素的name属性来定义,如:name属性的值就是锚点的名称
通过其他元素的id属性来定义,如:

id属性值可以作为锚点的名称

设置好了锚点之外,就可以通过元素链接到该锚点位置,其href取值为“# + 锚点名称”,示例如下:

锚点链接一
锚点链接二
我这里有很多内容...
点击锚点链接一,会跳到我这里
我这里有很多内容...

点击锚点链接二,会跳转到我这里

3.电子邮件

当其用于邮件链接时,href属性的值为“mailto: + 邮件地址”,示例如下:

 
  
  • height:可选属性,跟width类似,用于设置图片的高度,如height="300"
  • 七、元素

    例子:

    五险一金缴纳
    缴纳项目 个人缴纳 单位缴纳
    养老 8% 14%
    医疗 2% 6.2%
    失业 1% 2%
    工伤 0% 0.4%
    生育 0% 0.5%
    公积金 14% 14%

    八、表单元素

    元素主要有两个属性:

    • action:表示表单数据所提交到的处理地址(如果不知道处理地址,可先用#表示)
    • method:表示提交内容的方式,默认取值为 get,可以设置为 post

    表单元素一般有以下几种通用属性:

    • name:表示字段名称
    • value:表示字段值(最后提交的表单数据就是所有的字段值)
    • disabled:表示字段是否禁用,该属性可以不用设置值,加上该属性即表示禁用
    • readonly:表示字段是否只读,该属性可以不用设置值,加上该属性即表示只读

    元素跟元素一样,不需要闭合标签。除了上面说到的通用属性外,其常见属性如下:

    • type:必备属性,常见取值如下:
      • text:文本输入框
      • password:密码输入框
      • search:搜索框
      • number:数字输入框
      • radio:单选按钮
      • checkbox:复选框
      • hidden:隐藏域(页面不可见,用来保存数据等)
      • file: 上传文件
      • button:普通按钮
      • submit:提交按钮
      • reset:重置按钮
    • placeholder:如为输入框时,可设置该属性,在输入框中灰色显示提示信息

    简单示例如下:

    
    
    
    
    
    
    
    
    
    
    
    
    音乐
    
    
    
    
    
    
    
    
    
    
    



    你可能感兴趣的:(前端知识归纳(1)-- HTML基础)