前置
前面我们主要讲述了Java的基本语法，到目前为止，我们已经基本上将基础语法部分学完了，接下来就要开始学习新的知识了：前端技术。
在学前端技术之前，我认为前端技术的学习，最重要的是将各种标签背掉，经常自己敲代码。这样的话，就能把前端学好了。
前置导学
首先大家最好是在自己的电脑里面安装谷歌浏览器、submit、vscode软件，首先推荐谷歌浏览器是因为这个浏览器非常正规
速度很快，也不会推荐广告；其次，根据有关统计，全球适用过个浏览器的人数占总使用人数的30%，百度第二，占了15%左右
第二比第一少了一半，可见谷歌浏览器有多热了。
submit和vscode两款软件大家都可以在官网上免费下载。submit其实就是相当于是记事本的功能，但是它比记事本好在他
对代码有增亮功能，要是直接使用记事本编代码其实也不是不可以，但是没有几十年的代码编写经验，是写不下来的。vscode是
一款功能非常强大的编程软件，强烈推荐它的原因，一因为是免费的，第二是他非常小，综合来讲，这是一个非常优秀的代码编辑器。
另外大家也可以给自己的谷歌浏览器添加一些扩展，这里我给大家提供一个前端开发神器--FeHelper
下面是它的网址：https://www.chromedownloads.net/extensions/757.html
（大家点进这个链接之后，点击下载，得到一个.crx文件，大家要将它更改为.zip文件，然后再将它拖到你安装的chrome浏览器的
扩展（这里要记得将开发者模式打开）里面，就可以用了。）
FeHelper有很多功能，例如：字符串编码，二维码生成器，图片生成器，取色器……都是非常实用的。
HTML语言
HTML介绍
HTML语言简介
HTML是英文单词 HyperText Mark-up Language 的首字母缩写，意思是超文本标记语言
HTML语言不是编程语言，而是一种标记语言
超文本指的是超链接，标记指的是标签，这是一种用来编写网页的语言，由一个一个的标签组成的语言
用这种语言制作的文件是一个文本文件，文件的扩展名为.htm或.html
html文档又叫web页面，其实就是一个网页，html文档用编辑器打开的形式是文本，可以用文本的方式来编辑它
如果用浏览器打开，显示的内容会是根据文本的内容渲染的一个网页。
HTML语言的发展历史
（见下图）
HTML文档类型的设定
1.HMTL在不同版本下的文档类型的设置，即<!DOCTYPE>对应的属性值
2.下面我将通过代码的性实现打击分别展示HTML的三种文档类型。
<!--HTML,对应早期的HTML4.0.1，是比较早期的版本，其基本结构如下-->
<!DOCTYPE HTML PUBLIC"-//W3T//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
<h1>这是我的第一个HTML文档</h1>
</body>
</html>
<!--XHTML,下面是他的基本结构-->
<!DOCTYPE html PUBLIC"-//W3T//DTD xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.arg/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Cntent-Type" content="text/xhtml;charset=UTF-8">
<title>Document</title>
</head>
<body>
<h1>这是我的第一个XHTML文档！</h1>
</body>
</html>
<!--HTML5是我们现在使用的主流html文档的编辑版本，其基本结构如下-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>这是我的第一个HTML5文档</h1>
</body>
</html>
这里我是将所有的代码都给大家了，大家可以直接看到代码的构成，同时可以copy下来自己运行查看效果。
HTML语言的基础语法
HTML的基础语法
HTML文档通常是以.htm和.html结尾
HTML文本通常由两部分组成，即“头”部分head，和“身体”部分body，头部分是用来提供网页的信息，网页部分提供网页的具体内容。
HTML是有标签和文档来哪个部分组成，其中标签部分分为两种：单标签<标签名/>，双标签<标签名></标签名>
HTML 文档总是被<html>...</html>包围着。
HTML 标签还可以添加属性，形如：<标签名> 属性名一="" 属性名二="" ...</标签名>
HTML 标签的书写规范：标签名要小写，标签要封闭，属性名要加引号。
下面我将通过具体的代码向大家展示html的基本语法。
注释：在html文档里面只有一种注释方式就是：<!--注释内容-->
HTML文档中head头的设置下面我将通过代码的方式向大家展示。
当我们将HTML文档的基础语法讲完之后迎接我们的将会是集中学习HTML文档的标签内容的知识了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<base href="http://www.baibu.com/" target="_blank"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link type="text/css" rel="typesheet" href="**.css"
<type type="text/css">
嵌入css模式
</type>
<script >
Javascript脚本程序
</script>
<!--虽然我之后会向大家提供图片但是我还是想在这里强调一下这几个标签的内涵和用法：
1.meta：定义了文档中的元数据；
2.base：定义了页面链接标签的默认连接地址；
3.link:定义文档和外部资源之间的连接关系；
4.style：定义了HTML文件的文本样式；
5.script：定义了客户端的脚本文件；
6.title：定义网页的标题。
-->
</head>
<body>
</body>
</html>
常见标签
前置导学
首先大家最好是在自己的电脑里面安装谷歌浏览器、submit、vscode软件，首先推荐谷歌浏览器是因为这个浏览器非常正规
速度很快，也不会推荐广告；其次，根据有关统计，全球适用过个浏览器的人数占总使用人数的30%，百度第二，占了15%左右
第二比第一少了一半，可见谷歌浏览器有多热了。
submit和vscode两款软件大家都可以在官网上免费下载。submit其实就是相当于是记事本的功能，但是它比记事本好在他
对代码有增亮功能，要是直接使用记事本编代码其实也不是不可以，但是没有几十年的代码编写经验，是写不下来的。vscode是
一款功能非常强大的编程软件，强烈推荐它的原因，一因为是免费的，第二是他非常小，综合来讲，这是一个非常优秀的代码编辑器。
另外大家也可以给自己的谷歌浏览器添加一些扩展，这里我给大家提供一个前端开发神器--FeHelper
下面是它的网址：https://www.chromedownloads.net/extensions/757.html
（大家点进这个链接之后，点击下载，得到一个.crx文件，大家要将它更改为.zip文件，然后再将它拖到你安装的chrome浏览器的
扩展（这里要记得将开发者模式打开）里面，就可以用了。）
FeHelper有很多功能，例如：字符串编码，二维码生成器，图片生成器，取色器……都是非常实用的。
=======================================================================================================
HTML语言简介
HTML是英文单词 HyperText Mark-up Language 的首字母缩写，意思是超文本标记语言
HTML语言不是编程语言，而是一种标记语言
超文本指的是超链接，标记指的是标签，这是一种用来编写网页的语言，由一个一个的标签组成的语言
用这种语言制作的文件是一个文本文件，文件的扩展名为.htm或.html
html文档又叫web页面，其实就是一个网页，html文档用编辑器打开的形式是文本，可以用文本的方式来编辑它
如果用浏览器打开，显示的内容会是根据文本的内容渲染的一个网页。
HTML语言的发展历史
（见下图）
HTML文档类型的设定
1.HMTL在不同版本下的文档类型的设置，即<!DOCTYPE>对应的属性值
2.下面我将通过代码的性实现打击分别展示HTML的三种文档类型。
=======================================================================================================
HTML的基础语法
HTML文档通常是以.htm和.html结尾
HTML文本通常由两部分组成，即“头”部分head，和“身体”部分body，头部分是用来提供网页的信息，网页部分提供网页的具体内容。
HTML是有标签和文档来哪个部分组成，其中标签部分分为两种：单标签<标签名/>，双标签<标签名></标签名>
HTML 文档总是被<html>...</html>包围着。
HTML 标签还可以添加属性，形如：<标签名> 属性名一="" 属性名二="" ...</标签名>
HTML 标签的书写规范：标签名要小写，标签要封闭，属性名要加引号。
下面我将通过具体的代码向大家展示html的基本语法。
注释：在html文档里面只有一种注释方式就是：<!--注释内容-->
HTML文档中head头的设置下面我将通过代码的方式向大家展示。
当我们将HTML文档的基础语法讲完之后迎接我们的将会是集中学习HTML文档的标签内容的知识了。
======================================================================================================
html文档的标签
文本标签：
<hn></hn>n取值范围：1--6，标题标签（加粗，换行）
<i>...</i>斜体
<em></em>强调斜体
<b></b>加粗
<strong></strong>强调加粗
<cite></cite>作品名称（引用）
<sub></sub>下标<sup></sup>上标
<del></del>删除线
<u></u>下划线
格式化标签：
<br/> 换行
<hr/> 水平线
<p><p/>换段
列表：
<ul></ul>无序列表
<ol></ol>有序列表 其中type类型值A a I i 1 start属性表示起始值
<li></li>列表项
<dl></dl>自定义列表
<dt></dt>自定义列表头
<dd></dd>自定义列表内容
<div></div>通常用于组合块级元素，以便CSS对这些元素进行格式化（可以自动换行）
<span></span>常用于包含的文本，你可以使用CSS对他进行包装，你也可以使用JavaScript对它进行操作。（不会自动换行）
图像标签
1.在html中插入一个图像，用img他是一个单标签：<img/>
2.<img/>标签的属性：
src:图片名以及URL地址
alt:图片加载失败时的提示消息
title:图片提示文字
width:图片宽度
height:图片高度
border:图片边框粗细
理解绝对路径和相对路径
绝对路径:就是你的文件的真正路径，你可以在你的硬盘里面看到你文件的绝对路径。
例如：C:\xxx\aaa.txt 就是文件aaa.txt的绝对路径。
再如：http://www.xxx.com就代表了一个真实的URL的绝对路径。
相对路径：相对于某一个基准的路径。
例如：web中“/”这个就是web文档的根路径。
和物理路径的相对表示：
“./”这个表示当前目录；
“../”表示当前目录的上一级目录。
超链接标签
超链接用标签：<a href="要访问的地方的网址(前面一定要加上http://)"></a>
a标签的属性
1.href必须给它赋上链接要跳转的地址
2.traget 属性的取值：
_blank新窗口
_parent父窗口
_self本窗口（默认）
_top 顶级窗口
_framename 窗口名
_title 文字提示属性
锚点：生成一个可以点击的锚点，当我们点击他的时候就会跳转到锚点指定的位置
先定义一个锚点：
<a id="标志">描述内容</a>
在使用锚点：
<a href="">描述内容（不需要一定和上面的内容一致）</a>
表单标签
form:提交的默认地址。
method：可以有两个值一个是“get”一个是“post”
get：跳转到指定地方的时候，会将你的name和password一起显示出去。
post：相反，在传送的时候不会讲这些内容显示出去，相对会安全一点。
input标签：input标签有很多属性，其中最重要的属性就是type和name了。
在HTML5之前就已经有的type属性：
color 颜色
hidden 隐藏域，就是在属性的网页上不会显示但是，里面包含的数据会跟随着数据传输一起上传到目标地址里；
checkbox 多选
radio 单选
submit提交
reset 重置
text单行文本框
password密码输入框
image 图片提交按钮
button 按钮
除了上述的的这些type类型，HTML5又给提供一些其他的表单类型：
email 邮件地址上传文本框
url 用于应当包含文件地址的内容的输入域
number 用于需要输入数字的输入域：例如，年龄……
max：规定数字的最大值。
min：规定数字的最小值。
value：未输入数字是的默认值。
step：规定的数字之间的间隔。
range 由于包含一定范围的数值输入域
max：规定数字的最大值。
min：规定数字的最小值。
value：未输入数字是的默认值。
step：规定的数字之间的间隔。
Date picker：日期选择器
date：选取日、月、年
month：选取年和月
week：选取年和周
time：选取时间（时、分）
datetime：选取时间、日、月、年（UCT时间）
datetime-local：选取本地时间、日、月、年（本地时间）
search 用于搜索比如站点搜索或者谷歌搜索
color 颜色选择 其实这个type和上面的color效果是一样的，大家随便使用。
select标签：创建下拉列表标签
name：定义名称，用来储存文本域中的文本的值
multiple:多选
disabled:当该属性的只是True时，表示该菜单被禁用
<option></option>:嵌入到select标签里面，又来编写下拉项内容。
value:下拉项内容
selected:默认选中内容
textarea标签：多行文本域
name：定义名称，用来储存文本域的值
disabled:当该属性的只是True时，表示该菜单被禁用
readonly：只读
默认值是在<></>之间的区域
cols：定义列的数目
rows：定义行的数目
button标签：你可以在这个标签里面放置内容，比如说图像或文档，这是该标签与input标签的按钮的不同之处
<optgroup></optgroup>标签定义选项组，这个标签允许你为你的选项分组。（详情请见代码）
<datalist></datalist>标签:与option配合使用就能实现输入值的下拉列表。
以上就是一些常见并且重要的表单标签，还有得没有讲到的标签大家只要理解即可。
表格标签
表格标签：
具体的见表格（下图附录）详情请见代码。
文本标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>A</title>
</head>
<body>
<h1>标题一</h1>
<h2>标题二</h2>
<h3>标题三</h3>
<h4>标题四</h4>
<h5>标题五</h5>
<h6>标题六</h6>
<b>加粗</b><br/>
<strong>强调加粗</strong><br/><br/>
<i>斜体</i><br/>
<em>强调斜体</em><br/>
水分子：H<sub>2</sub>O<br/>
十的三次方：10<sup>3</sup><br/>
<cite>书名：《清明上河图》</cite><br/>
<u>下划线</u><br/>
<del>删除线</del><br/>
干货来了
</body>
</html>
格式化标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML文档的标签--格式化标签</title>
</head>
<body>
<h1>前置导学</h1>
<hr/>
<p>首先大家最好是在自己的电脑里面安装谷歌浏览器、submit、vscode软件，首先推荐谷歌浏览器是因为这个浏览器非常正规
速度很快，也不会推荐广告；其次，根据有关统计，全球适用过个浏览器的人数占总使用人数的30%，百度第二，占了15%左右
第二比第一少了一半，可见谷歌浏览器有多热了。</p>
<p>和vscode两款软件大家都可以在官网上免费下载。submit其实就是相当于是记事本的功能，但是它比记事本好在他
对代码有增亮功能，要是直接使用记事本编代码其实也不是不可以，但是没有几十年的代码编写经验，是写不下来的。vscode是
一款功能非常强大的编程软件，强烈推荐它的原因，一因为是免费的，第二是他非常小，综合来讲，这是一个非常优秀的代码编辑器。</p>
<p>另外大家也可以给自己的谷歌浏览器添加一些扩展，这里我给大家提供一个前端开发神器--FeHelper</p>
<p>下面是它的网址：https://www.chromedownloads.net/extensions/757.html</p>
<p>（大家点进这个链接之后，点击下载，得到一个.crx文件，大家要将它更改为.zip文件，然后再将它拖到你安装的chrome浏览器的
扩展（这里要记得将开发者模式打开）里面，就可以用了。）</p>
<p>FeHelper有很多功能，例如：字符串编码，二维码生成器，图片生成器，取色器……都是非常实用的。</p>
<h1>my hobbies</h1>
<ul>
<li>play basketball</li>
<li>play soccer</li>
<li>play volleyball</li>
<li>play rugby</li>
<li>play tabletennis</li>
</ul>
<ol>
<li>打游戏</li>
<li>看书</li>
<li>睡觉</li>
<li>看电视</li>
<li>游泳</li>
<li>美女</li>
</ol>
<dl>
<dt>问：HTML是什么？</dt>
<dd>答：超文本文件。</dd>
<dt>问：HTML是什么？</dt>
<dd>答：超文本文件。</dd>
<dt>问：HTML是什么？</dt>
<dd>答：超文本文件。</dd>
</dl>
<div>aaa</div>
<div>aaa</div>
<span>bbb</span>
<span>bbb</span>
</body>
</html>
图像标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML标签学习--图像标签</title>
</head>
<body>
<h1>HTML图像标签</h1>
<img src="./image.jpg" title="美女图像" width="600" border=10>
<img src="./image1.jpg" border="10" width="600"><br/><br/>
<img src="./imagea.jpg" alt="美女图像" width="600" height="1234">
</body>
</html>
以上的路径按照大家电脑上的路径为准。
超链接标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>HTML标签--超文本标签</h1>
<a href="http://www.baibu.com" target="_blank">百度<a/>
<a href="#a1"> 我的老婆</a>
<h1>美女</h1>
<img src="./image1.jpg" width="300" border = 10/>
<img src="./image1.jpg" width="300" border = 10/>
<img src="./image1.jpg" width="300" border = 10/>
<img src="./image1.jpg" width="300" border = 10/>
<img src="./image1.jpg" width="300" border = 10/>
<a id="a1">我的老婆</a><br/><br/>
<img src="./image.jpg" width="650" />
</body>
</html>
表格标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>HTML标签学习--表单标签</h1>
<table border="2" width=500 cellspacing="1" cellpadding="20">
<!--cellsapcing 控制行间距，cellpadding控制的是一个单元格的面积-->
<caption><h1>Python学习班学生信息表</h1></caption>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>班级</th>
<th>ID</th>
</tr>
<tr>
<td>张三</td>
<td>19</td>
<td>python03</td>
<td>01</td>
</tr>
<tr>
<td>张三</td>
<td>19</td>
<td colspan="2" rowspan="2">python03</td>
<!--colspan是和并列单元格，rowspan是合并行单元格-->
<td>01</td>
</tr>
</tr>
<td>张三</td>
<td rowspan="2">19</td>
</tr>
</table>
</body>
</html>
表单标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="./a.html" method="post" name="id">
<input type="hidden" name="hidden"/>
姓名：<input type="text" name="src" /> <br/><br/>
密码：<input type="password" name="src" /> <br/><br/>
爱好：<input type="checkbox" name="likes" value="1" />看书
<input type="checkbox" name="src" value="2"/ >打球
<input type="checkbox" name="src" value="3" />看电视
<br/>
<input type="color" name="color"/>
<br/>
<input type="radio" name="sex" value="1">男
<input type="radio" checked name="sex" value="2">女
<!--这里面的/号规定上是一定要加的，但是不加也能运行，大家可以根据自己的习惯来，笔者因为代码提示的时候经常不会出现/号，所以就可能会有些代码部分没加，请多担待-->
<br/>
<input type="button" name="button"name="button"/>
<input type="image" src="./image.jpg" width="100" />
请上传你要展示的文件：<input type="file" name="file"/>
<br/>
<input type="email" name="email"/><br/>
<input type="number" max="130" min="1" value="17" name="number"/><br/>
<input type="range" max="100000" min="10" value="100" name="range"/><br/>
<input type="url" name="url"/><br/>
请选择你的出生年与日：<input type="datetime-local" name="date picker"><br/>
搜索框：<input type="search" name="search" value="张三" value="李四">
颜色选择：<input type="color" name="color" >
<br/>
请输入你要查看的内容：<select name="list" id="1">
<option value="1" >张三</option>
<option value="2">李四</option>
<option value="3">王二</option>
<option selected value="5">美女</option>
<option value="4">大蛇</option>
</select>
<br/>
请输入你的观后感：<textarea name="reading" id="2" cols="100" rows="2">写点感受吧……</textarea>
<br/>
<button>
<img src="C:\Users\HP\Pictures\播放按钮.png" name="run"/>
<img src="C:\Users\HP\Pictures\播放按钮.png" name="run"/>
<img src="C:\Users\HP\Pictures\播放按钮.png" name="run"/>
</button>
<br/>
请选择你的家乡：<select name="家乡" id="3">
<optgroup label="国内">
<option value="1">石家庄</option>
<option value="2">上海</option>
<option value="3">安徽</option>
</optgroup>
<optgroup label="国外">
<option value="1">美国</option>
<option value="2">刚果</option>
<option value="3">意大利</option>
</optgroup>
</select>
<br/>
<hr/>
<input type="submit" name="submit"/>
<input type="reset" name="reset"/>
<input type="search" list="namelist" name="keywords"/>
<datalist id="namelist">
<option >zhangsan</option>
<option >zhangsanfeng</option>
<option >zhangwuji</option>
<option >zhangdaxian</option>
<option >liling</option>
<option >lixiaolong</option>
</datalist>
</form>
</body>
</html>
91
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
