HTML入门指南：基础知识与实战应用-优快云博客

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>网页的标题</title>
    </head>
    <body>
        网页的主体
    </body>
</html>

标签有<...>与</...>配对的，当然也有独立的<...>，有配对别忘了'/'

第一行是指HTML5的标准声明，可以理解为版本号标注，记住就行。

接下来就是<html></html>包围的一个头、体结构。

这里注意，一个html可以没有head，但不能没有body，

所有的html文件都必须要包围在<html></html>中。

head内的title就是网页的名称，比如百度的网页名就是“百度一下，你就知道”。

其他所有的内容都是写在body里的。

最后html的注释是写在中的：

<!--我是一行注释-->
<!--
    我也可以
    多行注释
-->

三、HTML基本标签

接下来的工作都要写在body里了，让我们先来认识些基础标签。

基础标签

<p>

这是段落标签。

<p>System.out.println("HelloWorld");</p>printf("HelloWorld");

比如这样，它就会把<p></p>内的划分一个段落。

<h1>

这是标题字。

<h1>标题字</h1>
<h2>标题字</h2>
<h3>标题字</h3>
<h4>标题字</h4>
<h5>标题字</h5>

效果如图：

<br>

这是换行标记，是一个独目标记。就像'\n'

hello<br>world

<hr>

这是一条横线，也是一个独目标记。

可以调整大小、颜色：

<hr>
<hr color=red" width="50%">

<pre>

这指预留格式。

<pre>
    for(int i = 0; i < 10; i++){
	    System.out.println("i = " + i);
	}
</pre>

如图显示，会保留它的格式，如换行、空格等等。

<del>、<ins>、<b>、<i>

一些常用的字样式，不多说，看码：

<del>删除字</del>
<ins>插入字</ins>
<b>粗体字</b>
<i>斜体字</i>

即使在html内换行，显示还是一行，换行必须要<br>

<sup>、<sub>

这个数学中用的多：

10<sup>2</sup>
log<sub>2</sub>N

<font>

这是字体标签。用于更改字体格式：

<font color = 'red' size = 10>字体标签</font>

实体符号

有没有发现，HTML标签都用<>包起来，那么怎么表示大于、小于号？

那么实体符号就派上用处了。

实体符号以 '&' 开头，以 ' ; ' 结尾。

< 和 >

a &lt; b &gt; c

<就是小于，>就是大于

 

这是空格的意思：

a&nbsp;b

四、表格

表格可以是一种布局方式，通过合并单元格来形成一种布局

先来画一种最简单的3行3列的表格：

<table border = "1px" width = "30%" height = "150px">
	<!--align是对齐方式-->
	<tr align = "center"><!--一行-->
		<td>a</td><!--一格-->
		<td>b</td>
		<td>c</td>
	</tr>
	<tr>
		<td>d</td>
		<td>e</td>
		<td>f</td>
	</tr>
	<tr>
		<td>g</td>
		<td>h</td>
		<td>i</td>
	</tr>
</table>

<table>是表格的标签，表格在其中建立。

<tr>是一行，<td>是一格，有几格就有几列。

对于table，可以设置border，让表格显示出来,不写就没有格子；

对于tr，可以设置align，让表格内的数据居中或是左对齐。

在表格中也可以用<th>来给文字加粗与居中，<th>与<td>用法相同。

单元格合并

我们可以使用rowspan和colspan来实现单元格合并

以一个2行3列的表格来举例：

<table border = "1px" width = "50%">
	<tr>
	    <!--th多一个加粗和居中-->
		<th>1</th>
        <th>2</th>
		<td rowspan = "2">36</td>
	</tr>
	<tr>
		<td colspan = "2">45</td>
	</tr>
</table>

rowspan用于合并行，colspan用于合并列，数字就代表合并的数量

要注意，row合并只会删除下面的单元格，不会删上面的；col没有限制。

thead、tbody、tfoot

这三个不是必须的，只是用来标注表格的位置，方便后期JS代码编写。

