zoukankan      html  css  js  c++  java
  • 前端: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属性

          

  • 相关阅读:
    随手记十——淘宝静态页面
    随手记九——溢出文字处理、背景图片填充、图片代替文字
    随手记八——关于伪元素和仿淘宝导航栏
    随手记七——关于float的一个上节没明白的问题
    随手记六——两个经典BUG和bfc
    随手记五——盒子模型和层模型
    随手记四——一些课堂笔记和小技巧、总结
    随手记三——理解相邻兄弟选择器的辛酸过程
    随手记二——CSS样式和选择器
    jQuery实现手风琴效果
  • 原文地址:https://www.cnblogs.com/123zzy/p/9562436.html
Copyright © 2011-2022 走看看