00HTML
本文转载于:猿2048网站https://www.mk2048.com/blog/blog.php?id=baaaa&title=00HTML
一.概述
超文本标记语言（Hyper Text Markup Language），HTML是一门描述性的语言.
基本语法：
<标签> 内容 </标签>
** 在一个网页中，HTML是网页的结构，CSS是网页的外观，JS是网页的行为。
二.文档结构
1.文档声明DOCTYPE
文档声明用于识别HTML的版本，声明引用DTD（文档类型定义），规定了标记语言的规则。
/////严格模式
<!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>
** 注意事项：
在没有文档声明时，IE浏览器就会进入怪异模式，也就是，浏览器会根据自己的标准去解释文档，如果加上了声明，就会按照w3c标准解释。
在ie盒子模型中，W/H部分包含了border和padding，也就是：W/H = content + padding+border;
2.根元素html
限定文档的开始和结束，包含两个部分<head>,<body>
<html xmlns="http://www.w3.org/1999/xhtml">，其中的vmlns用于声明该网页使用的是W3C组织的XHTML标准。
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">
//////<title>
用于定义HTML文件的标题信息，即当前文件在浏览器中浏览时有浏览器窗口的标题栏上显示的文字
////////<base>
* <base href="" /> 定义页面链接默认基础定位
<base>标签的href属性是为整个页面定义所有链接的基础定位，主要作用是为了确保文档中的所有相对定位URL都可以被分解成正确的文档地址，使文档本身被移动或重命名的情况下也可以正确的解析，当这些元素进行跳转时，都会基于当前目录加上这个默认的URL（相对路径的情况下）再加上自己的href属性值来跳转。
** <base target="_blank"/> 定义页面链接默认打开方式,base通过target属性告诉浏览器如何打开页面。
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对象。
· 利于维护：把所有的JavaScript的文件放在一起，不仅可以不触及HTML代码，而且更有利于开发者进行代码的编写和维护。
· 加速浏览：如果有多个HTML页面引用了同一个JavaScript外部文件，这个文件只会加载一次（缓存），也就是说可以加快页面的加载速度。
· 安全性：引用外部文件，如果用户查看HTML代码，将不会看到JavaScript的代码，比写在标签内安全性更高一些。
*****<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 属性是提示文字，当鼠标移到图片上的时候会显示出来，大部分的标签都会有这个属性
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定义列表
<dl>
<dt>定义标题</dt>
<dd>列表项</dd>
<dd>列表项</dd>
</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设置背景音乐，当窗口最小化时就自动暂停播放，窗口恢复时，继续播放。
本文转载于:https://www.mk2048.com/blog/blog.php?id=baaaa&title=00HTML
- HTML基础--基本概念 00
- 00认识HTML5
- Python+unittest+requests+HTMLTestRunner 完整的接口自动化测试框架搭建_00——框架结构简解
- fget和fput http://www.unixresources.net/linux/clf/linuxK/archive/00/00/69/66/696637.html
- Step_00.AngularJS自定义HTML标签
- enum遍历http://topic.csdn.net/t/20030613/00/1909808.html
- html hidden属性，表单提示
- html中submit和button的区别(总结)
- Html中CSS之去除li前面的小黑点,和ul、LI部分属性方法
- header("Content-type:text/html;charset=utf-8")含义
- 在textbox中加入html字符
- 代码发芽网更新 - 界面清晰、支持论坛(Discuz!)、一键复制HTML/BBcode
- gvim写html代码时如何快速地跳转到一个标签的结束位置: 终极插件: matchit.vim
- HTML 常用组件
- iOS 直接改变.html后缀的链接所对应的html页面样式，并获取html的标题，图片地址，id，内容
- 微信app支付java后台流程、原理分析及nei网穿透 转载自（http://www.cnblogs.com/MrRightZhao/p/7930916.html）
- 2）JavaScript高级程序设计--在HTML中使用JavaScript
- 使用springboot+springdata-jpa+前台Html页面实现增删改查
- phonegap create testapp www subdir with index.html
- This Week in HTML 5 – Episode 7