前端之HTML

一.HTML定义:

  HTML超文本标记语言,是一种创建网页的语言,它不是一种编程语言,使用标签来描述网页

  Web服务本质:  浏览器发请求-->HTTP协议-->服务端接受请求-->服务端返回响应-->服务端把HTML物件内容发给浏览器-->浏览器渲染页面

二.HTML标签的结构

  HTML的结构

    head-->给浏览器看的内容

      title-->定义网页标题

      style-->定义内部样式表(CSS样式)

      link-->引入外部样式表文件CSS文件

      script-->定义JS代码或引入外部JS文件

      meta-->定义网页原信息

        <meta charset="UTF-8">
        <meta http-equiv="refresh" content="2;URL=https://www.baidu.com">

    body-->给用户看的

  HTML标签的语法:

    <head 属性1 =值1 属性2 = 值2></head>

    <body></body>

    <meta>

三.Body标签中的常用标签

  1.常用标签的分类

    块级元素与行内元素的区别:所谓块元素,是以另起一行开始渲染的元素,行内元素则不需另起一行

    1>独占一行的(块级标签)

      1.h1~h6   标题标签

      2.p    段落标签

      3.div   定义一个块级元素,并无实际意义

      4.hr   一条单纯的横线

      5.li    无序列表 

      6.tr   

    2>在一行显示的(行内标签/内联标签)

      1.a    网址标签

      2.span  定义内联(行内)元素,并无实际意义

      3.img  引入图片

      4.b / i / u / s   加粗/斜体/下划线/删除

  2.标签的嵌套

    标签可以嵌套标签

    注意事项

      1.尽量不要用内联标签包块级标签

      2.p标签不能嵌套p标签

      3.p标签不能嵌套div标签

  3.获取用户输入的标签

    1.form标签

      一个容器,包住所有获取用户输入的标签

      -action属性  规定向何处提交表格的地址

      -method属性  规定在提交表格时所用的HTTP方法(默认:GET)

      -enctype属性  规定被提交数据的编码(默认:url-encoded)

    2.input标签

     type

      text  --> 单行输入文本<input type=text" />

      password  -->  密码输入框<input type="password"  />

      email

      date  -->  日期输入框<input type="date" />

      checkbox  -->  复选框<input type="checkbox" checked="checked"  />

      radio  -->  单选框<input type="radio"  />

      button --> 普通按钮  -->  通常用JS给它绑定事件<input type="button" value="普通按钮"  />

      submit  -->  提交按钮  -->  默认将form表单的数据提交<input type="submit" value="提交" />

      reset  -->  重置按钮  --->  将当前 form中的输入框都清空<input type="reset" value="重置"  />

    3.select标签

      multiple:布尔属性,设置后为多选,否则默认单选

      disabled:禁用

      selected:默认选中该项

      value:定义提交时的选项值

    4.textarea标签(多行文本)

      name: 名称

      rows: 行数

      cols: 列数

      disabled: 禁用

    5.form表单提交数据的注意事项

      {'k1':'v1'}

      1:form标签必须把获取用户输入的标签包起来

      2.form不是from form标签必须有action属性和method

      3.form中的获取用户输入的标签必须要有name属性

 

      

 

posted @ 2018-08-30 17:32  JanWong  阅读(126)  评论(0编辑  收藏  举报