00HTML

时间 2019-11-30

标签 00html html 栏目 HTML 繁體版

原文原文链接

一.概述

超文本标记语言（Hyper Text Markup Language），HTML是一门描述性的语言.
基本语法：
　　<标签> 内容 </标签>
** 在一个网页中，HTML是网页的结构，CSS是网页的外观，JS是网页的行为。javascript

二.文档结构

1.文档声明DOCTYPE

文档声明用于识别HTML的版本，声明引用DTD（文档类型定义），规定了标记语言的规则。php

/////严格模式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
/////过渡模式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
/////HTML5版，简洁通用，没有兼容问题
<!DOCTYPE html>css

** 注意事项：
在没有文档声明时，IE浏览器就会进入怪异模式，也就是，浏览器会根据本身的标准去解释文档，若是加上了声明，就会按照w3c标准解释。
在ie盒子模型中，W/H部分包含了border和padding，也就是：W/H = content + padding+border;html

2.根元素html

限定文档的开始和结束，包含两个部分<head>,<body>
<html xmlns="http://www.w3.org/1999/xhtml">，其中的vmlns用于声明该网页使用的是W3C组织的XHTML标准。java

3.头元素head

　　定义文档的头部，是头部元素的容器。文档的头部描述了文档的各类属性和信息，包括文档的标题、在 Web 中的位置以及和其余文档的关系等。绝大多数文档头部包含的数据都不会真正做为内容显示给读者。浏览器

　　　//////<meta>元信息标签
　　　<meta>标签的格式是名称/值对的形式：content中的属性内容以 , 隔开
　　　　<meta 属性=“属性值” content=”属性内容”>
　　　　　　meta属性：
　　　　　　　　name类型
　　　　　　　　　　设定传递给浏览器和搜索引擎的信息
　　　　　　　　　　格式：<meta name=”” content=””>
　　　　　　　　http-equiv类型
　　　　　　　　　　相似HTTP协议，传递给浏览器引擎，用于帮助浏览器正确和精确的显示网页内容
　　　　　　　　　　格式：<meta http-equiv=”” content=””>
　　　　　　　　charset
　　　　　　　　　　用于定义文档的字符编码
　　　　　　　　　　<meta charset="utf-8">缓存

跳转连接：经常使用meta总结安全

　　//////<title>
　　用于定义HTML文件的标题信息，即当前文件在浏览器中浏览时有浏览器窗口的标题栏上显示的文字服务器

　　////////<base>
　　　　* <base href="" /> 定义页面连接默认基础定位
　　　　　　<base>标签的href属性是为整个页面定义全部连接的基础定位，主要做用是为了确保文档中的全部相对定位URL均可以被分解成正确的文档地址，使文档自己被移动或重命名的状况下也能够正确的解析，当这些元素进行跳转时，都会基于当前目录加上这个默认的URL（相对路径的状况下）再加上本身的href属性值来跳转。
　　　　** <base target="_blank"/> 定义页面连接默认打开方式,base经过target属性告诉浏览器如何打开页面。并发

跳转连接：base标签

4.身元素body

　　为HTML文件的主体标记，即只有在标记中编辑的网页对象才能够在浏览器窗口中显示，该标记具备多个标记属性，其全部的标记属性基本上都是用来控制当前HTML文件的页面属性

5.外联标签

　　//////<link>
　　　　link标签一般放置在一个网页的头部标签head标签内的用于连接外部样式表，外部资源。
　　　　** 连接外部样式表
　　　　　　<link rel="stylesheet" type="text/css" href="myCss.css" />
　　　　** ICO图标引入，加载一个图标做为网站连接头部的图标。
　　　　　　<link rel="icon" type="image/x-icon" href="favicon.ico" />

　　/************************ link方式和import方式引入css文件的区别 ***********************/
　　1.link是XHTML标签，除了加载CSS外，还能够定义RSS等其余事务；@import属于CSS范畴，只能加载CSS。
　　2.link引用CSS时，在页面载入时同时加载；@import须要页面网页彻底载入之后加载。
　　3.link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持（IE5-）。
　　4.link支持使用Javascript控制DOM去改变样式；而@import不支持。

　　//////<script>
　　　　* 引用脚本文件
　　　　　　在页面中用script标签引入javascript文件（<script type="text/javascript" src="js文件地址"></script>），浏览器在渲染页面的时候，当读取到script元素时，浏览器不会以HTML或XHTML的方式处理其内容，浏览器会通知浏览器的脚本引擎来接管script元素中的内容。
　　　　** 在页面放置的位置
　　　　　　浏览器从同一个域名并发载入的资源是有限制的，因此当把脚本添加到head元素中时，首先载入的将是脚本，其次才是文档的剩余部分。引入了javascript的script元素标签放在head中可能会使得浏览器延迟页面剩余部分的显示，主要是由于脚本中可能会调用document.write方法修改dcument对象。
　　

