zoukankan      html  css  js  c++  java
  • HTML 初学整理

    一、HTML简介

    HTML的概念

    HTML是HyperText Markup Language(超文本标记语言)的简写,超文本标记语言,标准通用标记语言下的一个应用。
    “超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。
    超文本标记语言的结构包括“头”部分(英语:Head)、和“主体”部分(英语:Body),其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容。

    二、一个完善HTML的基本元素组成

    图片描述

    1、 DOCTYPE

    HTML5文档类型: <!DOCTYPE html>

    2、 <html>

    Html的根元素,用来包含html文档的所有元素
    

    3、 <head>

    包含在头部的内容不会被显示的页面中,这里通常包含页面的编码,作者,页面的描述信息,js的导入,css的导入等信息。
    

    4、 <meta charset="utf-8">

    用来声明当前文档的编码方式为utf-8
    

    5、 <title>

    用来声明当前文档的标题,标题将会出现在浏览器的选项卡中

    6、<body>

    所有想要显示在浏览器中的元素都被包含在该元素中。
    

    三、 HTML元素

    1)行内元素

    1. 与其他行内元素共享一行空间
    2. 默认清下,宽度和高度都由其内容所决定
    3. 不能为其指定宽和高
    4. 行内元素只能容纳文本或其他行内元素
    5. 设置行内元素,需要注意如下
      (1)设置宽度 width 无效。
      (2)设置高度 height 无效,但可以通过 line-height 来设置(当line-height = 行高时,显示上下居中)。
      (3)设置 margin 只有左右有效,上下无效。
      (4)设置 padding 只有左右有效,上下无效。注意元素范围是增大了,但是对元素周围的内容是没影响的。
    6. HTML常用行内元素
      (1)<span></span>无意义的行内元素
      (2)<a></a> 超链接
      (3)<img> 图片

    2)块级元素

    1. 独占一行空间
    2. 默认情况下,宽度占满整个父元素,高度由其内容决定
    3. 可以为其宽和高
    4. 块级元素可以容纳行内元素和其他块级元素
    5. HTML常用块级元素
      (1)<div></div> 无意义的块级元素
      (2)h1~h6 标题
      (3)<ul> 无序列表   <li> 列表项
      (4)<ol> 有序列表   <li> 列表项
      (5)<dl> 定义列表   <dl> 列表标题   <dd> 列表项
      (6)<p> 段落

    3)其他元素

    1. table

    caption 表格标题

        thead     表格的头部
            tr
                th / td     
        tbody (不可以省略的)    表格的体部
            tr
                td / th
        tfoot     表格的尾部
            tr
                td
                
    
        table属性
            border    边框线宽度,默认为0
            cellspacing    单元格之间的间距,默认为1
            cellpadding 单元格的内边距,文字距离单元格边框的距离
            width     宽度
            align     表格的排列方式
                center
                left        默认
                right
            
            colspan     跨列,向右跨
            rowspan     跨行,向下跨
    
            注意:每一行的列数在计算(rowspan,colspan)之后应该是相等的。如果不等,表格就会破裂
            

    2. form

    form 属性

    • action url后台服务地址
    • method 方法 GET POST put delete (REST)
    • enctype 编码格式

    input 属性

    - value
    - name
    - type     
        - text
        - password
        - radio 
        - checkbox
        - file
        - submit
        - reset

    select>option

    <select name="" id="">
        <option value=""></option>
        <option value=""></option>
        <option value=""></option>
    </select>

    textarea
    多行文本域
    属性      cols 列      rows 行

    H5中form的新特性(浏览器支持程度不高,不可靠)

    1) 新增的表单元素
        progress      进度条
        output        计算输出
        meter         刻度条
        datalist      下拉列表
    2) input的type属性值
        search    搜索框     placeholder    提示输入内容
        日期相关
            date
            time
            datetime
            month
            week
        功能相关
            email
            url
            tel
    3) 提交按钮上新增的属性(记忆)
        <input type="submit">
        formaction
        formmethod
        formenctype
        formtarget
    
    未完待续. . .
  • 相关阅读:
    Android 源代码解析 之 setContentView
    poj 2484 A Funny Game
    BlueDroid代码分析之GKI
    Chromium多线程模型设计和实现分析
    关于template 的23个问题
    Struts2 动态结果集
    沁园春&#183;咏史
    android中常见的内存泄漏和解决的方法
    Spring整合freemarker发送邮件
    [struts2学习笔记] 第三节 创建struts 2 HelloWorld所需的六个步骤
  • 原文地址:https://www.cnblogs.com/10manongit/p/12818670.html
Copyright © 2011-2022 走看看