HTML
背景
使用 java 开发的基于互联网的项目，遵循 web 标准。
web 标准介绍
- w3c：World Wide Web Consortium（万维网联盟）HTML、XHTML、CSS、XML的标准就是由W3C来定制。
- w3c标准：制作网页的规范，分为结构标准(html)，表现标准(css)，行为标准 (dom)
- 结构：html 表现：css 行为:JavasCript
浏览器内核：
| 浏览器 | 内核 |
|---|---|
| IE | trident |
| chrome | 欧鹏 |
| 火狐 | gecko |
| Safari | webkit |
tips：「浏览器内核」也就是浏览器所采用的「渲染引擎」，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。渲染引擎是兼容性问题出现的根本原因。
HTML简介
Hyper Text Markup Language 超文本标记语言
- 超文本:
- 超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本.
- 标记语言:
- 由标签构成的语言。<标签名称> 如 html，xml
- 标记语言不是编程语言
HTML的网络术语
- 网页 ：由各种标记组成的一个页面就叫网页。
- 主页(首页) : 一个网站的起始页面或者导航页面。
- 标记：< p>称为开始标记 ，</ p>称为结束标记，也叫标签。每个标签都规定好了特殊的含义。
- 元素：< p>内容</ p>称为元素.
- 属性：给每一个标签所做的辅助信息。
- xhtml： 符合XML语法标准的HTML。
- dhtml：dynamic，动态的。javascript + css + html合起来的页面就是一个dhtml。
- http：超文本传输协议。用来规定客户端浏览器和服务端交互时数据的一个格式。
- SMTP：邮件传输协议
- ftp：文件传输协议。
基本语法：
- html文档后缀名 .html 或者 .htm
- 标签分为
- 围堵标签：有开始标签和结束标签。如
- 自闭和标签：开始标签和结束标签在一起。如
- 标签可以嵌套：
需要正确嵌套，不能你中有我，我中有你
错误：
正确： - 在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来
- html的标签不区分大小写，但是建议使用小写。
基本结构
<!DOCTYPE html>
<!-- 高数浏览器使用什么规范 -->
<html lang="en">
<!-- head表填代表头部 -->
<head>
<!-- mate 描述标签 -->
<!-- meta 一般来做seo -->
<meta charset="UTF-8">
<meta name="keywords" content="java acc source">
<meta name="description" content="学习源码"
<title>表单标签</title>
</head>
<body>
helloword
</body>
</html>
HTML标签
页面通常结构
基本标签
-
标题标签
<h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> -
段落标签
<p>段落1</p> <p>段落1</p> -
换行标签
<br /> -
字体样式标签
-
黑体
黑体 ： <strong>你未必出类拔萃，你要与众不同</strong> -
斜体
斜体： <em>你未必出类拔萃，你要与众不同</em>
-
-
水平线标签
<hr /> -
特殊字符标签
1 空格 >大于 <小于 ©； 版权 -
行内元素和块元素区别
行内元素是使用标签后不换行例如 符号标签，字体标签
块元素是换行的例如 span、h标签
-
图像标签
<img width="200px" src="./img/logo.png" alt="logo" title="logo"> <!-- src :图片地址 可以相对地址或绝对地址 title ： 悬停时出现标题 --> -
链接标签
-
基本链接
<a href="01-demo01.html" target="_blank">点击</a> <a href="https://www.baidu.com"> <img src="./img/logo.png" alt=""> </a> <!-- 可以链接到一个html页面，可以以链接到一个地址 _blank 表示在新页面打开 _self 表示在原页面打开 内部链接可以使用除文字的其他形式 --> -
锚链接
<a name="top"></a> <a href="#top">回到顶部</a> <!-- 锚链接， 1、通过name标签位置 2、# 获取name，跳转 一般运用段落跳转 --> -
功能链接
<a href="malto:[email protected]">点击联系我</a> <!-- 邮件 --> <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=807098855&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:807098855:52" alt="点击这里给我发消息" title="点击这里给我发消息"/></a> <!--qq联系我--> <!-- 多个邮箱地址 --> <a href="mailto:[email protected], [email protected]" title="Email">Contact Us</a> <!-- 添加抄送，主题和内容 --> <a href="mailto:[email protected][email protected]&subject=Help&body=sample-body-text" title="Email">Contact Us</a>
-
-
列表标签
-
有序列表
<!-- 有序列表 应用范围： --> <ol> <li>java</li> <li>c++</li> <li>前段</li> <li>运维</li> <li>大数据</li> </ol> -
无序列表
<!-- 无序列表 应用场景：导航栏标签 --> <ul> <li>java</li> <li>c++</li> <li>前段</li> <li>运维</li> <li>大数据</li> </ul> -
自定义列表
<!-- 自定义列表 dl ： 无序列表 dt ： 标题 dd： 列表内容 应用范围：公示栏底部 --> <dl> <dt>学科</dt> <dd>java</dd> <dd>c</dd> <dd>pthon</dd> <dd>c++</dd> <dt>信息</dt> <dd>1</dd> <dd>2</dd> <dd>3</dd> <dd>4</dd> </dl>
-
-
表格标签
<table border="1px"> <tr> <td colspan="3"> 学习成绩</td> </tr> <tr> <td rowspan="2">张三</td> <td>语文</td> <td>100</td> </tr> <tr> <td>数学</td> <td>100</td> </tr> <tr> <td rowspan="2">李四</td> <td>语文</td> <td>100</td> </tr> <tr> <td>数学</td> <td>100</td> </tr> </table> -
音频标签
<!-- controls 控制 autoplay 自动播放 --> <video src="./video/录制.mp4" controls autoplay></video> <audio src="./audio/声音.mp3" controls autoplay></audio> -
内联标签
<iframe src="https://www.baidu.com"></iframe>
表单标签
表单基本结构
<!-- 表单form
action： 表单提交的位置，可以处理地址可以是网站
method post get 提交方式
post :大文件，相对安全
get：不安全,携带内容有限
-->
<form action="01-demo.html" method="get">
携带内容
</form>
输入框
<p>姓名：<input type="text" name="username" value="admin" placeholder="请输入姓名" maxlength="8"></p>
<p>密码：<input type="password" name="password"></p>
单选框
<!--
radio
value: 单选框的值
name ：表示组
-->
<p>
<input type="radio" name="sex" id="" value="boy"/> 男
<input type="radio" name="sex" id="" value="girl" /> 女
</p>
复选框
<!--
checkbox
value: 单选框的值
name ：表示组
-->
<p> 爱好
<input type="checkbox" name="hobby" value="sleep" /> 睡觉
<input type="checkbox" name="hobby" value="game" /> 游戏
<input type="checkbox" name="hobby" value="sleep" /> 睡觉
<input type="checkbox" name="hobby" value="sleep" /> 睡觉
<input type="checkbox" name="hobby" value="sleep" /> 睡觉
</p>
按钮
<!--
input type="button"
input type="image"
input type="submit"
input type="reset"
-->
<p>按钮：
<input type="button" name="btn1" value="按钮" />
<input type="image" src="img/logo.png" />
<input type="submit" >
<input type="reset" >
</p>
下拉框
<!-- 下拉框 -->
<p>下拉框:
<select name="列表名称" id="">
<option value="china">中国</option>
<option value="america">美国</option>
<option value="jpa" selected="">日本</option>
<option value="ruishi">瑞士</option>
</select>
</p>
文本域
<!-- 文本域 -->
<p>反馈：
<textarea name="textarea" cols="50" rows="10">文本内容</textarea>
</p>
文件域
<p>
<input type="file" name="files" />
<input type="button" value="上传" name="upload" />
</p>
基本验证
<p>邮箱:
<input type="email" name="email" />
</p>
<!-- url -->
<p>
<input type="url" name="url" />
</p>
<!-- 数字 -->
<p> 商品数量：
<input type="number" name="num" max="100" min="0" step="1">
</p>
滑块
<p> 滑块：
<input type="range" name="voice" min="0" max="100"/>
</p>
搜索
<p>搜索
<input type="search" name="search" />
</p>
增强鼠标
<p>
<label for="mark">你点击试试</label>
<input type="text">
</p>
验证和域
- requied 提示信息
- placeholder 非空判断
- pattern 正则判断
- readonly 只读域
- hidden 隐藏域
- disable 禁用
引用
- < cite> 引用作品的名字、作者的名字等
- < q> 引用一小段文字（大段文字引用用< blockquote>）
- < blockquote> 引用大块文字
- < pre> 保存格式化的内容（其空格、换行等格式不会丢失）
<pre>
<code>
int main(void) {
printf('Hello, world!');
return 0;
}
</code>
</pre>
浏览器兼容
主流浏览器都兼容 HTML5 的新标签，对于 IE8 及以下版本不认识 HTML5的新元素，可以使用 JavaScript 创建一个没用的元素来解决，例如：
<script>
document.createElement("header");
</script>
也可以使用 shiv 来解决兼容性问题，详情可参考 HTML5 Shiv