一、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

未完待续. . .

HTML 初学整理的更多相关文章

  1. React 初学整理

    1,通过createElement创建元素 HELLO Word ps:切记组建名称首字母大写 2,虚拟DOM 在虚拟DOM上操作 通过render来渲染真是DOM 3,JSX JSX 是对JS的语法 ...

  2. Swift初学有一点难理解的东西，整理了一下，想明白了。

      func makeIncrementer() -> (Int -> Int) {      func addOne(number: Int) -> Int {           ...

  3. 有关CLR的初学小整理2(可能理解不深刻，望大牛指出)

    针对原文有用的段落,写一写自己的理解,注释: 1. 托管exe文件被启动的时候,首先被PE Loader载入.PE Loader载入exe文件之后,会分析PE文件头的data directory ta ...

  4. 有关CLR的初学小整理(可能理解不深刻，望大牛指出)

    1. .Net程序通过CLR去加载运行管理代码, 加载CLR的进程成为“宿主”,通常操作系统加载. 加载CLR的进程也可以为某个DLL,也成为“宿主” 2. 宿主接口使宿主能够对运行库的更多方面进行控 ...

  5. FineUI初学手册-部分JS整理

    有人老找JS,我吧FineUI自己写的JS沾过来方便大家看看,在实现前端的时候更灵活   JS 实例 注释 控件 F.ready F.ready(function(){}); 就是ready 很多方法 ...

  6. FineUI开源版（ASP.Net）初学手册-部分JS整理

    有人老找JS,我吧FineUI自己写的JS沾过来方便大家看看,在实现前端的时候更灵活   JS 实例 注释 控件 F.ready F.ready(function(){}); 就是ready 很多方法 ...

  7. 【转载，待整理】初学 springmvc整合shiro

    1. shiro认证流程理解 2. 整合过程 http://blog.csdn.net/dawangxiong123/article/details/53020424 http://blog.csdn ...

  8. node.js 初学 自我笔记整理 day01

     node.js   概念问题: Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境.   npm是一个node的包管理工具  ,也是一个网站  ,还是一条命令.N ...

  9. 跳出初学MySQL知识的原理整理（一）

    一.基础架构 MySQL 可以分为 Server 层和存储引擎层两部分. Server 层包括连接器.查询缓存.分析器.优化器.执行器等,所有跨存储引擎 的功能都在这一层实现,比如存储过程.触发器.视 ...

随机推荐

  1. Python第三讲

    今日内容概要 数据类型及内置方法 字符编码 文件处理 函数简介 今日内容详细 数据类型及内置方法 列表 name_list =['jason','oscar','tony','kevin'] 1.索引 ...

  2. SHA算法（及示例）演变历史

    安全散列算法(英语:Secure Hash Algorithm,缩写为SHA)是一个密码散列函数家族,是FIPS所认证的安全散列算法.能计算出一个数字消息所对应到的,长度固定的字符串(又称消息摘要)的 ...

  3. insert一个表的数据到另外一个表

    insert into a(real_name,is_main,mobile,password,property_id,create_time) select linkman as real_name ...

  4. jdbc.properties/（驱动、URL、用户名、密码)跟换数据库时改该配置文件/Untitled Text File格式

    背景:这几天从阿里云上面购买了云服务器,最垃圾的那种,还送oss和EDS数据库服务器,只不过EDS数据库服务器只有一个月的,就主动升级为一年的,49还是59忘了.对于配置这种EDS过程中,产生的一个念 ...

  5. 阿里一面，说说你了解zookeeper的应用场景有哪些？

    1.前言 又到了金三银四的时候,大家都按耐不住内心的躁动,我在这里给大家分享下之前面试中遇到的一个知识点(zookeeper应用场景),希望对大家有些帮助.如有不足,欢迎大佬们指点指点. 2.zook ...

  6. 使用dom4j处理xml文件

    1.项目中加入dom4j的jar 2.基本的读取xml文件为Document对象:将Document对象写入到指定文件中 package com.ricoh.rapp.deploymenttool.u ...

  7. 使用digispark制作一个BadUSB

    0X00.工具准备 digispark开发板. 淘宝连接:https://m.tb.cn/h.VK7vwjy?sm=d85844 0X01.安装Arduino IDE环境 1.安装 arduino 的 ...

  8. MSF基本使用

    MSF 链接数据库 linux查找文件 find / -name dabase.yml 链接数据库 db_connect -y path/database.yml db_status 查询数据库链接状 ...

  9. 09自动售货机综设实验（含按键消抖，led和状态机）

    一设计功能 1.上次状态机的练习 2这次自动售货机综设 (一)对比两次的售货机 上次售货机的关键是画出状态转移图.明确输入分几种,输出是啥,有哪些状态.如下图所示 (二)系统或综合设计的经验: 既然这 ...

  10. 知识点简单总结——BSGS与EXBSGS

    知识点简单总结--BSGS与EXBSGS BSGS 给出 $ A,B,C,(A,C)=1 $ ,要你求最小的 $ x $ ,使得 $ A^x \equiv B(mod \ C) $ . 在数论题中经常 ...