html语法规则大全(html基础知识总结)

写css样式做web开发的时候,一定要用Html,因为它包含了最基本的网页结构。虽然Html只能帮助我们构建静态网页,但却是我们最不可或缺的部分。如果我们把网页比作房子,那么Htm ......

编写css样式  在做web开发时,我们必不可少的要使用到Html,因为它包含了最基础的网页结构,虽然Html只能帮助我们构建静态网页,但是却是我们最不能缺少的部分,如果把网页比作一个房子,那么Html就是地基,也就是第一件要做的事,可见它的重要性。那么,现在大家就跟随我的脚步去学习下吧。

  要想知道Html的语法规则,首先我们得创建一个以Html为后缀的文件,当然也可以是Htm 或者是XHtml,这里不讲述它们的区别。

  在写Html之前容我给大家介绍一个神器,它拥有所见即所得的神器效果,也就是说有了它,我们可以编写Html代码边看结果,完全不用浏览器,可以说是相当方便,它就是ExHtmlEditor。

  下载解压后即可使用,无需安装,方便快捷。

  下面就让我们通过这个软件来正式敲开Html的大门吧。

  我们经常写文章的时候,常会使用标题,可以发现标题的字体一般比段落的字体要大,因为它要突出整篇文章的核心,用最简短的文字描绘出来。Html中设置标题的相关代码就是

~

,注意一定要写
关闭它们,否则会引发位置的错误。我们常常将这些尖括号里的东西叫做标签,下面我们来看下:

  可以看到,标题的字体越来越小。

  一篇文章除了标题,当然就是一个个段落了,段落中我们常常使用的标签有p标签,写法同上,只是标签名不同而已。

  我们都知道,一个段落里的文字总是比较多的,这就不乏会有一些比较大的引人注目的文字,也会有比较小的文字,更有带颜色的文字。那么这是怎么实现的了,下面我们来看看:

  粗体

  大号字

  着重文字

  斜体字

  小号字

  加重语气

  下标

  上标

  插入字

  删除字

  下划线

  计算机代码

  键盘文本

  计算机代码样本

  打字机代码

  变量

  预格式文本

  缩写

  地址

  首字母缩写

  文字方向

  长引用

  短引用

  引用

  定义项目

  别看着挺多的内容就被吓到了,其实这些东西很好学的,主要是现在的Html编辑器都有自动提示功能,所以你根本不需要记住它们的全称就可以很轻松写出代码来,不过,光是这样还不行。

  当我们写文章时必须要换行,有时候还要使用水平线进行分割才能让文章显得更有层次感,那么该怎么做了,也是很简单的。

  在写代码时难免会写注释,这个时候我们需要写一写注释来说明代码的作用。格式为:

  

  

  我们在浏览网页时点击一个地方的按钮它会跳到另一个地方,那么这就是所谓的链接了。

  一般它用a标签包裹,里面有标签名,标签跳转的地址等信息,我们来看看。

  百度 #可以是一个url地址,点击即可打开百度首页

  百度 #也可以是一个Html文件

  发送邮件#创建电子邮箱链接

  另外,它还可以定义你打开的页面是当前页面还是新的页面或者说是上一个页面:

  百度 #新窗口打卡百度

  百度 #上一个窗口打开百度

  百度 #父窗口打开百度

  百度 #当前窗口打开百度

  它可以快速定位页面中的某些标题,可以通过设置name属性来设置锚链接。

  锚链接创建

  

