HTML的介绍

什么是HTML?

HTML：Hyper Text Markup Language ：超文本标记语言。

超文本：功能比普通文本更加强大
标记语言：使用一组标签对内容进行描述的语言，它不是编程语言

html文档树形结构图:

HTML的语法和规范

HTML 文件都是以.html 或者.htm 结尾的，建议使用.html 结尾！
Html 文件分为头部分<head></head>和体部分<body></body>。
Html 标签都是由开始标签和结束标签组成(<hr />)。
Html 标签忽略大小写，建议使用小写。

常见标签

一、<!DOCTYPE html>标签

在W3C标准未出台之前，各个浏览器对页面的要求都存在不同的差异。 W3C标准推出以后，浏览器都开始采纳新标准，但存在一个问题就是如何保证旧的网页还能继续浏览，在标准出来以前，很多页面都是根据旧的渲染方法编写的，如果用的标准来渲染，将导致页面显示异常。为保持浏览器渲染的兼容性，使以前的页面能够正常浏览，浏览器都保留了旧的渲染方法（如：微软的IE）。这样浏览器渲染上就产生了Quircks mode和Standars mode，两种渲染方法共存在一个浏览器上。

这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat,这也就是恶魔的开始 -- 浏览器按照自己的方式解析渲染页面，那么，在不同的浏览器就会显示不同的样式。

如果你的页面添加了<!DOCTYPE html>那么，那么就等同于开启了标准模式，那么浏览器就得老老实实的按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。这就是<!DOCTYPE html>的作用。

二、head标签

<meta>

meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性.

name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content， content中的内容其实就是各个参数的变量值。

三、body标签

1.基本标签(块级标签和内联标签)

<hn>: n的取值范围是1~6; 从大到小. 用来表示标题.

<p>: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白.

<b> <strong>: 加粗标签.

<strike>: 为文字加上一条中线.

<em>: 文字变成斜体.

<sup>和<sub>: 上角标 和 下角表.

<br>:换行.

<hr>:水平线

<div><span>

块级标签：<p><h1><table><ol><ul><form><div>

内联标签：<a><input><img><sub><sup><textarea><span>

block（块）元素的特点:

总是在新行上开始；
宽度缺省是它的容器的100%，除非设定一个宽度。
它可以容纳内联元素和其他块元素

inline元素的特点:

和其他元素都在一行上；
宽度就是它的文字或图片的宽度，不可改变
内联元素只能容纳文本或者其他内联元素

特殊字符

< &gt；&quot；©®

2.图形标签<img>

src: 要显示图片的路径.

alt: 图片没有加载成功时的提示.

title: 鼠标悬浮时的提示信息.

width: 图片的宽

height:图片的高 (宽高两个属性只用一个会自动等比缩放.)

3.超链接标签<a>

href:要连接的资源路径 格式如下: href="http://www.baidu.com" 

target: _blank : 在新的窗口打开超链接. 框架名称: 在指定框架中打开连接内容.

name: 定义一个页面的书签.

用于跳转 href : #id.

4.列表标签：

<ul>: 无序列表

<ol>: 有序列表

         <li>:列表中的每一项.

<dl>  定义列表

         <dt> 列表标题

         <dd> 列表项

5.表格标签<table>

border: 表格边框.

cellpadding: 内边距

cellspacing: 外边距.

width: 像素 百分比.（最好通过css来设置长宽）

<tr>: table row

         <th>: table head cell

         <td>: table data cell

rowspan:  单元格竖跨多少行

colspan:  单元格横跨多少列（即合并单元格）

<th>: table header <tbody>(不常用): 为表格进行分区.

6.表单标签<form>

表单用于向服务器传输数据。

表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含textarea、select、fieldset和 label 元素。

表单属性:

HTML 表单用于接收不同类型的用户输入，用户提交表单时向服务器传输数据，从而实现用户与Web服务器的交互。表单标签, 要提交的所有内容都应该在该标签中.

action: 表单提交到哪. 一般指向服务器端一个程序,程序接收到表单提交过来的数据（即表单元素值）作相应处理.

method: 表单的提交方式 post/get 默认取值就是 get（信封）

get:

1.提交的键值对.放在地址栏中url后面.

2.安全性相对较差.

3.对提交内容的长度有限制.

post:

1.提交的键值对不在地址栏.

2.安全性相对较高.

3.对提交内容的长度理论上无限制.

get/post是常见的两种请求方式.

表单元素:

<input> 标签的属性和对应值 : 可以详见input 元素

type:        text 文本输入框

             password 密码输入框

             radio 单选框

             checkbox 多选框  

             submit 提交按钮            

             button 按钮(需要配合js使用.) button和submit的区别？

             file 提交文件：form表单需要加上属性enctype="multipart/form-data"   

 name:    表单提交项的键.注意和id属性的区别：name属性是和服务器通信时使用的名称；而id属性是浏览器端使用的名称，该属性主要是为了方便客

          户端编程，而在css和javascript中使用的

 value:   表单提交项的值.对于不同的输入类型，value 属性的用法也不同：

type="button", "reset", "submit" - 定义按钮上的显示的文本

type="text", "password", "hidden" - 定义输入字段的初始值

type="checkbox", "radio", "image" - 定义与输入相关联的值　　

 checked:  radio 和 checkbox 默认被选中

 readonly: 只读. text 和 password

 disabled: 对所用input都好使.

<select>下拉选项标签属性:

   name:表单提交项的键.

          size：选项个数

          multiple：multiple 

                 <option> 下拉选中的每一项 属性：

                       value:表单提交项的值.   selected: selected下拉选默认被选中

                 <optgroup>为每一项加上分组

<textarea> 文本域

详见textarea

name:    表单提交项的键.

cols:    文本域默认有多少列

rows:    文本域默认有多少行

