目录
1.1 什么是网页？
网站：是指因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关网页的集合。
网页：是网站中的一个页面，通常是HTML格式的文件，它需要一个浏览器来打开。网页是构成网站的基本元素，它由图片、链接、文字、声音、视频等元素构成，我们通常看到的网页常见是以.html结尾，因此又称为html文件。
1.2 什么是HTML
1.2.1 HTML指的是超文本标记语言（Hyper Text Markup language），它是用来描述网页的一种语言，但是它不是一种编程语言，而是一种标记语言。
1.2.2 标记语言是一套标记标签
1.2.3 超文本，有两层含义：
（1） 它可以加入图片、声音、动画、多媒体等内容（超越了文本限制）
（2）它还可以从个文件跳转到另一个文件，与世界各地主机文件建立连接。（超级链接文本）
| 标签名 | 定义 | 说明 |
|---|---|---|
| HTML标签 | HTML标签 | 网页中最大的标签,称为根标签 |
| head标签 | 文档的标题 | 在head标签中必须设置的标签是title标签 |
| title标签 | 文档的标题 | 让页面拥有一个属于自己的网页标题 |
| body标签 | 文档的主题 | 元素包含文档的所有内容 |
1.3 创建第一个页面
1.4 利用IDE新建一个html5文件
1.4.1 <!DOCTYPE html>:文档类型声明,作用就是告诉浏览器使用哪种HTML版本来显示网页,当前这句话是使用H5版本,要注意的是它不属于html标签里面的一部分,只是声明整个文档的类型
1.4.2 <html lang="en">:lang是languige的缩写,用来定义当前文档显示的语言.zh-CN为中文
1.4.3 <meta charset="UTF-8">:charset(character set)字符集和,以便计算机能够识别和存储各种文字.charset常用的值有:GB2312,BIG5,GBK,和UTF-8
1.5 标题标签:h,head的缩写
<h1> 文章的大标题标签 ，具有默认的字体大小、加粗、上下外边距 </h1>
<h2> 文章的二级标题标签 </h2>
<h3> 文章的三级标题标签 </h3>
<h4> 文章的四级标题标签 </h4>
<h5> 文章的五级标题标签 </h5>
<h6> 文章的六级标题标签 </h6>
1.6 段落标签 p,paragraph
<p> 段落标签，包含大量的文字内容 </p>
1.7 span标签
<span> 文字标签，放置少量的文字内容 </span>
1.8 strong标签,加标签
<strong> 粗体文字，具有强调作用，放置少量的文字内容 </strong>
1.9 b:加粗标签
<b> 粗体文字，放置少量内容，无强调 </b>
1.10 u:下划线标签
<u> 下划线文字， </u>
1.11 i:斜体标签
<i> 斜体文字 </i>
1.12 删除线标签
<del> 删除线 </del>
1.13 <br /> 换行标签
人生苦短<br />我爱Java
1.14 div和span标签
<div> 和 <span>是没有语意的,他们是一个盒子用来装饰内容的
Div:是division的缩写,表示分割分区
Span:意为跨度,跨距
<div>我是一个div标签,我一个人单独占一行</div>123
<div>我是一个div标签,我一个人单独占一行</div>
<span>百度</span>
<span>新浪</span>
<span>搜狐 </span> span标签不具备换行功能
1.15 图像标签,是一个单标签Img:image的缩写
<img src=”图像URL”>
（1）属性1:src:指定图片
<img src="地球.jpg">
（2）属性2,alt替换文本,图像显示不出来的时候显示文本
<h4>alt:替换文本,图像显示不出来的时候显示文本</h4>
<img src="地球.jpg" alt="这是地球图片">
（3）属性3,title,提示文本将鼠标放图像上,提示文字
<h4>title:提示文本,将鼠标放图像上,提示文字</h4>
<img src="地球.jpg" alt="这是地球图片" title="地球">
（4）属性4,witdth:像素,设定图像的宽度
<h4>属性4,witdth:像素,设定图像的宽度</h4>
<img src="地球.jpg" alt="这是地球图片" title="地球" width="500">
（5）属性5,height:像素,设定图像的高度
<h4>属性5,height:像素,设定图像的高度</h4>
<img src="地球.jpg" alt="这是地球图片" title="地球" width="500" height="600">
（6）属性6,border:像素,设定图像的边框粗细
<h4>属性6,border:像素,设定图像的边框粗细</h4>
<img src="地球.jpg" alt="这是地球图片" title="地球" width="500" height="600" border="15">
1.16 表格标签<table> </table>
<tr></tr>:用于定义表格中的行,必须嵌套在<table> </table>内
<td></td>:用于定义表格中的单元格,必须嵌套在<tr></tr>内
<th></th>:表头单元格,表头单元格里面的内容会加粗居中显示
1.5 table标签
table标签相关属性
| 属性 | 说明 |
|---|---|
| width | 表格的宽度 |
| height | 表格的高度 |
| align | 表格的对齐方式 |
| border | 表格的边框 |
| bordercolor | 边框的颜色 |
| cellspaning | 单元格之间的距离 |
| csllpadding | 单元格与内容之间的距离 |
| bgcolor | 表格的背景颜色 |
| background | 表格的背景图片 |
目标页面效果
1.5.1第一版代码
<!-- 使用table标签定义表格 -->
<table>
<!-- 使用tr标签定义表格的行 -->
<tr>
<!-- 使用th标签定义表头，表头有字体加粗效果 -->
<th>姓名</th>
<th>属性</th>
<th>级别</th>
<th>忍村</th>
</tr>
<tr>
<!-- 使用td标签定义单元格 -->
<td>漩涡鸣人</td>
<td>风</td>
<td>下忍</td>
<td>木叶</td>
</tr>
<tr>
<td>宇智波佐助</td>
<td>雷&火</td>
<td>下忍</td>
<td>木叶</td>
</tr>
<tr>
<td>我爱罗</td>
<td>沙</td>
<td>影</td>
<td>砂隐村</td>
</tr>
</table>如果只有上面的代码，页面显示效果是：
没有表格边框。想要显示好看的表格边框可以把下面的style标签代码复制粘贴到head标签里,整体照搬即可。
此部分代码为CSS中内容
<style type="text/css">
table,th,td {
border-collapse: collapse;
border: 1px solid black;
padding: 5px;
}
</style> 
我们发现，相较于目标效果而言，还未实现横纵向合并单元格
1.5.2合并单元格
① 横向合并单元格(列合并)
使用colspan属性将两个横向相邻的单元格跨列合并：
<tr>
<td>宇智波佐助</td>
<td>雷&火</td>
<td colspan="2">下忍</td>
</tr> 
注意: 『被合并』的单元格要删掉。
② 纵向合并单元格(行合并)
使用rowspan属性将两个纵向相邻的单元格跨行合并：
<tr>
<td>宇智波佐助</td>
<td rowspan="2">雷&火</td>
<td colspan="2">下忍</td>
</tr>
<tr>
<td>我爱罗</td>
<td>影</td>
<td>砂隐村</td>
</tr> 
注意: 『被合并』的单元格要删掉。
1.6列表标签
无序列表标签
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Grape</li>
</ul>
有序列表标签
<ol type="1"> 有序列表可通过type操作序号
<li>Apple</li>
<li>Banana</li>
<li>Grape</li>
</ol>1.7超链接标签
<body>
<!--
超链接标签a的作用: 进行资源跳转
href: 你要跳转到的资源的路径
target: 新页面的打开方式
-->
<!--
1. 跳转到本项目的资源: 使用相对路径
相对路径: 以当前路径作为基准，如果资源跟我说同一个目录下的则直接写资源名就行了
如果在不同目录下，要找上一级目录，则使用../
. 当前目录
.. 上一级目录
2. 跳转到其它服务器的资源: 此时就要使用完整的url访问路径
-->
<a href="../01_html的入门/start.html">跳转到start.html页面</a><br/>
<!--
target属性表示新页面的打开方式，我们目前只需要掌握两种取值:
_self 表示新页面在当前页面打开
_blank 表示新页面会新打开一个标签页
-->
<a href="https://www.baidu.com" target="_blank">跳转到百度</a>
</body>点击后跳转到href属性指定的页面
1.8HTML实体
在HTML文件中，<、>等等这样的符号已经被赋予了特定含义，不会作为符号本身显示到页面上，此时如果我们想使用符号本身怎么办呢？那就是使用HTML实体来转义。
1.9表单标签
1.表单标签的作用
在项目开发过程中，凡是需要用户填写的信息都需要用到表单。它的作用是接收用户的输入信息，并且将用户输入的信息提交给服务器
2.form标签的介绍
在HTML中我们使用form标签来定义一个表单。而对于form标签来说有两个最重要的属性：action和method。
<form action="/aaa/pro01-HTML/page05-form-target.html" method="post">
</form>① action属性
用户在表单里填写的信息需要发送到服务器端，对于Java项目来说就是交给Java代码来处理。那么在页面上我们就必须正确填写服务器端的能够接收表单数据的地址。
这个地址要写在form标签的action属性中。但是现在暂时我们还没有服务器端环境，所以先借用一个HTML页面来当作服务器端地址使用。
② method属性
『method』这个单词的意思是『方式、方法』，在form标签中method属性用来定义提交表单的『请求方式』。method属性只有两个可选值：get或post，没有极特殊情况的话使用post即可。
1.10 表单项标签
表单中的每一项，包括: 文本框、密码框、单选框、多选框等等，都称之为表单项，一个表单中可以包含多个表单项
1.10.1name和value属性
在用户使用一个软件系统时，需要一次性提交很多数据是非常正常的现象。我们肯定不能要求用户一个数据一个数据的提交，而肯定是所有数据填好后一起提交。那就带来一个问题，服务器怎么从众多数据中识别出来收货人、所在地区、详细地址、手机号码……？
很简单，给每个数据都起一个『名字』，发送数据时用『名字』携带对应的数据，接收数据时通过『名字』获取对应的数据。
在各个具体的表单标签中，我们通过『name属性』来给数据起『名字』，通过『value属性』来保存要发送给服务器的『值』。
但是名字和值之间既有可能是『一个名字对应一个值』，也有可能是『一个名字对应多个值』。
这么看来这样的关系很像我们Java中的Map，而事实上在服务器端就是使用Map类型来接收请求参数的。具体的是类型是：Map<String,String[]>。
name属性就是Map的键，value属性就是Map的值。
有了上面介绍的基础知识，下面我们就可以来看具体的表单项标签了。
1.10.2 单行文本框
个性签名：<input type="text" name="signal"/><br/>显示效果
1.10.3密码框
密码：<input type="password" name="secret"/><br/>显示效果
1.10.4 单选框
你最喜欢的季节是：
<input type="radio" name="season" value="spring" />春天
<input type="radio" name="season" value="summer" checked="checked" />夏天
<input type="radio" name="season" value="autumn" />秋天
<input type="radio" name="season" value="winter" />冬天
<br/><br/>
你最喜欢的动物是：
<input type="radio" name="animal" value="tiger" />路虎
<input type="radio" name="animal" value="horse" checked="checked" />宝马
<input type="radio" name="animal" value="cheetah" />捷豹 
说明:
-
name属性相同的radio为一组，组内互斥
-
当用户选择了一个radio并提交表单，这个radio的name属性和value属性组成一个键值对发送给服务器
-
设置checked="checked"属性设置默认被选中的radio
1.10.5 多选框
你最喜欢的球队是：
<input type="checkbox" name="team" value="Brazil"/>巴西
<input type="checkbox" name="team" value="German" checked="checked"/>德国
<input type="checkbox" name="team" value="France"/>法国
<input type="checkbox" name="team" value="China" checked="checked"/>中国
<input type="checkbox" name="team" value="Italian"/>意大利显示效果
说明:
-
设置checked="checked"属性设置默认被选中的checkbox
1.10.6 下拉框
你喜欢的运动是：
<select name="interesting">
<option value="swimming">游泳</option>
<option value="running">跑步</option>
<option value="shooting" selected="selected">射击</option>
<option value="skating">溜冰</option>
</select>显示效果
说明:
-
下拉列表用到了两种标签，其中select标签用来定义下拉列表，而option标签设置列表项。
-
name属性在select标签中设置。
-
value属性在option标签中设置。
-
option标签的标签体是显示出来给用户看的，提交到服务器的是value属性的值。
-
通过在option标签中设置selected="selected"属性实现默认选中的效果。
1.10.7 按钮
<button type="button">普通按钮</button>或<input type="button" value="普通按钮"/>
<button type="reset">重置按钮</button>或<input type="reset" value="重置按钮"/>
<button type="submit">提交按钮</button>或<input type="submit" value="提交按钮"/>显示效果
说明:
-
普通按钮: 点击后无效果，需要通过JavaScript绑定单击响应函数
-
重置按钮: 点击后将表单内的所有表单项都恢复为默认值 提交按钮
-
提交按钮: 点击后提交表单
1.10.8 隐藏域
<input type="hidden" name="userId" value="2233"/>说明:
通过表单隐藏域设置的表单项不会显示到页面上，用户看不到。但是提交表单时会一起被提交。用来设置一些需要和表单一起提交但是不希望用户看到的数据，例如：用户id等等。
1.10.9 多行文本框
自我介绍：<textarea name="desc"></textarea>显示效果
说明:
textarea没有value属性，如果要设置默认值需要写在开始和结束标签之间。
1.10.10 文件表单
头像:<input type="file" name="file"/>显示效果
HTML其他基础
<body>
<header>
网页的头部标签，通常只出现一次
</header>
<footer>
网页的底部标签，通常只出现一次
</footer>
<main>
网页的主体标签，通常只出现一次
</main>
<nav>
网页的主导航标签，通常出现一次
</nav>
<aside>
网页的侧边栏标签
</aside>
<article>
文章的内容容器标签
</article>
<section>
文章的一部分或者一小节
</section>
</body>
扫一扫
1346
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
