四时宝库

程序员的知识宝库

WEB前端工程师开发零基础入门教程.HTML5教程学习

第一章html常用标签

1.HBuilder的使用

项目管理器找不到怎么办?

答:快捷键F9,或者视图--》显示视图--》项目管理器

如何预览自己的项目?

答:ctrl+p预览与编辑进行切换

如何修改HBuilder的编码方式?

答:工具-》选项-》常规-》工作空间-》编码方式设置

小普及:

ASCII编码:用来表示英文,它使用1个字节表示,其中第一位规定为0,其他7位存储数据,一共可以表示128个字符。

拓展ASCII编码:用于表示更多的欧洲文字,用8个位存储数据,一共可以表示256个字符

GBK/GB2312/GB18030:表示汉字。GBK/GB2312表示简体中文,GB18030表示繁体中文。

Unicode编码:包含世界上所有的字符,是一个字符集。

UTF-8:是Unicode字符的实现方式之一,根据不同的符号而变化字节长度。


2. HBuilder的建立项目

3. 什么是网页?什么是网站?什么是静态网页?什么是动态网页?

4. 网页和浏览器的关系

5. 网页的基本结构

--》这是根标签

--》是头,头部包含标题,元信息,样式和脚本

--》是身体,网页上面呈现的内容都是写在body里面



"http://www.w3.org/TR/html4/strict.dtd">


引用的哪种文档类型定义,必须声明在html标签的前面

注意:标签写的时候,不注意区分大小写;

标签都是成对出现,开始标签,闭合结束标签;

6. head具体讲解

title是网页的标题

使用记事本:

最常见的两种:ANSII(Windows系统里的中文编码) gb2312 utf-8

注意:用什么编码方式写的就用编码方式呈现;

7. 常用的标签

标题标签

--

段落标签

换行标签

格式化标签

    [order list]:type可以改变序列编号 1 a I

  1. [list item]

      [unorder list] :type =" circle(空心的圆圈) square(实心的方块) disc(实心的圆圈)"

      :
      -->description list--》自定义格式标签
      title
      description


      -->预定义格式标签 就是在源码里是什么格式在页面显示的就是什么格式

      分割线


      文本标签

      格式:加粗b-->bold 倾斜i-->italic 下划线u-->underline 上标sup-->superscript 下标 sub-->subscript

      文字

      图像标签

      图片格式:bmp--》windows位图,用于电脑墙纸

      GIF--》动图

      jpeg或jpg--》最常用的图片格式,网络支持,文件尺寸小,下载速度

      png--》支持性不强

      src-->这是相对路径

      相对路径:目标相对于当前文件的路径;

      绝对路径就是包含盘符的就是绝对路径;


      相对路径就是相对于html文件的路径;

      width--》宽度 height--》高度

      align--》用来控制带有文字包围的图像的对齐方式

      left right bottom Middle top

      例子

      中文名:刘翔

      别名:飞翔人

      运动项目:田径110米栏杆运动员

      刘翔是中国田径一级运动员。

      2004年雅典奥运会上以12.91秒的成绩平了保持11年之久的世界纪录;

      东亚运动会田径男子110米决赛中,成就了“三冠王”。

      2011年刘翔成为中国人民政治协商会议第十一届全国委员会委员。

      2011年4月初,教练孙海平表示刘翔的起跑技术已经从原先的八步改为七步上篮,

      刘翔首次试七步上篮技术,以13秒07的成绩力压美国名将大卫,奥利弗获得冠军


      超链接标签

      超链接到某个网站地址;

      超链接到某个页面;

      超链接到某个锚点:本页面锚点 跨页面锚点


      扩展知识点:

      behavior:

      alternate /??:lt?ne?t;(for adj.)?:l?t?:n?t/ 行为交替

      scroll 单向滚动

      slide 滚动一次


      direction:设置滚动的方向(left right down up)

      如果在标签中同时出现了direction和behavior属性,那么scroll和slide的滚动方向将依照direction属性中参数的设置。


      loop:设置循环的次数,不设置,或者是负值的话默认是无限次



      第二章 表格与表单

      1. 表格的作用

      整齐的在页面上显示各个元素;同时可以固定页面元素的位置;

      2. 表单的作用

      网页上的注册,就是通过表单元素的提交,把用户的基本信息保存到数据库里,下次用户登陆的时候,可以从数据库里拿出用户信息,然后进行比较,如果比较相等则登陆成功,如果比较发现不相等则说明该用户还么有注册,则需要注册后再登陆;

      这也就是交互性

      3. 表格

      (1) 表格的基本结构

      根标签--》>

      行标签-->tr【table row】标签必须放在根标签里

      里面,有几行就有几对tr标签;

      单元格标签--》td【table data】该表格有几列,就有几对td,注意td一定要放在tr里面

      标题--》caption,注意必须紧挨着table标签,一个表格只有一个caption标签

      表头--》th【table head】加粗并且居中

      (2) 表格的属性

      宽--》width

      高--》height

      边框--》border

      背景图片--》background

      背景颜色--》bgcolor

      居中-->align left right center注意:如果设置在table标签上,则是表格的对齐方式,如果设置在tr,td上则是文本的对齐方式

      单元格的背景可以覆盖掉行的背景覆盖掉表格的背景

      (3) 跨多行跨多列

      跨多列:colspan

      跨多行:rowspan

      (4) 表格的嵌套

      4. 表单

      表单的结构

      form标签的属性

      action:填写的是该表单填写完毕后要提交的目的地;

      method:get/post: get方式能够把要提交的内容显示到URL后面;

      post方式不可以把提交的内容显示到URL的后面,所以说更加安全;

      method-》方式,方法;表单提交的是什么;常用的form表单元素

      1. 单行文本框:

      type-->指定具体是什么元素;

      name-->指定该元素的名字,用来区别提交的信息;


      value-->用来指定初始默认的值;

      size-->用来指定文本框显示字符的长度;比如说size = 5 代表最多显示5个字符;

      maxlength->用来指定最多能输入多少个;比如说maxlength = 4代表最多只能输入4个字符

      2. 密码框

      3. 多行文本框

      rows-->指定高度;cols-->指定宽度;col->column 列越多越宽,行越多越高;

      4. 单选按钮

      注意:

      单选按钮是一组相互排斥的值

      单选按钮的name必须一样;

      当我选中的时候,提交给服务器的就是sex = '男'(value)

      5. 复选框

      游泳

      读书

      睡觉

      玩游戏

      跑步

      购物


      复选框的name也必须一样;提交给服务器的是选中的复选框的value值;

      6. 下拉列表框

      select提交的值就是选中的复选框的value值

      7. 文件域

      8. 按钮

      提交按钮本身自带提交动作;

      本身自带重置的动作;

      普通按钮不带有任何动作;

      图片按钮也具有提交的功能;对value没有任何效果;

      发表评论:

      控制面板
      您好,欢迎到访网站!
        查看权限
      网站分类
      最新留言
        友情链接