HTML基础与使用各种标签


title: "Html"
date: 2019-07-29T15:47:30+08:00


本章内容为:《HTML基础与使用各种标签》

作者:nuoccc

1丶首先我们来了解一下什么是HTML;

  • HTML全称为:Hyper Text Markup Language,翻译为中文就是超文本标记语言。
  • 超文本:除了可以包含文本,还可以包含图片,声音,视频等等资源
  • 标记:HTML文档的元素是以标签对的形式出现的。

2丶介绍完HTML,我们来看看HTML的整体结构:

  • HTML文件的后缀名为.html



  • HTML的语法:<标签>

  • 属性:<标签 属于1=值1 属性2=值2....>,属性与属性之间可以空格隔开

  • HTML的标签可以嵌套

  • 根标签,HTML文档起源的地方,lang属性告诉搜索引擎,这个页面是关于"en"英文的页面

  • 头标签,包含了标签,还可以包含其他的标签,比如引入外部的css样式,外部的javascrpit代码等等</head></p></li> <li><p><meta charset="UTF-8"><meta>为自然结束标签,其中属性charset为指定的字符编码 <meta http-equiv="keywords" content="">告诉搜索引擎这是该页面的关键字<br> <meta http-equiv="description" content="">告诉搜索引擎这是该页面的描速</p></li> <li><p><title>HTML基础及标签使用HTML页面的标题

  • 主体,指整个HTML文档

3丶常用标签使用方式

1)块级标(block element):独占一行,可以设置宽高

  • 分块标签,例:
    测试
    测试
    ,看一下输出图:


    html1.png
  • 例如:
    测试居中
    ,看一下输出图


    html2.png
  • h1~h6:标题标签 例如:

    一号标签

    二号标签

    三号标签

    四号标签

    五号标签
    六号标签
    ,看一下输出图:


    html3.png
    1. -
    2. : 有序列表 ,ol:ordered lists有序列表,li:list item列表项,有序列表可以包含多个li,例如:,看下输出图


      html4.png
    • -
    • :无序列表, ul:unordered lists,li:list item列表项,无序列表可以包含多个li,例如:
    • 一号列表
    • 二号列表
    • ,看下输出图:


      html5.png
    • :段落标签,paragraph

    • :格式化文本,通常用于包含代码

    • --:设置分组,表示分组的名称

    • ----:table row,表格的行,
      :表格标签
      :table data cell,表格的单元格 ,border属性:表格的边框的像素值 cellspacing:单元格的间距 cellpadding:单元格的内边距, 例如:











      1 2 3
      4 5 6

      看下输出图:


      html6.png
    • hr:水平分割线

    • 2)行级标签(inline element):所有元素排在一行,不能设置宽高,高度随着内容的大小变化。

      • :行级实现特殊功能标签
      • :设置字体 例如:这是字体这是字体 看下输出打印:


        html7.png

      3)行级块级标签(inline-block element):所有元素排在一行,但是可以设置宽高

      • :图片标签,属性:src--要显示的图片的位置,alt--如果图片不能正常显示,给出的提示信息,width---图片宽度,height--图片高度,例如:img src="img/chuangwei.jpg" alt="失败",width="200",height="200"> 看下输出打印:


        html11.png

      4)转义字符

      &+nbsp; 空格
      &+lt; less than,小于 <
      &+gt; great than,大于 >
      &+amp; 与符号,"&"
      &+quot; 引号,"
      &+reg; 已注册
      &+copy; 版权
      &+trade; 商标
      我们直接来看下打印输出:


      html12.png

      5)表单

      :表单,是块级标签
      action:指明处理该表单数据的后台服务器组件的地址
      method:请求的方式,分为get方式和post方式
      get:会将表单中填写的内容附加在请求的URL地址后面传递给服务器,只能传少量的数据
      post:会将表单中的内容添加在Form-data中传递给服务器,安全性高,可以传送大量数据,理论上传送的数据无大小限制
      enctype:设置表单的类型
      application/x-www-form-urlencoded:普通表单,默认值
      multipart/form-data:包含文件上传的复合表单

      • type:text单行文本输入框,name为它的名称
        例如:
        看下输出打印:


        html13.png
      • type:password,密码输入框
        例如:


        看下输出打印:
        html14.png
      • type:radio:单选按钮,value:表单元素的值,checked:为默认选中该按钮
        例如:


        看下输出打印:


        html15.png
      • type:checkbox:单选按钮,value:表单元素的值
        例如:
        音乐
        运动
        旅游
        看下输出打印:


        html16.png





      • 看下输出打印:


        html17.png
      • textarea多行文本,cols:包含多少列,rows:包含多少
        例如:

        看下输出打印:


        html18.png
      • type:hidden:隐藏域,不会显示在页面上,但其数据会提交给服务器
        例如:

      • type=submit,提交按钮,value指明该提交按钮上显示的文字,该提交按钮会将用户填写的数据提交到服务器后台,即
        action属性指明的地址
        例如:

        type:reset
        例如:

        看下两个按键的输出打印:


        html19.png

      ​ HTML基础就这些了,其实以上大部分属性和标签已经用不到了,已经被css取代,但是也可以了解一下。

      你可能感兴趣的:(HTML基础与使用各种标签)