一、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. JQuery常见方法

    <!DOCTYPE htmi> <html> <head> <meta charset="UTF-8"> <title> ...

  2. Linux安装Python3.8.7

    Linux 参考文献1 :https://www.jianshu.com/p/15f40edefb13; 参考文献2:https://pythonav.com/wiki/detail/3/31/ 1. ...

  3. QQ音乐官方定制精简版v1.3.6 纯净无广告

    介绍 近期腾讯推出了QQ音乐简洁版.顾名思义,QQ音乐简洁版就是官方精简后的版本,没有内置任何广告.完全专注于听歌,不存在直播.K歌.短视频等花里胡哨的内容.如有违规,请删删.. 结尾附pc端 QQ音 ...

  4. 研发管理平台DevOps使用流程

    研发管理平台DevOps使用流程:一.注册开发者账号二.登录平台三.点击:我的项目-内部项目三.点击"发布内部项目",创建项目五.进入项目六.研发管理平台研发管理平台的功能包括:可 ...

  5. winform中更新UI控件的方案介绍

    这是一个古老的话题...直入主题吧! 对winfrom的控件来说,多线程操作非常容易导致复杂且严重的bug,比如不同线程可能会因场景需要强制设置控件为不同的状态,进而引起并发.加锁.死锁.阻塞等问题. ...

  6. tensorflow源码解析之framework-node

    目录 什么是node node_def 关系图 涉及的文件 迭代记录 1. 什么是node TF中的计算图由节点组成,每个节点包含了一个操作,表示这个节点的作用,比如,如果一个节点的作用是做矩阵乘法, ...

  7. DataFrame计算corr()函数计算相关系数时，出现返回值为空或NaN的情况+np.log1p()

  8. oracle报ORA-12154

    环境 [oracle@oracle admin]$ sqlplus -vSQL*Plus: Release 19.0.0.0.0 - Production Version 19.3.0.0.0 问题描 ...

  9. IDEA导入第三方jar包

    IDEA导入第三方jar包 在Module下新建一个Directory,命名为lib或者libs,然后直接将目标jar包文件复制到这个新建的Directory中. 右键选中导入的jar包,选择Add ...

  10. 如何快速开发基于Winform的应用系统

    在我们实际业务开发中,从头开发一个应用系统,不管是基于BS的前端项目,还是基于Winform的CS应用系统,都是由容易到复杂,逐步演化的一个开发过程,如果我们基于一定基础上,并配合一些配套的开发工具, ...