HTML 从零快速入门到熟练使用，最新HTML5
文章目录
- HTML
- 背景
- HTML简介
- 基本语法：
- HTML标签
- 基本标签
- 表单标签
- 浏览器兼容
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>内容称为元素.
- 属性：给每一个标签所做的辅助信息。
- xhtml： 符合XML语法标准的HTML。
- dhtml：dynamic，动态的。javascript + css + html合起来的页面就是一个dhtml。
- http：超文本传输协议。用来规定客户端浏览器和服务端交互时数据的一个格式。
- SMTP：邮件传输协议
- ftp：文件传输协议。
基本语法：
- html文档后缀名 .html 或者 .htm
- 标签分为
- 围堵标签：有开始标签和结束标签。如
- 自闭和标签：开始标签和结束标签在一起。如
- 标签可以嵌套：
需要正确嵌套，不能你中有我，我中有你
错误：
正确： - 在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来
- html的标签不区分大小写，但是建议使用小写。
基本结构
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="java acc source">
<meta name="description" content="学习源码"
> 表单标签title>
head>
<body>
helloword
body>
html>
HTML标签
HTML5 标签集合
页面通常结构
基本标签
-
标题标签
<h1>一级标题h1> <h2>二级标题h2> <h3>三级标题h3> <h4>四级标题h4> -
段落标签
<p>段落1p> <p>段落1p> -
换行标签
<br /> -
字体样式标签
-
黑体
黑体 ： <strong>你未必出类拔萃，你要与众不同strong> -
斜体
斜体： <em>你未必出类拔萃，你要与众不同em>
-
-
水平线标签
<hr /> -
特殊字符标签
1 空格 >大于 <小于 ©； 版权 -
行内元素和块元素区别
行内元素是使用标签后不换行例如 符号标签，字体标签
块元素是换行的例如 span、h标签
-
图像标签
<img width="200px" src="./img/logo.png" alt="logo" title="logo"> -
链接标签
-
基本链接
<a href="01-demo01.html" target="_blank">点击a> <a href="https://www.baidu.com"> <img src="./img/logo.png" alt=""> a> -
锚链接
<a name="top">a> <a href="#top">回到顶部a> -
功能链接
<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> <a href="mailto:[email protected], [email protected]" title="Email">Contact Usa> <a href="mailto:[email protected][email protected]&subject=Help&body=sample-body-text" title="Email">Contact Usa>
-
-
列表标签
-
有序列表
<ol> <li>javali> <li>c++li> <li>前段li> <li>运维li> <li>大数据li> ol> -
无序列表
<ul> <li>javali> <li>c++li> <li>前段li> <li>运维li> <li>大数据li> ul> -
自定义列表
<dl> <dt>学科dt> <dd>javadd> <dd>cdd> <dd>pthondd> <dd>c++dd> <dt>信息dt> <dd>1dd> <dd>2dd> <dd>3dd> <dd>4dd> dl>
-
-
表格标签
<table border="1px"> <tr> <td colspan="3"> 学习成绩td> tr> <tr> <td rowspan="2">张三td> <td>语文td> <td>100td> tr> <tr> <td>数学td> <td>100td> tr> <tr> <td rowspan="2">李四td> <td>语文td> <td>100td> tr> <tr> <td>数学td> <td>100td> tr> table> -
音频标签
<video src="./video/录制.mp4" controls autoplay>video> <audio src="./audio/声音.mp3" controls autoplay>audio> -
内联标签
<iframe src="https://www.baidu.com">iframe>
表单标签
表单基本结构
<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>
单选框
<p>
<input type="radio" name="sex" id="" value="boy"/> 男
<input type="radio" name="sex" id="" value="girl" /> 女
p>
复选框
<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>
按钮
<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>
<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 创建一个没用的元素来解决，例如：
也可以使用 shiv 来解决兼容性问题，详情可参考 HTML5 Shiv