<table border = "1px" width = "30%" height = "150px">
	<!--头-->
	<thead>
		<tr align = "center">
		    <td>a</td>
		    <td>b</td>
			<td>c</td>
		</tr>
	</thead>
			  
	<!--体-->
	<tbody>
		<tr>
			<td>d</td>
			<td>e</td>
			<td>f</td>
		</tr>
	</tbody>
			  
	<!--脚-->
    <tfoot>
		<tr>
		    <td>g</td>
			<td>h</td>
			<td>i</td>
		</tr>
	</tfoot>
</table>

五、背景颜色与图片

设置背景图或者背景色

很简单，只需要在<body>标签内加上bgcolor(背景色)或者background(背景图)即可。

<body bgcolor="red" background="img/1.png">
</body>

插入图片

<img src = "img/1.png" width="200" title="我是图片哦" alt="图片加载失败"/>
<br><br>
<img src = "img/1.png" width="300"/>

可以利用<img>标签插入图片，也可以设置图片大小。

title 指鼠标悬停在图片上的字样，alt 指未获取到图片的显示内容。

六、超链接

我们可以给文字超链接：

<a href="http://www.baidu.com">百度</a>

也可以给图片超链接：

<a href="http://www.baidu.com">
	<img src="img/1.png" width="200"/>
</a>

点击都会跳到百度界面。

超链接内部也有属性。

blank 新标签页

self 本页打开

top 顶级窗口

parent 父窗口

如下面的代码，就会在点击图片时在新标签页打开网址。

<a href="http://www.baidu.com" target="_blank">
    <img src="img/1.png" width="100"/>
</a>

超链接还可以从浏览器向服务器发送请求，具体在介绍表单时来区分。

七、列表

无序列表

<ul>就是指无序列表，<li>是列表的名称，也可以嵌套列表，更改列表标识符（type）

<!--无序列表-->
<ul type="circle">
	<li>中国</li>
		<ul type="disc">
			<li>北京</li>
			<li>江苏</li>
			<li>上海</li>
		</ul>
	<li>俄国</li>
	<li>美国</li>
</ul>

有序列表

有序列表就是有顺序的标号，用<ol>表示

<!--有序列表-->
<ol type="1">
	<li>苹果</li>
		<ol type="A">
			<li>青苹果</li>
			<li>红富士</li>
		</ol>
	<li>香蕉</li>
	<li>梨子</li>
</ol>

八、表单（重点）

表单是HTML的重点。一个网页除了向用户展示信息，有时也要收集用户数据，比如注册。

那么表单就是为此作用而产生的，所以表单可以向服务器发送请求。

但它与超链接的发送请求不一样，表单数据是用户填写的，但超链接是定死的。

<form action="../">
	用户名：<input type="text"/><br>
	密码：<input type="text"/><br>
	<input type="submit" value="登录" />
</form>

这就是一个基本的表单。

为了布局好看，也可以用到表格：

<form action="http://localhost:8080/jd/login">
	<table>
		<tr>
			<td>用户名：</td>
			<!--这里name非常重要，没有name不会提交-->
			<!--这里的value由用户填-->
			<td><input type="text" name="username"/></td>
		</tr>
		<tr>
			<td>密码：</td>
			<td><input type="password" name="userpwd"/></td>
		</tr>
		<tr align="center">
			<!--合并列单元格-->
			<td colspan="2">
				<input type="submit" name="login" value="登录" />
				&nbsp;&nbsp;&nbsp;&nbsp;
				<input type="reset" value="清空" />
			</td>
		</tr>
	</table>
</form>

action后面加的是需要上传的服务器地址

在input内，name十分重要，没有name是上传不到服务器中的，它可以理解为定位的标志

value指的是这个type的内容，如果是text就让用户输入，如果是button就是按钮的名称。

用户注册表单

了解了表单的大概内容，接下来我们做一个用户注册的详细表单来一一讲解，效果如下：

我们写在表格内，这样更加有条理：

首先是用户名、密码与确认密码。

这一块没什么好说的，只要注意‘确认密码’不用提交服务器即可。

<tr>
	<td>用户名：</td>
	<td><input type="text" name="username"></td>
</tr>
<tr>
	<td>密码：</td>
	<td><input type="password" name="passpwd"></td>
</tr>
<tr>
	<td>确认密码：</td><!--确认密码不用提交-->
	<td><input type="password"></td>
</tr>

接下来是性别和学历。