<label>

详见 label 元素

<label for="www">姓名</label>

<input id="www" type="text">

<fieldset>

详见fieldset

<fieldset>

    <legend>登录吧</legend>

    <input type="text">

</fieldset>

HTML的介绍的更多相关文章

CSS3 background-image背景图片相关介绍
这里将会介绍如何通过background-image设置背景图片,以及背景图片的平铺.拉伸.偏移.设置大小等操作. 1. 背景图片样式分类 CSS中设置元素背景图片及其背景图片样式的属性主要以下几个: ...
MySQL高级知识- MySQL的架构介绍
[TOC] 1.MySQL 简介概述 MySQL是一个关系型数据库管理系统,由瑞典MySQL AB公司开发,目前属于Oracle公司. MySQL是一种关联数据库管理系统,将数据保存在不同的表中,而 ...
Windows Server 2012 NIC Teaming介绍及注意事项
Windows Server 2012 NIC Teaming介绍及注意事项转载自:http://www.it165.net/os/html/201303/4799.html Windows Ser ...
Linux下服务器端开发流程及相关工具介绍(C++)
去年刚毕业来公司后,做为新人,发现很多东西都没有文档,各种工具和地址都是口口相传的,而且很多时候都是不知道有哪些工具可以使用,所以当时就想把自己接触到的这些东西记录下来,为后来者提供参考,相当于一个路 ...
JavaScript var关键字、变量的状态、异常处理、命名规范等介绍
本篇主要介绍var关键字.变量的undefined和null状态.异常处理.命名规范. 目录 1. var 关键字:介绍var关键字的使用. 2. 变量的状态:介绍变量的未定义.已定义未赋值.已定义已 ...
HTML DOM 介绍
本篇主要介绍DOM内容.DOM 节点.节点属性以及获取HTML元素的方法. 目录 1. 介绍 DOM:介绍DOM,以及对DOM分类和功能的说明. 2. DOM 节点:介绍DOM节点分类和节点层次. 3 ...
HTML 事件(一) 事件的介绍
本篇主要介绍HTML中的事件知识:事件相关术语.DOM事件规范.事件对象. 其他事件文章 1. HTML 事件(一) 事件的介绍 2. HTML 事件(二) 事件的注册与注销 3. HTML 事件(三 ...
HTML5 介绍
本篇主要介绍HTML5规范的内容和页面上的架构变动. 目录 1. HTML5介绍 1.1 介绍 1.2 内容 1.3 浏览器支持情况 2. 创建HTML5页面 2.1 <!DOCTYPE> ...
ExtJS 4.2 介绍
本篇介绍ExtJS相关知识,是以ExtJS4.2.1版本为基础进行说明,包括:ExtJS的特点.MVC模式.4.2.1GPL版本资源的下载和说明以及4种主题的演示. 目录 1. 介绍 1.1 说明 1 ...
ExtJS 4.2 组件介绍
目录 1. 介绍 1.1 说明 1.2 组件分类 1.3 组件名称 1.4 组件结构 2. 组件的创建方式 2.1 Ext.create()创建 2.2 xtype创建 1. 介绍 1.1 说明 Ex ...

随机推荐

深入HBase架构解析（一）
前记公司内部使用的是MapR版本的Hadoop生态系统,因而从MapR的官网看到了这篇文文章:An In-Depth Look at the HBase Architecture,原本想翻译全文,然 ...
自己实现KNN算法
import numpy as np from math import sqrt from collections import Counter class KNNClassifier(object) ...
利用forEach循环Dom元素…
大家都知道forEach是循环数组用的,而且很方便,可以丢掉for循环了,但是它不能循环Dom元素.其实我们可以利用call来完成forEach循环Dom; 假设有这样的HTML结构: <ul ...
C# 如何用多字符分割字符串
用单字符分割字符串大家应该很熟悉,例如: string source = "dfd^Afdf^AAAAAA^Adfdf"; var list= source.Split('A'); ...
Android Studio键盘快捷键
Android Studio 为许多常用操作提供了键盘快捷键. 表 1 按操作系统显示了默认键盘快捷键. 注:除了下面表 1 中的默认键映射外,您还可以选择多种预设的键映射,也可以创建自定义键映射.如 ...
贿赂囚犯 Bribe the prisoners （动态规划+剪枝）
一个监狱里有P个并排着的牢房,从左往右一次编号为1,2,-,P.最初所有牢房里面都住着一个囚犯.现在要释放一些囚犯.如果释放某个牢房里的囚犯,必须要贿赂两边所有的囚犯一个金币,直到监狱的两端或者空牢房 ...
抓起根本（二）（hdu 4554 叛逆的小明 hdu 1002 A + B Problem II,数字的转化（反转），大数的加法......）
数字的反转: 就是将数字倒着存下来而已.(*^__^*) 嘻嘻…… 大致思路:将数字一位一位取出来,存在一个数组里面,然后再将其变成数字,输出. 详见代码. while (a) //将每位数字取出来, ...
Spring Cloud Netflix之Eureka 相关概念
为什么不应该使用ZooKeeper做服务发现英文链接:Eureka! Why You Shouldn’t Use ZooKeeper for Service Discovery:http://www ...
Eclipse svn 忽略文件夹/ svn 设置不同步
Eclipse 开发中我们经常用到SVN插件, 但是对于某些文件的缓存来说, 我们只要有操作缓存便会保存一次, 每次提交很是麻烦, 小编这里教你一种不同步某个文件夹的方法工具/原料 MyEclips ...
【Python学习笔记】多版本python使用pip安装第三方库
不知道是不是有人跟我一样,一直Python2与Python3混着用,然而在cmd中默认的Python版本只有一种,使用 pip install xxx(第三方库名) 只会安装到默认版本上. 而如果需 ...