前端:HTNL

一.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的规范:
    (1)所有标记元素都要正确的嵌套,不能交叉嵌套。正确写法举例:<h1><font></font></h1>

    (2)所有的标记都必须小写。

    (3)所有的标记都必须关闭。

      双边标记:<span></span>
      单边标记:<br> 转成 <br /> <hr> 转成 <hr />,还有<img src=“URL” />
    (4)所有的属性值必须加引号。<h1 id="head"></h1>

    (5)所有的属性必须有值。<input type="radio" checked="checked" />


  HTML标签的特性:
    1, 对换行不敏感, 对tab不敏感
    2, 空白折叠
    3, <h1-h6>, <p>1, 独占一行; 2, 可以设置宽高,若不设置宽高,继承body的宽高;
      块级标签
    4, <a> 1, 标签在一行内显示: 2, 不能设置宽高, 默认宽高是子弟大小.
    行内标签
    5, 标签严格封闭

  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属性

      

原文地址:https://www.cnblogs.com/123zzy/p/9562436.html