　　　　*****<noscript>
　　　　　　字面意思，NO-script，没有script，也就是浏览器不支持JavaScript时，<noscript>标签中内容才会被显示，
　　　　　　- 浏览器不支持脚本；
　　　　　　- 浏览器支持脚本，可是JavaScript被禁用；
　　　　　以上两条符合任何一个，<noscript>标签内的内容都会被显示。

　　上图页面，给用户了一个信息，当浏览器不支持或禁用JavaScript是才会被显示，不然用户将永远不会看到，而且不会影响页面其余元素的显示。

6.注释

HTML注释：
　　 CSS注释：/* */
　　 JS注释：//

三.相关概念

1.自闭和标签

大多数标签都是成对出现的，好比<div></div>由开始标签和结束标签进行包裹。而有些标签，好比<br />,<hr />都没有结束标签，不能对其余元素进行包裹，因此只能定义它自身的属性。

四.基本标签

1.段落文字标签

　　i.标题标签<h1>~<h6>
　　　　一个页面只能有一个<h1>标签
　　ii.段落标签<p>
　　iii.文本标签
　　　　<span>
　　　　<b>和<strong>
　　　　　　通常使用<strong>用于着重强调
　　　　<i>和<em>
　　　　　　通常使用<em>用于着重强调
　　　　<sup>和<sub>

　　iv.换行标签<br />
　　v.水平线标签<hr />
　　vi.分区标签<div>
　　　　主要用于分区，在HTML文档中划分区域，提供结构和背景。
　　　　Div标签能够放入<body>标签的任何内部标签
　　vii.特殊符号

连接：经常使用字符

2.图片标签

<img src="图片地址" alt="替换文字" title=”提示文字” /> 图片（单标签）
alt属性是替换名字，是给搜索引擎抓取使用，当图片显示不出来时，就会显示出alt的内容；
title 属性是提示文字，当鼠标移到图片上的时候会显示出来，大部分的标签都会有这个属性

连接：img相关

3.超连接标签

　　a标签能够用作连接、锚点、或者连接下载文件

　　　　　　<a href="#" target=””></a>
　　　　　　　　target 连接打开方式
　　　　　　　　_blank 新窗口
　　　　　　　　_self 当前窗口
　　　　*在herf内将文件放上，该a标签就会成为下载连接
　　　　*在herf内放入某一个id，格式是#id ，就会成为一个锚点连接，能够实现页面内跳转的功能

4.列表标签

//////ol有序列表
　　<ol>
　　　　<li>列表项</li>
　　　　<li>列表项</li>
　　</ol>
　　* ol要和li配合使用
　　* ol的子元素必须是li，不能有其余元素

//////ul无序列表
　　<ul>
　　　　<li>列表项</li>
　　　　<li>列表项</li>
　　</ul>
　　* ul要和li配合使用
　　* ul的子元素必须是li，不能有其余元素

///////dl定义列表

5.表格标签

　　//////完整结构

　　//////表格样式重置
　　　　th,td{padding:0;} 重置单元格默认填充
　　　　table{border-collapse:collapse;} 单元格间隙合并
　　//////合并单元格
　　　　colspan 规定单元格可横跨的列数、合并行
　　　　rowspan 规定单元格可横跨的行数、合并列

******注意事项*******
　　　　a.不要给table，th，td之外的表格标签加样式，不然容易出现兼容问题
　　　　b.单元格默认平分table的宽度
　　　　c.th里面的内容默认加粗、上下左右居中
　　　　d.td里面的内容默认上下居中，左对齐
　　　　e.table决定了整个表格的宽度
　　　　f.table里面的宽度会被转换成百分比
　　　　g.表格里面的每一列都应该加宽度
　　　　h.表格同一竖列继承最大宽度
　　　　i.表格同一行继承最大高度

6.表单标签

表单(form)：用于收集用户的数据，提交给服务器上某个页面，该页面能够对表单中提交的数据进行保存或查询(由php/jsp/aspx来担当)。
　　action:指定表单数据的处理页面(动态页面)
　　method:GET/POST,前者把请求数据追加在地址栏查询字符串中(有长度限制)；后者把数据以单独的数据包发送给服务器(无长度限制、且可用于文件上传)

　　　　/* method:get/post;
　　　　　　* get:把请求的数据追加在地址栏查询字符串中，有长度的限制1024=1k，
　　　　　　* post:把数据以单独的数据包发送给服务器，无长度限制，且能够用于文件上
　　　　*/
　　enctype:EncodedType表单中提交的数据的编码类型，可取值：
　　text/plain表单数据不作任何编码直接上传
　　application/x-www-form-urlencoded把表单中的数据(中文、特殊符号)编码后再上传，只能对字符进行编码
　　multipart/form-data以一种特殊的格式上传字符/字节数据

***1.样式重置
　　form{margin:0;}
　　input{margin:0;padding:0;}
　　select{margin:0;}
　　textarea{margin:0;padding:0; resize:none;(禁用用户调整尺寸)
　　overflow:hidden;outline:none;(取消焦点框)}
***2.基本结构

<form action=”提交地址” method=”提交方式get/post” target=”打开方式”>