性别用单选框radio表示，checked表示默认选中，要注意单选框的value必须手动赋值才能传入服务器。

爱好用复选框checkbox表示。

<tr>
	<td>性别：</td>
	<td>
		<input type="radio" name="gender" value="1" checked>男<!--同name即可完成一组单选按钮-->
		<input type="radio" name="gender" value="2">女<!--单选按钮的value必须手动指定-->
	</td>
</tr>
<tr>
	<td>爱好：</td>
	<td>
		<input type="checkbox" name="interest" value="paint" checked>画画						
		<input type="checkbox" name="interest" value="sing">唱歌
		<input type="checkbox" name="interest" value="sleep">睡觉
	</td>
</tr>

然后是学历和技能。

学历用下拉框<select>表示，下拉框的选项是option，默认选中为selected

技能采用下拉框多选，只需在上面的基础上加上multiple即可，size表示显示的选项数目

<tr>
	<td>学历：</td>
	<td>
		<select name="grade">
			<option value="gz">高中</option>
			<option value="bk">专科</option>
			<option value="zk" selected>本科</option>
			<option value="ss">硕士</option>
		</select>
	</td>
</tr>
<tr>
	<td>技能：</td>
	<td>
		<select name="skills" multiple="multiple" size="2"><!--multiple用于下拉框多选,size显示几个内容-->
			<option value="Java">java</option>
			<option value="C">C</option>
			<option value="C++">C++</option>
			<option value="Python">Python</option>
		</select>
	</td>
</tr>

最后是简介和按钮。

简介用文本域显示，注意文本域是没有value的，输入的内容就是value。

<tr>
	<td>简介：</td>
	<td>
		<!--文本域没有value属性--><!--maxlength用于框定文本区输入最大范围-->
		<textarea rows="5" cols="20" name="introduction" maxlength="50"></textarea>						
	</td>
</tr>
<tr align="center">
	<td colspan="2">
		<input type="submit"value="注册"/>
		<input type="reset" value="清空"/>
	</td>
</tr>

最后我们输入完成来看网址：

这样看不明显，划分一下：

这样就可以通过这些数据上传到服务器，但是直接体现在网址上不太安全。

我们可以用这个方法来隐藏这些内容：

<form action="http://localhonst:8080/jd/register" method="post">

通过把method设置为post就可以隐藏：

上传文件

当type设置为file时，我们可以让用户上传文件到服务器。

<input type="file"/>

hidden组件

当有些内容不想让用户看见或者为了完善布局，我们可以将type设置为hidden来隐藏

<form action="http://localhost:8080/jd/register">
	<input type="hidden" name="userId" value="111"><br>
	上面隐藏了东西哦
</form>

readonly与disabled

它们主要用于只读，使组件不可修改。

区别在于：

readnoly会提交，能选中，

disabled不会提交，也不能选中。

<form action="http://localhost:8080/jd/register">
	账号：
	<input type="text" name="username" value="123" readonly/>
	<br>
	密码：
	<input type="text" value="abc" disabled/>
	<br>
	<input type="submit" value="提交"/>
</form>

九、节点的id属性

在HTML中，每个节点都有id属性。id属性是唯一的，不能重复

id作用就是方便获取节点信息，再利用JavaScript进行增删改

HTML文档就像一棵树，树上有很多节点，每一个节点都可以设置一个唯一id

就像下图：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML元素的id属性</title>
	</head>
	<body>
		<form id="body">
			账号：
			<input type="text" id="username" name="username"/><br>
			密码：
			<input type="password" id="userpwd" name="userpwd"/><br>
			<!--
			<input type="submit" id="body" name="login">
			不能有相同id
			-->
		</form>
	</body>
</html>

十、div与span

div和span都是图层，为了灵活的布局，

相对与table布局更加灵活，只要定位div和span的左上角坐标就可以定位。

区别在于：div会独自占用一行，span不会独占一行

<body>
	<div id="div1">我是一个DIV1</div>
	<div id="div2">我是一个DIV2</div>
	<span id="span1">我是一个span1</span>
	<span id="span2">我是一个span2</span>
	
	<!--div可以嵌套-->
	<div id="div3">
		<div>
			<div>test</div>
		</div>
	</div>
</body>