HTML基础

前言
第1章 HTML介绍
- 1.1 HTML是什么
- 1.2 HTML标签解释
第2章 HTML标签
第3章 HTML基本标签
3.4 换行
第4章 HTML格式
第5章 HTML实体
- 5.1 什么是HTML实体
- 5.2 举例
第6章 HTML链接
第7章 HTML框架
第8章 HTML表格
- 8.1 什么是HTML表格
- 8.2 有边框的表格
第9章 HTML列表
第10章 HTML表单
第11章 HTML背景
- 11.1 图片背景
- 11.2 背景颜色
总结

前言

学习HTML是必须的，关乎WEB那么就少不了HTML，具体的就往下看吧

第1章 HTML介绍

1.1 HTML是什么

HTML表示超文本标记语言（Hyper Text Markup Language）。
HTML文件是一个包含标记的文本文件。
这些标记保速浏览器怎样显示这个页面。
HTML文件必须有htm或者html扩展名。
HTML文件可以用一个简单的文本编辑器创建。

注：解压开发环境中sublime软件，绿化后打开使用，新建文件，写入内容，保存的文件后缀名需要是.html结尾，再使用浏览器打开即可。

1.2 HTML标签解释

HTML文档中，第一个标签是。这个标签告诉浏览器这是HTML文档的开始。HTML文档的最后一个标签是，这个标签告诉浏览器这是HTML文档的终止。
在<head>和</head>标签之间文本的是头信息。在浏览器窗口中，头信息是不被显示的。
在<title>和</title>标签之间的文本是文档标题，它被显示在浏览器窗口的标题栏。
在<body>和</body>标签之间的文本是正文，会被显示在浏览器中。
在<b>和</b>标签之间的文本会以加粗字体显示。

第2章 HTML标签

2.1 什么是HTML标签

HTML使用不同的标签来实现不同的功能。

2.2 HTML标签书写格式

1.成对出现<>，例如<b>和</b>。
2.第一个表示开始，第二个表示结束。
3.开始标签和结束标签之间的文本是内容。
4.标签大小写无所谓，<b>和<B>表示的意思一样。

2.3 HTML标签的属性

正常的主体标签是：

<body>

但是我现在想让页面的背景变成红色，那么可以这么样写：

<body bgcolor="red">

再举个例子，我想创建一个表格，但是这个表格不希望他有边框，可以这样写:

<table border="0">

第3章 HTML基本标签

3.1 HTML基本标签组成

HTML中最重要的标签是定义标题元素，段落和换行的标签。

下面的例子一个简单的HTML组成:

<html>
  <body>
    我的第一个HTML网页
  </body>
</html>

3.2 标题元素

解释：

1.标题元素由标签<h1>到<h6>定义。
2.<h1>定义了最大的标题元素
3.<h6>定义了最小的标题元素

举例：显示6个标签

<html>
  <body>
    <h1>1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>
    <h6>6级标题</h6>
  </body>
</html>

3.3 段落

解释：

1.段落是用<p>标签定义的。
2.HTML自动在一个段落前后各添加一个空行。

举例：

<html>
  <body>
    <p>这是第1段话</p>
    <p>这是第2段话</p>
    <p>这是第3段话</p>
    <p>这是第4段话</p>    
  </body>
</html>

3.4 换行

解释：

当需要结束一行，并且不想开始新段落时，使用<br>标签。<br>标签不管放在什么位置，都能够强制换行。

举例：

<html>
  <body>
	  主体内容
    <br>
    换行啦啦啦
    <br>
  </body>
</html>

3.5 居中的标题

<html>
	<body>
		<h1 align="center">这是居中的标题</h1>
		<p>这是一段文字,没什么意义,反正我也不知道自己在打什么哈哈哈</p>
	</body>
</html>

3.6 插入水平线

解释：

使用<hr>表示插入一条水平线

举例：

<html>
	<body>
		<p>插入水平线</p>
		<hr>
		<p>这是一条线</p>
		<hr>
		<p>还是一条线</p>
    <hr>
  </body>
</html>

3.7 背景颜色

解释：

通过给<body>标签添加属性来控制背景颜色

举例：

<html>
	<body bgcolor="yellow">
    <h2>看，黄色的背景！</h2>
	</body>