　　文本框
　　　　<!--文本框-->
　　　　<input type=" text" name="" value="" />
　　　　<input type=”text” id=”id” name=”” disabled=”输入域禁用，不能改，不能提交”readonly=”输入域只读，不能改，能提交” >单行文本框</input>
　　　　<!--密码文本框-->
　　　　<input type=" password" name="" value="" />
　　选项按钮
　　　　<!--单选按钮 指定同一个name达到单选的效果 用label将input元素和文字包裹起来，达到点击文字也可以选中相应的选择按钮,不兼容IE6-->
　　　　<input type=" radio" name="" value="" />
　　　　<!--兼容IE6-->
　　　　<input type=" radio" name="" id="id" /><label for=”id”>文字</label>
　　　　<!--复选按钮 disabled属性，不可选中--> 
　　　　<input type=" checkbox " name="" value="" />
　　按钮
　　　　<!--提交按钮-->
　　　　<input type=" submit " name="" value="" />
　　　　<!--重置按钮 -->
　　　　<input type=" reset " name="" value="" />
　　　　<!--普通按钮-->
　　　　<input type=" button " name="" value="" />
　　图片域
　　　　<!--图片按钮-->
　　　　<in put type=" image " name="" value="" />
　　文件域
　　　　<!--上传文件 各个浏览器样式都不太同样，很难作到兼容-->
　　　　<input type=" file " name="" value="" />
　　隐藏域
　　　　<!--隐藏-->
　　　　<input type=" hidden " name="" value="" />
　　　　<!-- 在表单中添加一个隐藏字段,用户看不见，可是能够提交  -->
　　　　<input type=”hidden” name=” (必需)隐藏字段的名” value=” (必需)隐藏字段的值” /> 
　　下拉列表
　　　　<select> <!--下拉菜单：对高度的支持不兼容-->
　　　　　　<option selected>选项1 默认显示</option>
　　　　　　<option>选项2</option>
　　　　</select>
　　文本域 
　　　　<textarea>文本域:默认滚动条在各个浏览器下不兼容</textarea>
</form>

***3.注意
- button按钮：
　　在表单中涉及到提交数据到服务器，因此一般使用<input type=”button”>方式，只有不涉及提交数据的状况下才会使用<button>
　　须要注意的是：对于须要与服务器进行交互的表单元素，必须都要放置在form标签中，而对于不须要交互的就不须要了。

- submit提交按钮的相关问题
　　使用的是旧的盒子模型，宽度包括padding和border
　　若是要设置左右的padding的话，ie6,7会表现比你设置的要宽，没有正确解析，添加overflow:visible就能够解决这个问题
　　只有ie支持line-height，火狐和谷歌都有一个你没有办法覆写的line-height，因此别对submit使用这个line-height了
　　在ie6,7下表单任意元素激活时，submit btn都会出现个黑色的边框，除非你设置border为none
　　若是设置了border咱们会发现默认的渐变背景没有了；第二个问题是默认背景火狐解析的有点问题，偏上，而后文字也不是那么垂直居中对齐，仍是有几个像素的差异，而其余浏览器是完美的垂直居中对齐，根本就不须要设置上下的padding和line-height，因此咱们应该对火狐打bug，在这里我设置其padding-bottom为3px就能够了

- 下拉列表：
　　select: **用户不可输入，只能选
　　<select name="" size="显示行数" multiple="多选（shift/ctrl） ">
　　　　<optgroup label="选项组的名称">
　　　　　　<option value=" " select选择>选项</option>
　　　　　　<option value=" ">选项</option>
　　　　</optgroup>
　　</select> **用户不可输入，只能选

多行文本输入域：

<textarea name=”” rows=”行数” cols=“列数” disabled=”输入域禁用，不能改，不能提交”readonly=”输入域只读，不能改，能提交”>
　　多行文本输入域值没有Value属性，只能输入纯文本
</textarea>
若是想要输入“富文本编辑框”—可使用第三方工具实现（KindEdtitor / FCKEdtior / CuteEditor）

表单中实现文件上传必须知足：
(1)表单中使用<input type=”file” name=””/>选择文件
(2)表单必须使用POST提交 method=”POST”
(3)表单的编码类型必须声明为 enctype=”multipart/form-data”
<input type=”file” name=””></input>

五.其余

1.iframe引入其余页面

　　浮动框架，就是在一个页面嵌入一个或多个子页面
　　<iframe src=”引入的页面地址” style=“W H frameboder=”0”去掉边框 scrolling=”no”去掉滑动条>当页面不显示时显示的文字</iframe>

2.插入多媒体

　　在线音频和视频文件以及flash使用<embed>标签
　　<embed src="多媒体文件地址" width="播放界面的宽度" height="播放界面的高度"/>

3.网页背景音乐

　　<bgsound src="背景音乐的地址" loop="播放次数">　　只适用于IE浏览器，在Firefox等中未必适用。　　loop="2"表示重复2次，loop="infinite"表示无限次循环播放，也可使用loop="-1"表示无限次循环播放。　　使用bgsound设置背景音乐，当窗口最小化时就自动暂停播放，窗口恢复时，继续播放。