小言_互联网的博客

前端——HTML

2020-04-01 15:16 380人阅读  评论(0)

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>
		<!--浏览器通常会在q元素周围包围引号-->
		<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.特殊字符

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


其他特殊字符：

属性 显示结果 描述
® ® 已注册
© © 版权
&trade ™ 商标 
<html>
	<head>
		<meta charset = "utf-8">
	</head>
	<body>
		<p>
			注册:&reg;<br/>
			版权:&copy;<br/>
			商标:&trade;<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属性），表格将不显示边框。不带表框显示表格示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<tr>
			<td>Row 1,cell 1</td>
			<td>Row 2,cell 2</td>
		</tr>
		<table>
		</table>
	</body>
</html>

3.3.3.表格的表头

表格的表头使用\<th>标签进行定义，大多数浏览器会把表头显示为粗体居中的文本，示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<table border = "1">
			<tr>
				<th>Heading</th>
				<th>Another Heading</th>
			</tr>
			<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.4.表中的空单元格

在一些浏览器中，没有内容的表格单元显示地不太好，如果某个单元格是空的，没有内容，浏览器可能无法显示出这个单元格的边框

<!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></td>
				<td>row 2,cell 2</td>
			</tr>
		</table>
	</body>
</html>


!!!注意：如上显示出了空的单元格的边框，但有的浏览器按照如上无法显示出边框，为了避免这种情况，在空单元格中添加一个空格占位符就可以显示出边框，示例代码如下：

<!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>&nbsp;</td>
				<td>row 2,cell 2</td>
			</tr>
		</table>
	</body>
</html>

3.3.5.带有标题的表格

  • caption元素定义表格标题
  • caption标签必须紧随table标签之后，只能对每个表格定义一个标签
  • 通常定义的标题会被居中于表格之中
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<table border = "1">
			<caption>我的标题</caption>
			<tr>
				<td>100</td>
				<td>200</td>
				<td>300</td>
			</tr>
			<tr>
				<td>400</td>
				<td>500</td>
				<td>600</td>
			</tr>
		</table>
	</body>
</html>

3.4.HTML链接

HTML使用超级链接与网络上的另一个文档相连，几乎可以在所有的网页中找到链接，点击链接可以从一个页面跳转到另一个界面。

3.4.1.HTML超链接


转载：https://blog.csdn.net/LiLiLiLaLa/article/details/89340476
查看评论
* 以上用户言论只代表其个人观点，不代表本网站的观点或立场