美文网首页
HTML基础知识

HTML基础知识

作者: 张氏小毛驴 | 来源:发表于2022-03-31 16:01 被阅读0次

    一.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:默认多少行

    相关文章

      网友评论

          本文标题:HTML基础知识

          本文链接:https://www.haomeiwen.com/subject/nvqsjrtx.html