本文详细介绍了HTML的基本概念、标签使用、实体符号、表格创建、背景设置、超链接、列表、表单以及div和id属性。通过实例展示了如何创建和操作HTML页面，包括文本格式化、表格布局、表单数据提交等，是初学者学习HTML的入门指南。
目录
关于本次学习前端包括HTML、CSS、JavaScript都是学习基本内容为了，后期学习Javaweb，并不会对前端深入学习。
1 概述
HTML：超文本标记语言
超文本:不是普通文本，例如：图片、声音、视频等等。
标记语言：标记语言一般都是由一对一对的标签组成。
<html></html> 这就是HTML的根标签，所有的结束标签开始的第一个字符都是正斜杠：/
HTML怎么开发？怎么运行？
开发：只需要新建一个xxx.html或者xxx.htm文件，直接用记事本编辑即可。
当然也有集成开发工具：如Dreamweaver、Hbuilder、IDEA等等
运行：使用浏览器直接打开运行即可
2 开发第一个HTML页面
因为是刚接触html，所以不用开发工具，直接记事本写
<!--如果加上以下代码表示当前页面中的HTML语法采用的是H5的语法。-->
<!--没有以下这个代码，表示HTML的版本采用的是HTML4.0-->
<!doctype html>
<!--HTML的注释-->
<!--HTML的根标记-->
<html>
<!--头-->
<head>
<!--网页的标题，显示在浏览器的左上角-->
<title>我的第一个HTML页面</title>
</head>
<!--体-->
<!--body是网页的主体，显示在浏览器页面上的内容-->
<body>
hello world!
</body>
</html>通过测试发现，HTML语言并不需要很规范，但是还是要遵守规范
不区分大小写；少了某个标签依然能正常运行。
3 HTML基本标签
p标签
此标签用来标记段落
h标签
标题字，有h1到h6共六个标签用来标记标题，值得注意的是，标题字独占一行。
br标签
换行，注意：此标签不是一对，写一个就够了。属于独目标记
hr标签
输出水平线
color属性
修改颜色
width属性
修改长度，单位px表示像素是静态的；单位%表示占浏览器多少，是动态的。
pre标签
我们发现在html中写的内容格式在浏览器就会失效，可以使用pre标签，会保存原本格式
b标签
粗体字
i标签
斜体字
ins标签
插入字
del标签
删除字
sup标签
右上角加字
sub标签
右下角加字
font标签
可以对文字进行颜色字体等修改
对以上标签和属性演示：
<html>
<head>
<title>HTML基本标签</title>
</head>
<body>
<p>先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于
内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘
志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。</p>
<p>宫中府中，俱为一体;陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以
昭陛下平明之理，不宜偏私，使内外异法也。</p>
<p>侍中、侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下。愚以为宫中
之事，事无大小，悉以咨之，然后施行，必能裨补阙漏，有所广益。</p>
<h1>标题字</h1>
<h2>标题字</h2>
<h3>标题字</h3>
<h4>标题字</h4>
<h5>标题字</h5>
<h6>标题字</h6>
嗨嗨嗨<br>给你一拳<br>爱你哟<br>
<hr>
<hr color = red>
<hr color = black width = 300px>
<hr color = "blue" width = "50%">
<pre>
for(int i = 0; i < 10; i++){
System.out.println(i);
}
</pre>
<b>粗体字</b>
<i>斜体字</i>
<ins>插入字</ins>
<del>删除字</del>
10<sup>2</sup>
100<sub>n</sub>
<font color = "red" size = 5>指定给你好果汁吃</font>
<br><br><br><br>
</body>
</html>效果：
4 HTML实体符号
空格符号
<>
小于号大于号，因为html标签需要用到大于号和小于号，就会冲突，只能用符号代替。
演示：
<!doctype html>
<html>
<head>
<title>HTML实体标签</title>
</head>
<body>
让我逮到你， 指定有你好果子吃。<br>
10 < 100<br>
100 > 10
</body>
</html>结果：
5 表格
<table>标签用来创造一个表格
<tr>表示表格的一行
<td>表示表格的一个单元格
border属性：设置边框，可以用width和height属性对边框修改宽度和高度，align属性用于设置对齐方式。
单元格合并
行单元格合并：rowspan属性，合并技巧：保留最上面的单元格，将后面的单元格注释掉，合并几个，属性值就写几。
列单元格合并：colspan属性，合并技巧：随便保留其中一个即可。
th标签：可以用于单元格代替td标签，可以自动居中和加粗
表格三部分
可以使用thead tbody tfoot三个标签将表格分为三部分：表头，表体，表脚，在表现形式上没有什么用，但在今后需要操作表的时候会方便一些（这里就先不演示了，就是将标签将某一行或多行包住）。
演示：
<!doctype html>
<html>
<head>
<title>表格的创建</title>
</head>
<body>
<table align = "center" border = "1px" width = "300px" height = "200px">
<!--这一个tr标签内就表示一行-->
<!--所以共三行三列-->
<tr align = "center">
<td>单元格</td>
<td>单元格</td>
<td rowspan = "2">单元格x</td>
</tr>
<tr>
<td align = "center">单元格</td>
<td>单元格</td>
<!--
<td>单元格x</td>
-->
</tr>
<tr>
<th>单元格</th>
<!--
<td>单元格y</td>
-->
<th colspan = "3">单元格y</th>
</tr>
</table>
</body>
</html>效果：
6 背景颜色和背景图片
bgcolor属性可以设置背景颜色，用在body标签中。
background属性可以设置背景图片，也用在body标签中，图片的路径可以是相对路径也可以是绝对路径，也可以是网络当中的有效路径。
注意：这里的背景颜色和背景图片是嵌入到浏览器里的。
img标签：这里的图片是浮动于浏览器窗口的。src用于指定路径，width指定宽度，高度会随着宽度等比例缩放，若同时修改高度和宽度可能会失真。可以没有结束标签。title属性用来设置鼠标悬停于图片上时的提示信息，alt属性用来设置图片加载失败时的提示文本信息。
演示：
<!doctype html>
<html>
<head>
<title>背景颜色和图片</title>
</head>
<!--
<body bgcolor = "black">
<body background = "tupian.jpg">
-->
<body>
<img src = "tupian.jpg" width = "100%" title = "点我一下捏" alt = "图片没了捏">
</body>
</html>若找不到图片，会有alt属性的提示：
7 超链接
a标签：href属性用于指定链接地址,traget属性可以修改点开新的网页所在窗口，_self表示当前窗口，_blank表示新窗口， _parent表示父窗口， _top表示顶级窗口。
iframe标签：可以在此页面嵌入一个页面。
演示：
<!doctype html>
<html>
<head>
<title>超链接</title>
</head>
<body>
<a href = "http://www.baidu.com">百度</a><br>
<a href = "http://www.bilibili.com" target = "_blank">B站</a><br>
<a href = "http://www.jd.com">京东</a><br>
<a href = "tupian.jpg">小丑女图片</a><br>
<iframe src = "07.html"></iframe>
</body>
</html><!doctype html>
<html>
<head>
<title>子页面</title>
</head>
<body>
这是嵌入页面<br>
<a href = "http://www.baidu.com" target = "_parent">百度（会在父窗口运行）</a>
</body>
</html>
8 列表
ul标签表示一个列表，无序列表，li标签表示列表中的一条信息
ol标签是有序列表
type属性可以对列表前面的序号或者符号进行修改
演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表</title>
</head>
<body>
<ul>
<li>中国
<ul type="square">
<li>江苏</li>
<li>浙江</li>
</ul>
</li>
<li>美国</li>
<li>日本</li>
</ul>
<ol type="A">
<li>水果</li>
<li>蔬菜</li>
<li>茶
<ol type="i">
<li>乌龙茶</li>
<li>绿茶</li>
<li>红茶</li>
</ol>
</li>
</ol>
</body>
</html>
结果：
9 表单form
什么是表单，有什么用?
表单可以用来收集用户的数据,提交表单时，可以向服务器发送请求，并且还可以携带用户填写的数据。
表单标签：form
form标签的属性:
action属性：用来指定请求路径，也就是说数据提交的时候,提交给谁?action属性和超链接的href属性相同，都是提供“请求路径"”的
method属性：用来指定表单提交的方式/方法，常见的包括两种:get方式提交、post方式提交，默认使用get方式提交。超链接和地址栏输入URL都是get方式提交。
get方式：提交的时候,提交的数据会直接显示在浏览器的地址栏上。
post方式:提交的时候，提交的数据不会直接显示在浏览器的地址栏上。
input标签可以进行提交，需要写到form表单当中才能正常使用。使用type属性值为submit就会有一个提交字样的按钮，提交的是当前表单，使用value属性可以修改按钮的名称。将type属性的值改为button，这是普通按钮，没有提交表单能力。
演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<form action="https://www.baidu.com" method="get">
<input type="submit" value="百度">
<input type="button" value="这是一个无法提交的百度" />
<button type="button">我是一个按钮</button>
</form>
</body>
</html>
input标签是form表单中非常重要的输入域控件，所有的输入域控件都是用来收集用户的数据。用户实际上就是向输入域控件中输入数据的。input标签中最常用的属性是type属性。type属性用来设置输入域控件展示的样式。它有那些只可选?
text：文本框
password：密码框
radio：单选按钮
checkbox：复选框
当需要提交数据时必须要有name属性，否则无法提交。
文本框中value属性不需要程序员写，因为用户会填写，用户在文本框中填写的内容就是value
需要注意的是：提交按钮只是为了起到提交的作用，按钮上的数据是不需要提交的。不要提交的数据你千万别写name属性。否则会一起提交上去。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<form action="http://localhost:8080/a" method="get">
<h1>user login</h1>
<hr >
username: <input type="text" name="username"/><br>
password: <input type="password" name="password"/><br>
<input type="submit" value="login"/>
</form>
</body>
</html>
注册表单的一个小案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注册表单</title>
</head>
<body>
<form action="http://localhost:8080/register" method="get">
<!-- 对于用户名和密码来说，这里的value不需要程序员写，用户会自己输 -->
用户名：<input type="text" name="username"/><br>
密码：<input type="password" name="password"/><br>
<!-- 对于性别来说，这里用到的是单选按钮，需要写value来告诉服务器选的是什么 -->
<!-- 本次代码中，1表示男，0表示女。提交到服务器就是sex=1或者sex=0，这样服务器才会收到数据 -->
<!-- 对于单元按钮，name必须一致才行 -->
性别：男<input type="radio" name="sex" value="1" />
女<input type="radio" name="sex" value="0"/><br>
学历：
<!--下拉列表 同样这里提交的也是name=value-->
<!-- select标签要设置默认值可以用selected -->
<select name="grade">
<option value="">学历选择</option>
<option value="1">高中</option>
<option value="2">大专</option>
<option value="3">本科</option>
<option value="4" selected>硕士</option>
</select>
<br>
兴趣：
<!-- 同样这样的value也需要程序员赋值 -->
<!-- 如果要设默认值，input标签可以用checked -->
抽烟<input type="checkbox" name="hobby" value="smoke" checked/>
喝酒<input type="checkbox" name="hobby" value="drink" checked/>
烫头<input type="checkbox" name="hobby" value="tangtou"/>
<br>
简介:<textarea rows="10" cols="60" name="jianjie">
</textarea>
<br>
<input type="submit" value="注册" />
<input type="reset" value="重置" />
</form>
</body>
</html>
结果：
提交结果：是与我自己选的一致的，没什么毛病
file控件是input标签里的type属性中的一个类型，使用file控件可以选择文件上传。
hidden控件，input标签里的type属性中的一个类型，是一个隐藏域控件，当有需求是需要提交一个东西但又不想显示出来，可以使用hidden控件。
提交后，被hidden隐藏的代码也会提交到服务器。
readonly属性用在input标签中，用了此属性内容只读，不能修改，可以提交
disable属性用在input标签中，用了此属性内容只读，不能修改，不会提交。
maxlength属性可以规定输入的长度是多少。
演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>file、hidden控件</title>
</head>
<body>
<form action="http://localhost:8080/a" method="get">
<input type="file" />
<br>
<input type="hidden" name="usercode" value="1111" />
机构代码：<input type="text" name="oracle" />
<hr >
<input type="text" name="usercode" value="1111" disabled/><br>
<input type="text" name="hai" maxlength="4"/>
<input type="submit" value="保存" />
</form>
</body>
</html>
10 id属性
每一个节点都有id属性。id是这个节点对象的唯一标识,或者说id是这个节点的身份证编号。在同一个HTML文档当中id具有唯一性,不可重复。
javascript语言 , 对以上的form表单中的元素进行增删改查操作。来达到网页的动态效果。当javascript语言对某个节点进行操作的时候,需要先获取到该节点对象,怎么获取该节点对象呢?
答案是:可以通过该节点对象的id来获取到该节点对象。
11 div
div是图层，也可以叫做盒子。div是专J用来做网页布局的。其实最早的时候网页元素的布局是采用table进行布局,但是table布局不够灵活。当代的网页元素布局都是采用div的方式，div套div。也就是盒子套盒子。div布局会更加的灵活、方便。
div和span都可以看做是盒子。 他们有什么区别呢?
div默认情况下会独自占用一行。span不会独自占用一行。
演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>div</title>
</head>
<body>
<div id="div1">
我是一个div
<div id="div2">
<div id="div3">
我也是一个div
</div>
</div>
</div>
hello world
<span id="span1">
我是一个span
</span>
你好
</body>
</html>
742
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
