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
    
    未完待续. . .
  • 相关阅读:
    hdu 5101 Select
    hdu 5100 Chessboard
    cf B. I.O.U.
    cf C. Inna and Dima
    cf B. Inna and Nine
    cf C. Counting Kangaroos is Fun
    Radar Installation 贪心
    spfa模板
    Sequence
    棋盘问题
  • 原文地址:https://www.cnblogs.com/10manongit/p/12818670.html
Copyright © 2011-2022 走看看