</html>

第4章 HTML格式

4.1 什么是HTML格式

HTML定义了很多元素用来格式化输出，比如加粗和倾斜文本。

4.2 格式化文字

<html>
<body>
	<strong>文本加粗</strong>
	<br>
	<big>文本放大</big>
	<br>
	<small>文本缩小</small>
	<br>
	<i>文本倾斜</i>
	<br>
	文本<sup>上标</sup>
	<br>
	文本
	<sub>下标</sub>
	<br>
</body>
</html>

4.3 格式化代码

<html>
	<body>
		<b>预处理格式用来显示代码非常好</b>
		<pre>
  	for i in {1..10}
  	do
  	  echo $i
  	done
		</pre>
	</body>
</html>

4.4 文本倒着输出

<html>
	<body>
		<bdo dir="rtl">
		这段文字是倒着的
		</bdo>
	</body>
</html>

第5章 HTML实体

5.1 什么是HTML实体

1.有些字符，比如说“<”字符，在HTML中有特殊的含义，因此不能在文本中使用。
2.想要在HTML中显示一个小于号“<”，需要用到字符实体。

5.2 举例

<html>
  <body>  	
		<p>
			小于号    &lt;    &#60; <br>
			大于号    &gt;    &#62; <br>
			and符号	  &amp;	  &#38; <br>
			引号	    &quot;	&#34; <br>
  	  单引号	           &#39; <br>
		</p>
  </body>
</html>

第6章 HTML链接

6.1 什么是HTML链接

就是通过点击链接跳转到其他页面或其他的网站

6.2 跳转到网站的其他页面

<html>
  <body>
    <a href="lastpage.htm">点击跳转</a>到网站的其他页面<br>
  </body>
</html>

6.3 跳转到其他网站

<html>
  <body>
    <a href="http://www.baidu.com/">点击跳转</a> 到其他网站<br>
  </body>
</html>

6.4 图片跳转

<html>
  <body>
    <a href="https://baike.baidu.com/item/%E6%9E%97%E7%BA%B3%E6%96%AF%C2%B7%E6%9C%AC%E7%BA%B3%E7%AC%AC%E5%85%8B%E7%89%B9%C2%B7%E6%89%98%E7%93%A6%E5%85%B9/1034429?fromtitle=linus&fromid=400810&fr=aladdin">点击图片跳转到百度百科<img border="0" src=".Linus.jpg"></a><br>
  </body>
</html>

6.5 跳转时新打开一个页面

<html>
  <body>
    <a href="https://baike.baidu.com/item/%E6%9E%97%E7%BA%B3%E6%96%AF%C2%B7%E6%9C%AC%E7%BA%B3%E7%AC%AC%E5%85%8B%E7%89%B9%C2%B7%E6%89%98%E7%93%A6%E5%85%B9/1034429?fromtitle=linus&fromid=400810&fr=aladdin" target="_blank">点击图片新开一个窗口跳转到百度百科<img border="0" src=".Linus.jpg"></a>
  </body>
</html>

6.6 跳转到本页面的某个位置

<html>
<body>
<p>
<a href="#C4">
See also Chapter 4.
</a>
</p>
<p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
<a name="C4"><h2>Chapter 4</h2></a>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 10</h2>
<p>This chapter explains ba bla bla</p>
</body>
</html>

第7章 HTML框架

7.1 什么是HTML框架

使用框架，可以在一个浏览器窗口中显示不止一个HTML文档。
这样的HTML文档被称为框架页面，它们是相互独立的。

在这里插入代码片

7.2 标签解释

frameset标签

1.<frameset>标签定义了如何将窗口拆分成框架。
2.每个frameset标签定义了一组行和列。
3.行/列的值指明了每个行/列在屏幕上所占的大小

frame标签

<frame>标签定义了每个框架中放入什么文件。

7.3 垂直分栏

举例：

<html>
<frameset cols="25%,75%>
	<frame src="frame_a.htm">
	<frame src="frame_b.htm">
</frameset>
</html>

解释：

1.第一个被设置成窗口宽度的25％，第二个被设置成窗口宽度的75％。
2.页面“frame_a.htm”被放在第一个分栏中，“frame_b.htm”被放在第二个分栏中。

