█ 【web学习之html】 HTML基础 - 常见语法总结
█ 相关文章：
-
● 【web学习之html】 HTML基础 - 常见语法总结
● 【web学习之html】 HTML基础 - 表单学习
● 【web学习之Js】 JavaScript基础 - 基础语法
● 【web学习之demo】 一个Demo的解析
● 【web学习之eclipse】 用eclipse从git(码云)上下载maven项目
█ 本文知识点：
-
● < h1>这是标题 1</ h1>
● < p>这是第一个段落…</ p>
● < hr/>上面一条水平线标签，下面也是一条水平线标签< hr/>
● < em>这是斜体1</ em>
● < i>这是斜体2</ i>
● < strong>这是加粗1</ strong>
● < b>这是加粗2</ b>
● < p class=“tip”>< span>提示：</ span>… … …< /p>
● < div style=“color:#00FF00”> < h3>This is a header< /h3> < p>This is a paragraph.< /p> < /div>
● < a href="#">中国< /a>& nbsp;|& nbsp;< a href="#">赢了< /a>
● 换行： < br/>、大于号(>)： & gt;、小于号(<)：& lt;、引号(")： & quot;、版权符号@： & copy
● < img src="/i/eg_tulip.jpg" alt=“上海鲜花港 - 郁金香” />
● < p>可以使用图像或者文本来作链接：
< a href="/example/html/lastpage.html">
< img border=“0” src="/i/eg_buttonnext.gif" /> 文本< /a> </ p>
● < a name=“marker”>乙位置:W3C是什么</ a>
< a href="#marker">甲位置:锚链接标签，点击将跳转到乙位置:W3C是什么</ a>
● < table border=“3”> < tr> < td>第1行第1列< /td> < td>< /td> < /tr>
< tr> < td>第2行第1列< /td> < td>第2行第2列< /td> < /tr> < /table>
● < ul> < li>第一行< /li> < li>第二行< /li> < /ul>
● < ol> < li>第一行< /li> < li>第二行< /li> < /ol>
● < dl> < dt>第一行项目< /dt> < dd>第一行描述< /dd>
< dt>第二行项目< /dt> < dd>第二行描述< /dd> < /dl>
█ W3C是什么：乙位置
-
● W3C，这个建立于 1994 年的组织，其宗旨是通过促进通用协议的发展并确保其通用型，以激发 web 世界的全部潜能。
W3C 指万维网联盟（World Wide Web Consortium）
W3C 创建于1994年10月
W3C 由 Tim Berners-Lee 创建
W3C 是一个会员组织
W3C 的工作是对 web 进行标准化
W3C 创建并维护 WWW 标准
W3C 标准被称为 W3C 推荐（W3C Recommendations）
● W3C标准技术：
结构和标准语言(HTML、XML )==静态的展现
表现标准语言(CSS)==样式
行为标准语言(DOM、EMCAScript)==动态的展现
● JavaScript是门基于EMCAScript规范所实现出来的脚本语言，JavaScript包含了三部分内容。第一个即EMCAScript规范的实现，另外两个是依据html和浏览器进行拓展出来的DOM（文档对象模型）和BOM（浏览器对象模型），方便我们更好地和文档、浏览器进行交互。
● 官网：https://www.w3.org/
● W3C目的：
同样的代码，在谷歌、火狐浏览器上面展示效果和IE浏览器上显示不一样，但是如果都在代码头部插入
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
其中http:…/xhtml1-transitional.dtd是一份文档。
那么最终展示的效果就一样了，就都遵循W3C标准来解析。
主要摘自：w3school 在线教程
█ HTML是什么：
-
● 超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
● 超文本包括:文字、图片、音频、视频、动画等
● 您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析！
● 使用在线编辑器，您可以轻松实现在线修改 HTML，并查看实例运行结果。 ->【Go】
主要摘自：HTML 教程 | 菜鸟教程
█ 开发工具：
-
● 在线编辑器：
W3School在线测试工具 V2
● DreamWeaver：
可视化网页设计制作工具和网站管理工具之一,支持Web技术，包含HTML检查、HTML格式控制、HTML格式化选项、HomeSite/BBEdit捆绑、可视化网页设计、图像编辑、全局查找替换、全FTP功能、处理Flash和Shockwave等富媒体格式和动态HTML、基于团队的Web创作。
在编辑上你可以选择可视化方式或者你喜欢的源码编辑方式!
● Brackets 编辑器Brackets：
Adobe 的开源 HTML/CSS/JavaScript 集成开发环境。
● Adobe Dreamweaver：
简称“DW”，是集网页制作和管理网站于一身的所见即所得网页代码编辑器
● WebStorm：
被誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等
● PHP 集成开发工具PhpStorm：
智能PHP编辑器、JavaScript 编辑器、HTML/CSS编辑器
● HBuilder
DCloud（数字天堂）推出Web开发IDE,当前最快的HTML开发工具,强大的代码助手帮你快速完成开发
█ 功能说明：
-
● 使用HTML进行网页布局
● 使用CSS美化网页
● 使用js实现网页互动
█ HTML网页基本结构：
-
● 一个 HTML 布局的demo：
< !DOCTYPE html> < html> // DOCTYPE声明(告诉浏览器使用什么规范)
< head> // 网页头部（用于设置网页的一些属性）
< style> // css样式
#header {background-color:black; color:white;text-align:center; padding:5px;}
#nav {line-height:30px; background-color:#eeeeee;height:300px; width:100px;float:left;padding:5px;}
#section {width:350px;float:left;padding:10px;}
#footer {background-color:black; color:white;clear:both; text-align:center;padding:5px;}
< /style>
< /head>
< body> // 主体部分（网页内容编辑区）
< div id=“header”> < h1>这是大标题< /h1> < /div>
< div id=“nav”> 左侧第一行< br> 左侧第二行< br> 左侧第三行< br> < /div>
< div id=“section”> < h2>这是小标题< /h2> < p>这是第一段< /p> < p>这是第一段< /p> < /div>
< div id=“footer”> Copyright ? W3Schools.com < /div>
< /body>
< /html>
PS1: < div> 元素常用作布局工具，因为能够轻松地通过 CSS 对其进行定位。
PS2: 该demo来自： http://www.w3school.com.cn/html/html_layout.asp
● 标签：
和xml语法一样，都是以成对的标签存在的，比如：< body>、< /body>，分别叫开放标签和闭合标签;有时候也可以简写成：< body/>
● DOCTYPE声明：
告诉浏览器使用什么规范
● 标签：
用于定义文件信息，如网页编码，这里推荐utf-8;因为 utf-8 则包含全世界所有国家需要用到的字符,而gb2312只包含全部中文字符。
● < script>标签：
引入javascript
● 特殊标签：
转变成JSP：<%@ page import=“java.sql.*” language=“java” contentType=“text/html; charset=UTF-8” pageEncoding=“UTF-8”%>
导入JSP： <%@ include file="…/test/test.jsp" %>
● 标签规范：
标签名和属性名应小写
HTML标签应闭合
标签应正确嵌套
属性名必须用引号括起来
应添加文档类型声明<!DOCTYPE>
█ HTML常用标签1-基本标签：
-
● 六个不同的 HTML 标题(head)：
< h1>这是标题 1</ h1>
< h2>这是标题 2</ h2>
< h3>这是标题 3</ h3>
< h4>这是标题 4</ h4>
< h5>这是标题 5</ h5>
< h6>这是标题 6</ h6>
这是标题 1
这是标题 2
这是标题 3
这是标题 4
这是标题 5
这是标题 6
● 段落标签（paragraph）：
< p>这是第一个段落…</ p>
< p>这是第二个段落…< /p>
这是第一个段落..
这是第二个段落..
● 水平线标签（horizontalrow）：
< hr/>上面一条水平线标签，下面也是一条水平线标签< hr/>
上面一条水平线标签，下面也是一条水平线标签
● 斜体标签：
< em>这是斜体1</ em>
< i>这是斜体2</ i>
-
这是斜体1
这是斜体2
● 加粗标签：
< strong>这是加粗1</ strong>
< b>这是加粗2</ b>
-
这是加粗1
这是加粗2
● < span>标签：内联元素，可用作文本的容器。
- 定义 span，用来组合文档中的行内元素。
- 可以为 span 应用 id 或 class 属性，这样既可以增加适当的语义，又便于对 span 应用样式。
< p class=“tip”>< span>提示：</ span>… … …< /p>
提示：… … …
PS: 当与 CSS 一同使用时，< span> 元素可用于为部分文本设置样式属性。
● < div>标签：块级元素，没有特定的含义，用于组合其他 HTML 元素的容器。
- 定义文档中的分区或节（division/section）
- 可以把文档分割为独立的、不同的部分。
- 如果用 id 或 class 来标记 < div>，那么该标签的作用会变得更加有效。
< div style=“color:#00FF00”>
< h3>This is a header< /h3>
< p>This is a paragraph.< /p>
< /div>
This is a header
This is a paragraph.
PS1: 可以通过 < div> 和 < span> 将 HTML 元素组合起来。
PS2: 如果与 CSS 一同使用，< div> 元素可用于对大的内容块设置样式属性。
PS3: < div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 < table> 元素进行文档布局不是表格的正确用法。< table> 元素的作用是显示表格化的数据。
█ HTML常用标签2- 特殊符号：
-
● 空格标签： & nbsp;
< a href="#">中国< /a>& nbsp;|& nbsp;< a href="#">赢了< /a>
-
中国 | 赢了
● 换行标签（breakrow）： < br/>
● 大于号(>)： & gt;
● 小于号(<)：& lt;
● 引号(")： & quot;
● 版权符号@： & copy;
█ HTML常用标签3 - 链接：
-
● 图像标签（ img）：
< img src="/i/eg_tulip.jpg" alt=“上海鲜花港 - 郁金香” />
PS:< map>用来定义图像地图，< area> 定义图像地图中的可点击区域。
● 超链接标签（ a）：
- < a>：定义锚。
< p>可以使用图像或者文本来作链接：
< a href="/example/html/lastpage.html">
< img border=“0” src="/i/eg_buttonnext.gif" /> 文本
< /a>
</ p>
PS1:可以增加target="_blank"，表示该链接会在新窗口中打开。
PS2:可以增加name="go20"创建跳转标记，规定锚（anchor）的名称
● 锚链接标签（#）：
- 创建跳转标记:
< a name=“marker”>乙位置:W3C是什么</ a>
- 创建跳转链接:
< a href="#marker">甲位置:锚链接标签</ a>
- 表示从甲位置跳转到乙位置:
甲位置:锚链接标签，点击将跳转到乙位置:W3C是什么
█ HTML常用标签4 - 列表：
-
● 表格:
- 每个表格均有若干行（由 标签定义），每行被分割为若干单元格（由 标签定义）
< table border=“3”>
< tr> < td>第1行第1列< /td> < td>< /td> < /tr>
< tr> < td>第2行第1列< /td> < td>第2行第2列< /td> < /tr>
< /table>
| 第1行第1列 | |
| 第2行第1列 | 第2行第2列 |
● 无序列表:粗体圆点进行标记
< ul>
< li>第一行< /li>
< li>第二行< /li>
< /ul>
< ol>
< li>第一行< /li>
< li>第二行< /li>
< /ol>
- 第一行
- 第二行
- 列表项内部可以使用段落、换行符、图片、链接以及其他列表等等
< dl>
< dt>第一行项目< /dt>
< dd>第一行描述< /dd>
< dt>第二行项目< /dt>
< dd>第二行描述< /dd>
< /dl>
- 第一行项目
- 第一行描述
- 第二行项目
- 第二行描述
█ 相关资料：
-
● 1.HTML 教程- w3school
● 2.HTML 参考手册- w3school
● 3.2018-04-11 HTML 什么是表单 - 歪脖先生的博客 - ixygj197875 - CSDN博客
转载请注明出处：