• HTML介绍


    HTML是什么?

    即超文本标记语言,超文本:就是指页面内可以包含图片、链接、甚至音乐、程序等非文字元素。

    标记语言:标记(标签)构成的语言。

    网页==HTML文档,由浏览器解析,用来展示的

    静态网页:静态的资源,如xxx.html

    动态网页:html代码是由某种开发语言根据用户请求生成的

    html文档树形结构

    什么是标签?

    • 由一对尖括号包裹的单词构成,例如: <html> *所有标签中的单词不可能以数字开头.
    • 标签不区分大小写。<html>和<HTML>推荐使用小写
    • 标签分为两部分:开始标签<a>和结束标签</a>.两个标签之间的部分,我们叫做标签体
    • 有些标签功能特别简单,使用一个标签即可。这种标签叫做自闭和标签。例如:<br/>,<hr/>,<input/>,<img/>
    • 标签可以嵌套,但不可以交叉嵌套。

    标签的属性

    • 通常是以键值对的形式出现,例如name="alex"
    • 属性只能出现在开始标签和自闭和标签中
    • 属性名字全部小写,属性值必须用双引号或单引号包裹
    • 如果属性和属性名完全一样,直接写属性名即可,eg. readonly

    head标签

    <meta>

      meta标签的组成:meta标签共有两个属性,它们分别是http-equiv属性和name属性,不同的属性又有不同的参数,这些不同的参数就实现了不同的页面功能。

      1、name属性主要用于描述页面,与之对应的属性值为content,content中的内容主要搜索引擎机器人查找信息和分类信息用的。

      2、http-equiv顾名思义,相当于http的文件开头,它可以向浏览器传回一些有用的消息,以帮助正确和精确的显示页面内容,与之对应的属性值为content。

    body标签

    一、基本标签(块级标签和内联标签)

    1 <hn>:n的取值范围是1-6;从大到小,用来表示标题
    2 <p>: 段落标签,包裹的内容被换行,并且上下内容之间有一行空白。
    3 <b>,<strong>: 加粗标签
    4 <strike>: 为文字加上一条中线
    5 <em>:文字变成斜体
    6 <sup><sub>: 上角标和下角标
    7 <br>: 换行
    8 <hr>: 水平线
    9 <div><span>

    块级标签:<p> <h1> <table> <ol> <ul> <form> <div>

    内联标签:<a> <input> <img> <sub> <sup> <textarea> <span>

    block块元素的特点 

    • 总是新行上开始
    • 宽度缺省是它的容器的100%,除非设定一个宽度
    • 它可以容纳内联元素和其他元素

    inline元素的特点

    • 和其他元素都在同一行上
    • 宽度就是它的文字或图片的宽度,不可改变
    • 内联元素只能容纳文本或者其他内联元素

    特殊字符

      &lt;&gt; &quot; &reg

    二、图形标签<img>

     

    src:要显示图片的路径
    alt:图片没有加载成功时的提示
    title:鼠标悬浮时的提示信息
    width:图片的宽
    height:图片的高

     

    三、超链接标签(锚标签)

    href:要链接的资源路径 格式如下: href="http://www.baidu.com"
    
    target: _blank: 在新的窗口打开超链接。 框架名称:在指定框架中打开链接内容
    
    name: 定义一个页面的书签
    
    用于跳转 href: #id

    四、列表标签

    <ul>:无序列表
    
    <ol>:有序列表
             <li>:列表中的每一项
    
    <dl>:自定义列表
              <dt> 列表标题
               <dd> 列表项

    五、表格标签

    border: 表格边距
    cellpadding: 内边距
    cellspacing: 外边距
    width:像素 百分比 
    
    <tr>:table row
                <th>: table head cell
                <td>: table data cell
    
    rowspan: 单元格竖跨多少行
    colspan: 单元格横跨多少列(即合并单元格)  

     六、表单标签<form>

      表单用于向服务器传输数据

      表单能够包含input元素,比如文体字段、复制框、单选框、提交按钮等等。

      表单还可以包含textarea、select、fieldset和label元素

    1、表单属性

      HTML表单用于接受不同类型的用户输入,用户提交表单向服务器传输数据,从而实现用户与Web服务器的交互。表单标签,要提交的所有内容都应该在该标签中。

      action:表单提交到哪,一般指向服务器段一个程序,程序接收到表单提交过来的数据(即表单元素值)作相应的处理,比如https://www.sogou.com/web

      method: 表单提交的方式 post/get 默认取值 就是get(信封)

          get: 1、提交的键值对,放在地址栏中url后面  2、安全性相对较差  3、对提交内容的长度有限制

          post:1、提交的键值对 不在地址栏  2、安全性相对较高  3、对提交内容的长度理论上无限制

          get/post 是两种常见的请求方式

    2、表单元素

    type:    text    文本输入框
                password    密码输入框
                radio    单选框
                checkbox    多选框
                submit    提交按钮
                button    按钮(需要配合js使用)
                file    提交文件:    form表单需加上属性 enctype="multipart/form-data"
    
    name:    表单提交项的键,注意和id属性的区别:name属性是和服务器通信时使用的名称,而id属性是浏览器端使用的名称,该属性主要是为了方便客户端,而在css和javascript中使用的
    
    value:    表单提交项的值,对于不同的输入类型,value属性的用法也不同
    
    checked:    radio和checkbox默认被选中
    
    readonly:    只读 text和password
    
    disabled:    对所有input都好使

    上传文件注意两点:

    1、请求方式必须是post

    2、enctype="multipart/fprm-data"

    <textarea>文本域

    name:    表单提交的键
    
    cols:    文本域默认有多少列
    
    rows:    文本域默认有多少行

    block块元素的特点 

  • 相关阅读:
    I.MX6 busybox set hosname and login with root
    Linux busybox mount -a fstab
    MDEV Primer
    qtcreator cannot find -lts
    I.MX6 linux Qt 同时支持Touch、mouse
    Android ashmem hacking
    I.MX6 Android U-blox miniPCI 4G porting
    Android service binder aidl 关系
    OK335xS psplash 进度条工作原理 hacking
    设置Android默认锁定屏幕旋转
  • 原文地址:https://www.cnblogs.com/lzf23/p/11665925.html
Copyright © 2020-2023  润新知