HTML概念及基础语法

HTML

1.1简介

Hyper Text Markup Language 超文本标记语言的缩写。其中,超文本是用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本,标记语言实质是由标签构成的语言。如HTML,xml等,标记语言不是编程语言。总之,HTML是最基础的网页开发语言。

1.2基础语法

  1. html文档后缀名为html或htm;

  2. 标签分为:①围堵标签:有开始标签和结束标签;<html></html>

    ②自闭和标签:开始标签和结束标签在一起,如:<br>

  3. 标签可以嵌套:需要正确嵌套,不能你中有我,我中有你;

  4. 在开始标签中可以定义属性,属性是由键值对构成,值需要用引号(单双引号都行)引起来;

  5. html的标签不区分大小写,不过尽量使用小写。

1.3标签

  1. 文本标签:构成html最基本的标签。

    • html:html文档的根标签;

    • head:头标签。用于指定html的一些属性,引入外部资源;

    • title:标题标签;

    • body:身体标签;

    • ?<!DOCTYPE html>:html5中定义该文档是html文档。
      ?
  2. 文本标签:和文本相关的标签。

    • <hn>(n=1~6):标题标签,从1到6,字体大小逐渐递减;

    • ?<p>:段落标签;</p>
      ?
    • <br>:换行标签;

    • <hr>?:

      :显示一条水平线。属性:①size:高度;②color:颜色;③width:宽度;④align:对其方式:*center(居中),*left(左对齐),*right(右对齐).
      ?
    • <b>:字体加粗;

    • <i>:字体斜体;

    • <font>:字体标签(过时,css中会用到)

  3. 图片标签:<img>:展示图片,属性:src,展示图片的路径;

     

  4. 列表标签:定义列表的标签,大致分为两种:

    1. 有序列表:ol;

      • <li></li>

    2. 无序列表:ul;

      • <li></li>

         

  5. 链接标签:定义链接的标签。

    • a:定义一个超链接;

      1. href:跳转到一个指定的URL;

      2. target:指定打开资源的方式:

        *_self:默认值,在当前页面打开;

        *_blank:在空白页面打开。

  6. 表格标签:定义表格的标签。

    定义表格:</table>

    *width:宽度;

    *border:边框;

    *cellpadding:定义单元格的距离;

    *cellspacing:定义单元格之间的距离,如果指定为0,则单元格之间的线会合为一条。

    <tr>:定义行;

    <td>:定义单元格;

    <th>:定义表头单元格;

  7. 表单标签:用于采集用户输入数据的标签。用于和服务器交互。

    form:用于定义表单,可以定义一个范围,范围代表采集用户数据的范围。

    属性:

    ①action:指定提交数据的URL;

    ②method:指定提交方式(共7种,其中get与post比较常用);

    get:1.请求参数会在地址栏中显示,会封装到请求行中;

             2.请求参数大小是有限制的;

             3.不太安全。

    post:1.请求参数不会出现在地址栏中,会封装在请求体中;

              2.请求参数的大小没有限制;

              3.较为安全。

    7.1表单项标签:

    1.input:可以通过type属性值,改变元素展示方式;

    • text:文本输入框(默认值);

      ①placeholder:占位符,指定输入框的提示信息,当输入框内容发生变化,会自动清空提示信息;

      ②label:指定输入项的文字描述信息,label的for属性会和input的id属性相对应,点击label区域,会让input输入框获取焦点(光标)。

    • password:密码输入框;

    • radio:单选框;

      ps:①要想让多个单选框实现单选效果,则多个单选框的name属性值必须一样;

      ②一般会给每一个单选框提供value值,指定其被选中后提交的值;

      ③cheaked属性,指定默认值。

    • file:文件选择框,可以提交一些文件,比如头像图片等;

    • hidden:隐藏域,用于提交一些界面不想看到的信息;

    • checkbox:复选框;

      ②cheaked属性,指定默认值。

      ① 一般会给每一个单选框提供value值,指定其被选中后提交的值;

    • 按钮:

      ①submit:提交按钮,可以提交表单;

      ②button:普通按钮;

      ③image:图片提交按钮,src属性指定提交图片的路径

    • date:日期选择框(生日);

    • datetime-local:日期选择框(包含时、分);

    • email:邮箱输入框;

    • number:数字输入框(年龄);

    • textarea:文本域;

    ①cols:指定文本域列数,不够的话会自动大;

    ② rows:指定文本域行数,不够的话会自动扩大。

    • select::下拉列表;

    ①option:指定列表项;

     

HTML概念及基础语法

上一篇:项目里出现两个配置类继承WebMvcConfigurationSupport时,为什么只有一个会生效(源码分析)


下一篇:JS用户登录保存账号密码