这是一个锚链接

  为了美化我们的网页,有时候肯定会添加图片,那么该怎样添加图片了,下面请看:

  #我们只需输入图片地址即可,后面两项为鼠标放在图片上显示的内容和图片显示不出来的时候的替代文本

  

  需要在body标签中设置背景为图片地址。

  

  通过点击图片跳转到相应链接页面。

  

  有时候我们也需要插入表格来展示一些数据,表格的制作稍微有点麻烦,不过用Sublime Text 3它可以十分轻松的创建表格。表格一般由表头,表的标题,表的内容组成。最常用的就是Table标签了。

  

  

  

  

  表格标题

  

  

  

  1--one

  2--two

  3--three

  4--four

  

  

  

  

  

  a

  b

  c

  d

  

  

  

  

  

  h

  j

  k

  l

  

  

  

  列表就是我们常常见到的一篇文章的目录,它一般以一种树型状存在着,它可以分为有序列表和无序列表。

  以标签ol为主体,li为父目录,具体表现为:

  

  

  • 任性
  •   

  • 90后
  •   

  • boy
  •   

      

      

  • 90后
  •   

  • boy
  •   

  • 任性
  •   

      

      

  • 90后
  •   

  • boy
  •   

  • 任性
  •   

      

      

  • 90后
  •   

  • boy
  •   

  • 任性
  •   

      

      

  • 90后
  •   

  • boy
  •   

  • 任性
  •   

      

      

  • 90后
  •   

  • boy
  •   

  • 任性
  •   

      可以看出有序列表支持多种排序前缀,它就好比Word中的项目符号一样。

      与有序列表唯一不同的就是没有数字也没有字母,只有图形,也是犹如项目符号一样。

      

        

    • 任性
    •   

    • 90后
    •   

    • boy
    •   

      

        

    • 90后
    •   

    • boy
    •   

    • 任性
    •   

      

        

    • 90后
    •   

    • boy
    •   

    • 任性
    •   

      

        

    • 90后
    •   

    • boy
    •   

    • 任性
    •   

      可以看出无序列表的默认项目符号就是类型就是黑圆圈

      

      

    1

      

    计算机

      

    2

      

    电脑

      

    3

      

    PC

      

      可以看到自定义列表由我们自己定义列表项目符号,项目的内容

      什么是块级元素,其实就是这个元素在进行显示后会换行输出下一个元素,比如我们的P标签,还有Blockquote 标签都是,不过今天我们要说的是Html中运用的最广的块级元素,它就是Div。

      

      

    小花猫

      小色猫

      

      小白猫

      小懒猫

      

      可以看到在Div中的块级元素都换行了,然而内联元素都没有换行。

      和块级元素正好相反,不用换行输出的那种,比如a标签,或者是Big Small这些段落中的文本标签都是内联元素,当然也有例外,比如Pre标签,这里不再细说。今天我们要着重讨论的是Span标签。

      

      

    小花猫

      小色猫

      

      小白猫

      小懒猫

      

      注意:Span标签是没有Align属性的。

      框架是什么?框架就是在一个窗口可以显示多个页面内容的一个容器。框架又分为垂直和水平框架。

      不可与Body标签同时出现

       #设置框架的列占有比例

       #无法调整框架的大小

      

      

      不可与Body标签同时出现

       #设置框架的行占有比例

       #无法调整框架的大小

      

      

      #存在body标签中

      frameborder:是否显示框架周围的边框 0隐藏 1显示

      scrolling:是否显示滚动条 yes显示 no隐藏 auto自动

      width:宽度

      height:高度

      name:锚点名称

      

      fadf

      

      您的浏览器不支持框架

      

      这个算是Html中的重中之重了,因为用的比较多,基本上所有的表单元素都包含在Form标签中。每一个表单中的空间要么独立存在,要么处于Input中,下面我们来详细了解下:

      

      action:处理表单数据的服务器脚本语言(如php)

      method:请求方法 如get post

      accept-charset:提交表单时的字符编码 如utf-8

      target:页面跳转方式

      autoplete:自动完成表单 off关闭 on开启

      enctype:表单数据的编码 如application/x-www-form-urlencoded(默认),multipart/form-data(文件上传),text/plain

      novalidate:浏览器不验证表单

      formtarget 覆盖target属性,用于type='submit'和type='image'。

      formnovalidate覆盖novalidate属性,用于 type='submit'

      formmethod 覆盖method 属性,用于 type='submit'以及type='image'

      formenctype 覆盖enctype属性,用于type='submit'以及type='image',仅针对method='post'的表单

      formaction 提交表单时处理该输入控件的文件的URL

      form 规定input元素所属的一个或多个表单

      autofocus 当页面加载时自动获得焦点

      disabled 输入字段应该被禁用

      max 输入字段的最大值

      maxlength 输入字段的最大字符数

      min 输入字段的最小值

      pattern 通过其检查输入值的正则表达式

      readonly 输入字段为只读

      required 输入字段是必需的

      size 输入字段的宽度

      step 输入字段的合法数字间隔

      value 输入字段的默认值

      multiple 常用于邮箱和文件,可多个上传文件

      placeholder 提示用户该如何正确输入

      之所以现在讲这个,是不想一开始就长篇大论,增加一些没必要的修饰,免得扰乱学习的进度。

      我们都知道Html,既然是Html,怎么可以没有Html标签了,当然是有的,只是我一开始没有写罢了,当然也可以不用写,不过为了美观为了不出错,建议写上。浏览器标题在浏览器头部里面被它包裹着。

      

       浏览器头部

      浏览器标题

       规定所有链接的默认地址

       引入外部css文件

      

      设置浏览器内容类型为Html,编码为utf-8

       五秒刷新

       五秒后跳转到百度

       设置搜索关键字 SEO

      http-equiv 浏览器的内容头部

      content-type 内容类型

      expires cookie过期时间

      refresh 刷新

      set-cookie 设置cookie

      charset 编码

      name 一般做搜索关键词

      author 作者

      description 页面描述内容

      keywords 关键词

      generator 生成器

      revised 修改后的值

      others 其它

      scheme 用于翻译网页文本的格式

      http https 协议

      YYYY-MM-DD 日期格式

      

      编写css样式

      

      

      浏览器主体内容

      

      

      在Html中也是可以播放音频和视频的,不过这项功能添加在了Html最新版5.0版中的,下面来看看:

      比如说我们经常熟知的Mp3,Wav,可以通过Audio标签来进行播放。

       还可播放Flash动画 只需将src属性中的内容换位1.swf即可,不过得先保证你有1.swf这个文件

      

       h5中的标准,带有播放控制按钮 支持mp3 wav wma等格式

      

      

      播放

      

      

       支持MP4 avi wmv flv格式播放

      

      

      播放

      可以帮我们省去一些不必要的排版标签,利用新式布局标签会显得更加专业,而且代码量更少。

      header 页眉

      nav 导航

      section 文档中的节

      article 独立的自包含文章

      aside 侧栏

      footer 页脚

      details 额外的细节

      summary details的标题

      

      

    CCTV

      

      

      CCTV-1

      CCTV-2

      CCTV-3

      

      

      

    新闻联播

      

      大家好,欢迎来到新闻联播。下面请看简讯

      

      

      一男子每天靠摆地摊赚钱,这是怎么回事呢?

      

      

      

      

    其它简讯

      

      后浪们,摆摊吧~

      

      

      摆摊入门知识

      

      

      

      商务合作www.这你都信.

      

      可以看到,文章结构紧凑,排版更加让人觉得一目了然。

      虽然Html总体来说,可能难度不是很大,但是要想学好,也不是一件容易的事,把一件小事做好,定能出彩。