HTML基础知识

一.HTML基础知识

  1. 概念

    HTML,全称为:Hyper Text Markup Language 超文本标记语言。

    标记语言就是一套标记标签,HTML就是使用标签来描述网页的。

    标记语言并不是编程语言。

  2. 标签

    • HTML标签是由尖括号包围的,比如<html>,</html>

    • 标签可分为两类:

      一类是成对出现的,比如<div></div>,称为开始标签和结束标签

      一类是单独出现的,比如</br>

    • 开始标签中可以定义属性,属性是由键值对构成的,值需要使用引号引起来(单引号双引号都可以),但以后一般不在标签中定义属性,一般使用CSS

    • 标签不区分大小写,但一般建议使用小写。

二.标签学习

  1. 注释

    <!-- 注释内容 -->

  2. 文件标签

    • html

      html页面的根标签

    • head

      头标签,用于指定html页面的一些属性,以及引入外部资源,如<meta charset="utf-8">定义网页编码格式为utf-8

    • title

      标题标签(会在浏览器的标题出现)

    • body

      定义文档的主体,也就是网页可见的页面内容

    • <!DOCTYPE html>

      html5中定义该文档是html文档

  3. 文本标签

    • <h1> - <h6>

      标题标签,从h1到h6,字体依次递减

    • <p>

      paragraph,段落的缩写,段落标签

    • <br>

      换行标签

    • <hr>

      显示一条水平线

      属性有:

      • color:颜色
      • width:宽度
      • size:高度
      • align:对齐方式
        • center:居中对齐
        • left:左对齐
        • right:右对齐
    • <b>

      字体加粗

    • <i>

      字体倾斜

    • <font>

      字体标签

    • <center>

      文本居中

      属性有:

      • color:颜色
      • size:大小
      • face:字体
  4. 图片标签

    • <img>

      属性:

      • src:指定图片的位置
  5. 列表标签

    • 有序列表
      • ol
      • li
    • 无序列表
      • ul
      • li
  6. 链接标签

    • a

      定义一个超链接

      属性:

      • href:指定访问的url
      • target:指定打开url的方式
        • _self:默认值,在当前页面打开
        • _blank:在空白页面打开
  7. div和span

    • div

      块级标签,每一个div占满一整行

    • span

      行内标签,文本信息在一行展示

  8. 表格标签

    • <table>

      定义表格,表格内容包裹在<table></table>中间

      属性有:

      • width:宽度
      • border:边框
      • cellpadding:定义内容和单元格的距离
      • cellspacing:定义单元格之间的距离
      • bgcolor:背景色
      • align:对齐方式
    • tr

      定义表格的行

      属性有:

      • bgcolor:背景色
      • align:对齐方式
    • td

      定义表格的列

      属性有:

      • colspan:合并列
      • rowspan:合并行
    • th

      定义表格的标题栏,文字会加粗

    • <caption>

      定义表格的标题,会在表格的顶部显示出来

    • <thead>

      创建单独的表头

    • <tbody>

      表示表格的主体

    • <tfoot>

      创建一个单独的表格页脚

  9. 表单标签

    • form

      用于定义表单,采集用户数据。

      属性:

      • action:指定提交数据的URL

      • method:提交的方式

        比较常用的两种是:get和post

      表单项中的数据想要被提交,必须指定其name属性

    • input

      可以通过type属性,改变元素的显示样式

      type属性:

      • text:文本输入框

        • placeholder:指定输入框的提示信息。
      • password:密码输入框

      • radio:单选框

        注意点:

        • 要想多个单选框实现单选效果,则多个单选框的name属性必须一样
        • 一般会给每一个单选框提供value属性,指定被选中后提交的值
        • check属性,可以设置默认选中值
      • checkbox:复选框

        注意点:

        • 一般会给每一个单选框提供value属性,指定被选中后提交的值
        • check属性可以设置默认选中值
      • file:文件选择框

      • hidden:隐藏域,用于提交一些信息

      • 按钮:

        • submit:提交按钮,用于提交表单
        • button:普通按钮
        • image:图片提交按钮
      • label:指定输入项的文字描述信息

        lable的for属性一般会和input的id属性值对应,一旦对应了,点击label,input输入框就会获得焦点

      • select:下拉列表

        子元素:option,指定列表项

      • textarea:文本域

        属性:

        • cols:指定列数,也就是每一行有多少个字符
        • rows:默认多少行
posted @ 2020-03-11 11:41  小毛驴Lucas  阅读(201)  评论(1)    收藏  举报