7.4 水平分栏

<html>
<frameset rows="25%,50%,25%">
	<frame src="frame_a.htm">
	<frame src="frame_b.htm">
	<frame src="frame_c.htm">
</frameset>
</html>

7.5 不可改动的分栏

<html>
<frameset rows="50%,50%">
	<frame noresize="noresize" src="frame_a.htm">
	<frameset cols="25%,75%">
		<frame noresize="noresize" src="frame_b.htm">
		<frame noresize="noresize" src="frame_c.htm">
	</frameset>
</frameset>
</html>

7.6 使用导航框架跳转到指定章节

<html>
<frameset cols="200,*">
	<frame src="frame_linksection.htm">
	<frame src="frame_section.htm" name="showframe">
</frameset>
</html>

第8章 HTML表格

8.1 什么是HTML表格

HTML 中的表格和 Excel 中的表格是类似的,都包括行、列、单元格、表头等元素

8.2 有边框的表格

<html>
  <body>
  <b>表格</b>
	<br>
	<table border="1">
		<tr>
			<td>第1行第1列</td>
			<td>第1行第2列</td>
		</tr>
		<tr>
			<td>第2行第1列</td>
			<td>第2行第2列</td>
		</tr>
	</table>
	</body>
</html>

第9章 HTML列表

9.1 什么是列表

HTML支持有序、无序和自定义列表。

9.2 无序列表

<html>
<body>
<h4>An Unordered List:</h4>
<ul>
	<li>Coffee</li>
	<li>Tea</li>
	<li>Milk</li>
</ul>
</body>
</html>

9.3 有序列表

<html>
<body>
<h4>An Ordered List:</h4>
<ol>
	<li>Coffee</li>
	<li>Tea</li>
	<li>Milk</li>
</ol>
</body>
</html>

第10章 HTML表单

10.1 什么是HTML表单

HTML表单用来选择不同种类的用户输入。

10.2 文本框

<html>
<body>
<form>
First name:
<input type="text" name="firstname">
<br>
Last name:
<input type="text" name="lastname">
</form>
</body>
</html>

10.3 密码框

<html>
<body>
<form>
Username:
<input type="text" name="user">
<br>
Password:
<input type="password" name="password">
</form>
<p>
Note that when you type characters in a password field, the browser displays asterisks or bullets instead of the characters.
</p>
</body>
</html>

10.4 单选按钮

<form>
<input type="radio" name="sex" value="male">Male
<br>
<input type="radio" name="sex" value="female">Female
</form>

10.5 复选框

<form>
<input type="checkbox" name="bike">
I have a bike
<br>
<input type="checkbox" name="car">
I have a car
</form>

10.6 下拉框

<html>
<body>
<form>
<select name="cars">
<option value="volvo">Volvo
<option value="saab">Saab
<option value="fiat">Fiat
<option value="audi">Audi
</select>
</form>
</body>
</html>

10.7 文本框

<html>
<body>
<p>
This example demonstrates a text-area.
</p>
<textarea rows="10" cols="30">
The cat was playing in the garden.
</textarea>
</body>
</html>

10.8 按钮

<html>
<body>
<form>
<input type="button" value="Hello world!">
</form>
</body>
</html>

第11章 HTML背景

11.1 图片背景

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>test</title> 
</head>
<body background="xxx/img/bg.jpg">
<!--  这里的图片请指定电脑上图片的正确路径 -->
<h1>Hello world!</h1>
<p><a href="https://www.baidu.com/">百度</a></p>
</body>
</html>

11.2 背景颜色

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>test</title> 
</head>
<body bgcolor="#E6E6FA">

<h1>Hello world!</h1>
<p><a href="https://www.baidu.com/">百度</a></p>

</body>
</html>

总结

以上便是有关HTML的基础内容，需要掌握，建议不会的朋友多多练习，有关HTML更多的内容可以查看HTML手册，可以前往：菜鸟教程，w3School等等。

这里HTML稍微掌握能看懂HTML代码就好，毕竟如果不是专业前端不用太过深入。如果你想看网页代码：鼠标右键点击查看网页源代码或者F12打开开发者模式都可以。

附上公众号;
在这里插入图片描述