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)设置宽度 width 无效。
(2)设置高度 height 无效,但可以通过 line-height 来设置(当line-height = 行高时,显示上下居中)。
(3)设置 margin 只有左右有效,上下无效。
(4)设置 padding 只有左右有效,上下无效。注意元素范围是增大了,但是对元素周围的内容是没影响的。 - HTML常用行内元素
(1)<span></span>
无意义的行内元素
(2)<a></a>
超链接
(3)<img>
图片
2)块级元素
- 独占一行空间
- 默认情况下,宽度占满整个父元素,高度由其内容决定
- 可以为其宽和高
- 块级元素可以容纳行内元素和其他块级元素
- 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 初学整理的更多相关文章
- React 初学整理
1,通过createElement创建元素 HELLO Word ps:切记组建名称首字母大写 2,虚拟DOM 在虚拟DOM上操作 通过render来渲染真是DOM 3,JSX JSX 是对JS的语法 ...
- Swift初学有一点难理解的东西,整理了一下,想明白了。
func makeIncrementer() -> (Int -> Int) { func addOne(number: Int) -> Int { ...
- 有关CLR的初学小整理2(可能理解不深刻,望大牛指出)
针对原文有用的段落,写一写自己的理解,注释: 1. 托管exe文件被启动的时候,首先被PE Loader载入.PE Loader载入exe文件之后,会分析PE文件头的data directory ta ...
- 有关CLR的初学小整理(可能理解不深刻,望大牛指出)
1. .Net程序通过CLR去加载运行管理代码, 加载CLR的进程成为“宿主”,通常操作系统加载. 加载CLR的进程也可以为某个DLL,也成为“宿主” 2. 宿主接口使宿主能够对运行库的更多方面进行控 ...
- FineUI初学手册-部分JS整理
有人老找JS,我吧FineUI自己写的JS沾过来方便大家看看,在实现前端的时候更灵活 JS 实例 注释 控件 F.ready F.ready(function(){}); 就是ready 很多方法 ...
- FineUI开源版(ASP.Net)初学手册-部分JS整理
有人老找JS,我吧FineUI自己写的JS沾过来方便大家看看,在实现前端的时候更灵活 JS 实例 注释 控件 F.ready F.ready(function(){}); 就是ready 很多方法 ...
- 【转载,待整理】初学 springmvc整合shiro
1. shiro认证流程理解 2. 整合过程 http://blog.csdn.net/dawangxiong123/article/details/53020424 http://blog.csdn ...
- node.js 初学 自我笔记整理 day01
node.js 概念问题: Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境. npm是一个node的包管理工具 ,也是一个网站 ,还是一条命令.N ...
- 跳出初学MySQL知识的原理整理(一)
一.基础架构 MySQL 可以分为 Server 层和存储引擎层两部分. Server 层包括连接器.查询缓存.分析器.优化器.执行器等,所有跨存储引擎 的功能都在这一层实现,比如存储过程.触发器.视 ...
随机推荐
- python flask 入门
1.入门案例.本质上还是一个socket from flask import Flask,request #### app=Flask(__name__) app.debug=True ####配置路 ...
- LeetCode-092-反转链表 II
反转链表 II 题目描述:给你单链表的头指针 head 和两个整数 left 和 right ,其中 left <= right .请你反转从位置 left 到位置 right 的链表节点,返回 ...
- 『现学现忘』Docker基础 — 9、Docker简介
目录 1.什么是Docker? 2.Docker的出现解决了什么问题? 3.Docker的特别之处 4.Docker相关网站 1.什么是Docker? 2010年dotCloud公司在旧金山成立,PA ...
- 使用PostgreSQL 脚本导出数据库的DDL
使用PostgreSQL 脚本导出数据库的DDL 本文主要介绍如何使用基于 PostgreSQL pgdump编写的自定义脚本来导出数据库的DDL. 一.文件说明: 1.pgdump基础语句.sql: ...
- 做一个能对标阿里云的前端APM工具(上)
APM 全称是 Application Performance Monitor,即性能监控 这篇文章有三个前提: 从产品形态上看这肯定不是一个能够媲美阿里产品的竞品,所以抱歉我碰瓷了.你可以把这里的阿 ...
- Android系统编程入门系列之硬件交互——通信硬件电信SIM卡
现在的SIM卡通常具备基站定位.语音通话.短信消息.网络流量这四大功能,而在移动端是无法对SIM卡使用基站定位功能的,所以这里只介绍移动端如何使用SIM卡实现语音通话.短信消息.数据流量三个功能. 语 ...
- WPF之VisualTreeHelper
/// <summary> /// </summary> /// <typeparam name="T">< ...
- Mybatis将mapper映射文件配置到recources下
关于为什么要将Mybatis的mappers.xml文件配置到resources目录下的粗浅看法: (1).使文件目录更加清晰.resources文件目录下通常为配置文件,所以将Mappers.xml ...
- kubernetes修改ingress默认端口
kubectl edit daemonset nginx-ingress-controller -n ingress-nginx containers: - args: - /nginx-ingres ...
- MySQL二进制binlog日志说明以及利用binlog日志恢复数据
MySQL的binlog日志对于mysql数据库来说是十分重要的.在数据丢失的紧急情况下,我们往往会想到用binlog日志功能进行数据恢复(定时全量备份+binlog日志恢复增量数据部分). 一.关于 ...