zoukankan      html  css  js  c++  java
  • 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块元素的特点 

  • 相关阅读:
    leetcode 673. 最长递增子序列的个数 java
    leetcode 148. 排序链表 java
    leetcode 98. 验证二叉搜索树 java
    leetcode 29. 两数相除 java
    leetcode 234. 回文链表 java
    Valid Palindrome LeetCode Java
    Single Number II LeetCode Java
    Single Number LeetCode java
    Search in Rotated Sorted Array II LeetCode Java
    Search in Rotated Sorted Array leetcode java
  • 原文地址:https://www.cnblogs.com/lzf23/p/11665925.html
Copyright © 2011-2022 走看看