前端——HTML - 好文

<>1.前端三门技术

学习Web前端技术需要掌握三门基本技术：HTML，CSS，JavaScript：

* HTML：HTML是网页内容的载体。内容就是网页制作者放在页面上想要用户浏览的信息，可以包含文件、图片、视频等
* CSS：CSS样式是表现，就像网页的外衣比字体、颜色变化等
* JavaScript：JavaScript用来实现网页上的特效效果。比如鼠标滑过弹出下拉菜单、鼠标滑过北京颜色改变等
使用工具：HBuilder

首先来写一个简单的HTML代码：
<html> <body> <h1>My First Heading</h1> <p>My first paragraph</p> </body> </
html>

通过如上可以发现，HTML是网页内容的具体载体。接下来我们写一个CSS代码：
<html> <head> <meta charset="utf-8"> <style type = "text/css"> body {color:red}
h1 {color:#00ff00} p.ex {color:rgb(0,0,225)} </style> </head> <body> <h1>My
First Heading</h1> <p>My First Paragraph.在body选择器中定义了本页面的默认文本颜色。</p> <p class =
"ex">该段落定义了class = "ex"，使得段落中的文本是蓝色的。</p> </body> </html>

第一个JavaScript代码如下：
<html> <body> <script type = "text/javascript"> document.write("Hello my first
JavaScript code!") </script> </body> </html>

<>2.HTML标签（上）

<>2.1.HTML简介

<>2.1.1.HTML简介

HTML是由于创建网页的语言。我们通过使用HTML标记标签创建HTML文档来创建网页。HTML代表超文本标记语言，它具有标记标签的集合。
HTML标签是由尖括号括起来的词，如<html>、<body>，标签通常成对出现，例如<html>和</html>。
一对中的第一个标签是开始标签，第二个是结束标签，我们也可以称之为起始标签和闭合标签。

<>2.1.2.HTML元素
I like <code>web</code> and CSS.
起始标签是<code>，结束标签是</code>。标签之间是元素内容，即web，标签和内容一起形成代码元素。

* 元素告诉浏览器您的内容。元素的效果应用于元素内容，每个HTML标签都有不同的特定的含义
* 元素名称不区分大小写。HTML标签不区分大小写，浏览器会识别<code>和<CODE>，甚至能识别<CoDe>，<H1>和<h1>是一样的，但是建议小写
* HTML定义了在HTML文档中实现各种角色的不同类型元素。
<>2.1.3.HTML文件结构

一个HTML文件是有自己的固定结构的
<html> <head>...</head> <body>...</body> </html>
代码讲解：

* <html></html>成为根标签，所有的网页标签都在<html></html>中
* <head></head>标签由于定义文档的头部
，它是所有头部元素的容器。头部元素有<title>、<script>、<style>、<link>、<meta>等
* 在<body>和</body>标签之间的内容是网页的主要内容
，如<h1>、<p>、<a>、<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来
<>2.1.4.HTML注释

HTML注释：代码注释不仅能方便程序员回忆代码用途明晰思路，也可以让其他人快速读懂你的代码，方便合作开发，语法如下：

<>2.1.5.HTML语义化

语义化：通俗的说就是明白每个标签的用途（在什么情况下使用这个标签合适），你如网页的文章标题就得用标题标签。
语义化的作用：

* 更容易被搜索引擎收录
* 更容易让屏幕阅读器读出内容
<>2.1.6.HTML文档类型
\<!DOCTYPE>
作用：帮助浏览器正确地显示页面

Web世界存在许多不同的文档，只要了解文档类型，浏览器才能正确地显示文档。HTML也有许多不同的版本
，只有明白页面中使用的确切的HTML版本，浏览器才能完全正确地显示出HTML页面，这就是<!DOCTYPE>的用处。它不是HTML标签，而是为浏览器提供一种信息
。注意：

* 必须放在HTML文档的第一行
* 声明不是HTML标签
常用声明如下：

* HTML 5： <!DOCTYPE html>
* HTML 4.01： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
* XHTML 1.0： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML乱码解决：当页面出现乱码时，在在<head></head>标签之间添加:“\<meta charset="utf-8">”

<>2.2.HTML文本标签

<>2.2.1.段落标签<p>

如果想在网页上显示文章，这是便需要<p>标签了，把文章的段落放到<p>标签中，语法如下：

* <p>段落文本</p>
* 浏览器会自动地在段落前后添加空行
* 不要忘记结束标签，即使忘记结束标签，大多数浏览器也会正确的将HTML显示出来，但是还是不推荐忘记结束标签
使用文本标签示例代码如下： <html> <head> <meta charset="utf-8"> </head> <body> <p>这是段落一</p>
<p>这是段落二</p> <p>这是段落三</p> </body> </html>

!!!注意：

* 按照规范，不允许省略结束标签，防止出现意想不到的结果或错误
* 对于HTML，无法通过在HTML代码中添加额外的空格或换行改变输出结果，当页面显示时，
浏览器会移除源代码中多余的空格和空行，所有连续的空格或空行都会被算作一个空格，示例如下： <html> <head> <meta charset="utf-8"
> </head> <body> 春眠不觉晓处处闻啼鸟夜来风雨声花落知多少 </body> </html>

<>2.2.2.标题标签<hx>

在HTML文档中，标题（Heading）很重要，标题是通过<h1>到<h6>等标签进行定义的，\<h1>定义最大标题，\<h6>定义最小标题，观察各级标签：
<html> <body> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>
Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> </body> </html>

!!!注意：

* 浏览器会自动的在标签后添加空行
* 默认情况下，HTML会自动的在块级元素前后添加一个额外的空行，比如段落、标题元素前后
* 确保将HTML heading标签只用于标题，不仅仅是为了产生粗体或大号的文本而使用标题，应该将h1作为最主标题，其后依次类推
<>2.2.3.强调标签<em>、<strong>

有了段落标签和标题，现在如果想在一段话中特别强调某几个字，这时可以使用\<em>和\<strong>标签，但是而二者在强调的语气上存在区别：

* <em>：表示强调，在浏览器中用斜体表示
* <strong>：表示更强烈的强调，在浏览器中用加粗表示
使用标签范例：
<html> <head> <meta charset = "utf-8"> </head> <body> <em>em标签</em> <strong>
strong标签</strong> </body> </html>

<em>、<strong>和<span>的区别：

* <em>和<strong>标签是为了强调一段话中的关键字时使用，他们的语义是强调
* <span>标签是没有语义的，它的作用就是为了设置单独的样式用的，把一段话圈起来，然后用css样式
<>2.2.4.引用标签<q>、<blockquote>

<>2.2.4.1.短引用

* <q>用于短引用
* 语法：\<q>引用文本\</q>
* 浏览器通常会为<q>元素包围""
* 这里的<q>标签真正关键地不是它默认给元素包围双引号，如果仅仅是如此完全可以手动从键盘输入，真正关键的是他的语义：引入别人的话
使用范例：
<html> <head> <meta charset = "utf-8"> </head> <body>  <
p>以下为文本引用<q>引用文本</q></p> </body> </html>

<>2.2.4.2.长引用

* <blockquote>用于长引用
* 语法：\<blockquote>引用文本\</blockquote>
* 浏览器对\<blockquote>标签的解析是缩进样式 <html> <head> <meta charset = "utf-8"> </head> <
body> <p>以下为百度百科对于JavaScript的定义 <blockquote>
JavaScript是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
</blockquote></p> </body> </html>

<>2.2.5.换行标签与分割线标签

<>2.2.5.1.换行标签

如果希望不产生一个新的段落的情况下进行换行，请使用\<br/>标签，<br/>标签作用相当于world文档中的回车，使用范例如下：
<html> <head> <meta charset = "utf-8"> </head> <body> <p> To break<br/>lines<br
/>in a </p> </body> </html>

!!!注意：是<br>还是<br/>？

这二者很相似，但是在XHTML、XML以及未来的HTML版本中，不允许使用没有结束标签（闭合标签）的HTML元素，即使使用<br>在所有浏览器中都没有显示问题，但是
使用\<br/>是更长远的保障

<>2.2.5.2.分割线标签

\<hr/>标签和\<br>标签一样也是一个空标签，所以只有一个开始标签，没有结束标签。使用范例如下：
<html> <head> <meta charset = "utf-8"> </head> <body> <p> Java从<br/>入门 <hr/>
到精通</p> </body> </html>

\<hr/>标签在浏览器的默认样式线条比较粗，颜色为灰色，可能会觉得不够美观，在学习CSS后可以对其进行修改。

<>2.2.6.特殊字符

* 空格：
* 注意：“;”必不可少 <html> <head> <meta charset = "utf-8"> </head> <body> <p> 春眠不觉晓<
br/> 处处闻啼鸟<br/> </p> </body> </html>

其他特殊字符：

属性显示结果描述
® ® 已注册
© © 版权
&trade ™ 商标 <html> <head> <meta charset = "utf-8"> </head> <body> <p> 注册:®<
br/> 版权:©<br/> 商标:™<br/> </p> </body> </html>

<>2.3.address标签

* address标签，为网页加入地址信息
* 语法：\<address>地址信息\</address>
* 在浏览器显示样式为斜体，如果不喜欢斜体 -，可以在后续学习中对其进行修改 <html> <head> <meta charset = "utf-8">
</head> <body> <address>陕西省西安市XX区XX号</address> </body> </html>

<>2.4.code标签

* 在介绍语言技术的网站中，避免不了在网页中显示一些计算机专业的编程代码，当代码为一行代码时，你就可以使用\<code>标签了
* 语法：\<code>代码语言\</code> <html> <body> <code>var i = i + 3000</code> </body> <
/html>

在文章中一般如果要插入多行代码时不能使用<code>标签，如果是多行代码，可以使用<pre>标签。

* \<pre>标签的主要作用预格式化的文本，被包围在pre元素中的文本通常会保留空格和换行符，如果用以前的方法，回车需要输入<br/>标签，空格需要输入
* <pre>标签不只是为显示计算机的源代码时用的，在你需要在网页中预显示格式时可以用它，只是<pre>标签的一个常见应用就是用来展示计算机的源代码 <
html> <head> <meta charset="utf-8"> </head> <body> <pre> // 以下为Java代码 int x =
0; int y = 1; int z = x+y;</pre> </body> </html>

<>3.HTML标签（下）

<>3.1.HTML列表标签

HTML支持：

* 无序列表
* 有序列表
* 定义列表
<>3.1.1.无序列表

* 无序列表是一个项目的列表，此列项目使用粗体圆点（小黑圆圈）进行标记
* 无序列表始于\<ul>标签，每个列表项始于\<li>
* 列表项内部可以使用段落、换行符、图片、链接以及其他列表等等 <!DOCTYPE html> <html> <head> <meta charset="
utf-8"> </head> <body> <ul> <li>你是谁</li> <li>我是王者峡谷最靓的仔</li> <li>hahahahaha</li>
</ul> </body> </html>

<>3.1.2.有序列表

* 有序列表是一个项目的列表，此列项目使用数字进行标记
* 无序列表始于\<ol>标签，每个列表项始于\<li>
* 列表项内部可以使用段落、换行符、图片、链接以及其他列表等等 <!DOCTYPE html> <html> <head> <meta charset="
utf-8"> </head> <body> <ol> <li>你是谁</li> <li>我是王者峡谷最靓的仔</li> <li>hahahahaha</li>
</ol> </body> </html>

<>3.1.3.定义列表

* 自定义列表不仅仅是一列项目，而是项目及其注释的集合
* 自定义列表以\<dl>标签开始，每个自定义列表项以\<dt>开始，每个自定义列表项的具体内容定义以\<dd>开始
* 列表项内部可以使用段落、换行符、图片、链接以及其他列表等等 <!DOCTYPE html> <html> <head> <meta charset="
utf-8"> </head> <body> <dl> <dt>你是谁</dt> <dd>我是王者峡谷最靓的仔</dd> <dd>hahahaha</dd> <
dt>你到底是谁</dt> <dd>我真的只是个靓仔</dd> <dd>hahahahaha</dd> </dl> </body> </html>

<>3.2.HTML块

* 可以通过\<div>和\<span>将HTML元素组合起来
* 大多数HTML元素被定义成块级元素或内联元素
* 块级元素：block level element
* 内联元素：inline element
<>3.2.1.块级元素

块级元素在浏览器显示时，通常会以新行来开始和结束，比如：<h1>、<p>、<ul>、<table>

<>3.3.2.内联元素

内联元素在浏览器显示时，通常不会以新行开始和结束，比如：<b>、<td>、<a>、<ing>

<>3.2.3.<div>元素

* 定义：<div>可定义文档中的分区或节，<div>标签可以把文档分割成独立的、不同的部分，它可以用作严格的组织工具，并且不使用任何格式与其关联
，如果用id或class来标记<div>，那么改标签的作用会变得更加有效
* 用法：<div>是一个块级元素，这意味着它的内容自动地开始一个新行，实际上，换行
是<div>固有的唯一格式表现。可以通过<div>的class或id应用额外的样式，不必为每一个<div>都加上class或id，虽然这样做也有一定的好处。
* 可以对同一个<div>元素应用class或id属性，但是更常见的情况是只应用其中一种，这二者的主要差异是：class用于元素组
（类似的元素，或者可以理解为某一类元素），而id用于表示单独的唯一元素 <!DOCTYPE html> <html> <head> <meta charset=
"utf-8"> </head> <body> <h1>Java课程</h1> <p>SE、前端、EE</p> ... <div class =
"JavaSE"><h2>SE</h2> <p>多线程、内存划分等等</p> ... </div> <div class = "JavaEE"> <h2>EE
</h2> <p>Spring、SpringBoot等等</p> ... </div> ... </body> </html>

div 为⽂文档添加了了额外的结构，由于这些 div 属于同⼀类元素，所以可以使⽤用 class=“JavaSE” 对这些 div
进行标识，这么做不不仅为 div添加了合适的语义，而且便于进⼀步使⽤样式对 div 进行格式化。

<>3.2.4.<span>元素

* HTML<span> 元素是内联元素，可用作文本的容器。<span>元素也没有特定的含义，当与 CSS 一同使用时, 元素可用于为部分文本设置样式属性
* <span>标签用来组合文档中的行内元素
* 注释：span 没有固定的格式表现，当对它应用了样式时，它才会产生视觉上的变化
* 如果不对 span 应用样式，那么span 元素中的文本与其他文本不会有任何视觉上的差异
* 可以为 span 应用 id 或 class 属性，这样既可以增加适当的语义，又便于对 span 应用样式
* 可以对同一个\ 元素应⽤ class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是：class ⽤用于元素组
（类似的元素，或者可以理理解为某一类元素），⽽而 id ⽤用于标识单独的唯一的元素 <!DOCTYPE html> <html> <head> <meta
charset="utf-8"> </head> <body> <p><span>some text.</span>some other text.</p>
</body> </html>

如果不对 span 应用样式，那么 span 元素中的文本与其他文本不会有任何视觉上的差异。尽管如此，上例中的 span 元素仍然为p元素增加了了额外的结构
。

<>3.3.HTML表格

<>3.3.1.HTML表格

* 表格由\<table>标签来定义，每个表格内有若干行，由\<tr>标签定义，每行被划分为若按个单元格，由\<td>标签划分
* 字母td表示表格数据（table data），即数据单元内容，数据单元格可以包括文本、图片、列表、表单、水平线、表格等 <!DOCTYPE html>
<html> <head> <meta charset="utf-8"> </head> <body> <table border = "1"> <tr> <
td>row 1,cell 1</td> <td>row 1,cell 2</td> </tr> <tr> <td>row 2,cell 1</td> <td>
row 2,cell 2</td> </tr> </table> </body> </html>

<>3.3.2.表格和边框属性

如果不定义边框属性（border属性），表格将不显示边框。不带表框显示表格示例如下：

热门工具换一换