HTML学习笔记
第一章 用HTML设置文本
1、文本排版
段落标签:<p>内容</p>
换行标签: 内容<br/>
标题标签：<h1>内容</h1>、······、<h6>内容</h6>
文字居中标签：<center>内容</center>
文字段落缩进标签:<blockquote>内容</blockquote>
2、设置文字列表
文字列表的主要作用是有序地编排一些信息资源，使其结构化和条理化，并以列表的样式显示出来。
1）无序列表 ul 2）有序列表 ol
无序列表<br/>
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
<li>第四项</li>
</ul>
有序列表<br/>
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
<li>第四项</li>
</ol>
3、HTML 标记与 HTML 属性
在大多数 HTML 标记中都可以对属性控制，属性的作用是帮助 HTML 标记进一步控制 HTML 文件的内容，比如内容的对齐方式（如本例），文字的大小、字体、颜色，网页的背景样式，图片的插入，等等。其基本语法为：
<标记名称 属性名 1=“属性值 1” 属性名 2=“属性值 2” ......>
3.1 用 align 属性控制段落的水平位置
<p align="center" >…</p>
3.2 用 bgcolor 属性设置背景颜色
1）直接颜色表示 如 red blue ； 2）利用 R/G/B 表示 16 进制 #FFFF00 ；
<body bgcolor="#00FF00">…</body>
3.3 设置文字的特殊样式
<b>文字以粗体方式显示</b><br/>
<i>文字以斜体方式显示</i><br/>
<u>文字以加下划线方式显示</u><br/>
<s>文字以加下删除方式显示</s><br/>
<big>文字以放大方式显示</big><br/>
<small>文字以缩小方式显示</small><br/>
<strong>文字以加强强调方式显示</strong><br/>
<em>文字以强调方式显示</em>
<address>[email protected]</address>
<code>abc</code><br/>
3.4 设置文字的大小和颜色 font 标签
<font size="4" color="blue" face="宋体">font标签</font><br/>
4、特殊文字符号
特殊文字符号<br/>
<br/><br/>
版权所有 ©<br/>
上标 2<sup>1024</sup><br/>
下标 A<sub>1</sub>
第三章 在网页中使用图像img
1、初识网页图片
略。
2、相对路径 VS 绝对路径
<img src="未闻花名.jpeg"> <!--相对路径-同一级-->
<img src="../龙猫.jpg"/> <!--相对路径-不同级-->
<img src="http://www.baidu.com/img/bd_logo1.png?where=super"> <!--绝对路径-->
<img src="D:/桌面/images/秦时明月.jpg"/> <!--绝对路径-本地-->
3、设置图片的尺寸
<img width="600" height="600" src="D:/桌面/images/刘亦菲.png"/>
4、用 alt 属性为图像设置替换文本
<img width="600" height="600" alt="刘亦菲" src="D:/桌面/images/刘亦菲.png"/> <!--绝对路径-本地-->
5、用 title 属性为图像设置标题
<img width="600" height="600" title="神仙姐姐刘亦菲" alt="刘亦菲" src="D:/桌面/images/刘亦菲1.png"/> <!--绝对路径-本地-->
第四章 用HTNL建立超链接
a是HTML语言标签。
a标签定义超链接，用于从一个页面链接到另一个页面。
通过使用 href 属性，创建指向另外一个文档的链接（或超链接）通过使用 name 或 id 属性，创建一个文档内部的书签（也就是说，可以创建指向文档片段的链接）<a> 元素最重要的属性是 href 属性，它指定链接的目标。
1、基本文字超链接
<!-- 文字超链接 -->
<a href="http://www.java1234.com">Java知识分享网</a><br/>
2、设置图片的超链接
<a href="http://www.java1234.com"><img src="java1234.jpg"></a><br/>
3、设置以新窗口显示链接页面
<a href="http://www.java1234.com" target="_blank">Java知识分享网</a><br/>
4、设置电子邮件链接
<a href="mailto:[email protected]">联系人小黄邮箱</a><br/>
5、框架之间的链接
框架是一种常用的网页布局工具。它的作用是把浏览器的显示空间分割为几个部分，每个部分都可以独立显示不同的网页。
5.1 用 cols 属性将窗口分为左右两部分
<!-- 用 cols 属性将窗口分为左右两部分 -->
<frameset cols="60%,*">
<frame>
<frame>
</frameset>
5.2 用 rows 属性将窗口分为上中下三部分
<!-- 用rows 属性将窗口分为上中下三部分 -->
<frameset rows="30%,30%,*">
<frame>
<frame>
<frame>
</frameset>
5.3 框架的嵌套
<!-- 框架的嵌套 -->
<frameset cols="30%,*">
<frame>
<frameset rows="50%,*"> <!-- 右边再分为上下两部分 -->
<frame>
<frame>
</frameset>
</frameset>
5.4 用 src 属性在框架中插入网页
<!-- 用 src 属性在框架中插入网页 -->
<frameset cols="30%,*">
<frame src="a.html">
<frameset rows="50%,*"> <!-- 右边再分为上下两部分 -->
<frame src="b.html">
<frame src="c.html">
</frameset>
</frameset>
5.5 框架之间建立链接
<frameset cols="30%,*">
<frame src="a.html">
<frame name="main">
</frameset>
a.html:
<body>
<body>
<a href="b.html" target="main">b页面</a><br/>
<a href="c.html" target="main">c页面</a><br/>
<a href="https://baike.baidu.com" target="main">百度百科</a><br/>
</body>
6、嵌入式框架 iframe：在一定区域内嵌入网页
例：
百度百科<br/>
<iframe width="800" height="500" src="https://baike.baidu.com"></iframe>
第五章 用Html创建表格
- 表格的基本结构
<table border="1">
<tr>
<th>1</th> <!-- 表头 -->
<th>2</th>
<th>3</th>
</tr>
<tr> <!-- 行 -->
<td>1-1</td> <!-- 列 -->
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
</table>
2、合并单元格
2.1 用 colspan 属性左右合并单元格
2.2 用 rowspan 属性上下合并单元格
合并单元格<br/>
<table border="1">
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
<tr>
<td colspan="2">1-1-2</td>
<td rowspan="2">1-2-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
</tr>
</table>
3、用 align 属性设置对齐方式
<table border="1" width="400">
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
<tr >
<td colspan="2">1-1-2</td>
<td rowspan="2" align="center">1-2-3</td>
</tr>
<tr align="center">
<td>2-1</td>
<td>2-2</td>
</tr>
</table>
4、用 bgcolor 属性设置表格背景色和边框颜色
<table border="1" width="400" bgcolor="green">
<tr>
<th>1</th> <!-- 表头 -->
<th>2</th>
<th>3</th>
</tr>
<tr bgcolor="blue"> <!-- 行 -->
<td>1-1</td> <!-- 列 -->
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td bgcolor="yellow">2-2</td>
<td>2-3</td>
</tr>
</table>
5、用 cellpadding 属性和 cellspacing 属性设定边距
5.1 cellspadding 属性设定表格单元格中的内容距离格线的距离
5.2 cellspacing 属性设定表格相邻单元格边线之间的距离。
<table border="1" width="400" cellpadding="20px;"cellspacing="10px;">
第六章 HTML表单
1、Form 表单
表单是一个包含表单元素的区域。主要作用就是向服务器提交数据。
<form action="a.jsp" method="get">
里面是表单具体内容<br/>
</form>
2、文本表单
1，文本框 2，密码框 3，文本域
<form action="a.jsp" method="get">
<table>
<tr>
<td>用户名：</td>
<td>
<input type="text" id="userName" name="useName"/>
</td>
</tr>
<tr>
<td>密码：</td>
<td>
<input type="password" id="pwd" name="pwd"/>
</td>
</tr>
<tr>
<td colspan="2">
<textarea id="desc" name="desc" rows="10" cols="30"></textarea>
</td>
</tr>
</table>
</form>
3、单选框
单选框<br/>
<!-- checked="checked默认选中 -->
性别：<input type="radio" name="sex" checked="checked"/>男
<input type="radio" name="sex"/>女<br/> <!-- name要一样 -->
4、复选框
兴趣：<input type="checkbox" name="hobby" checked="checked"/>动漫
<input type="checkbox" name="hobby"/>看书
<input type="checkbox" name="hobby"/>看剧
<input type="checkbox" name="hobby"/>听歌
5、下拉框
年级：
<select id="grade" name="grade">
<option value="1">一年级</option>
<option value="2">二年级</option>
<option value="3">三年级</option>
<option value="4">四年级</option>
</select>
6、按钮
1，提交按钮 2，普通按钮
<tr>
<td>
<input type="submit" value="登录"/>
</td>
<td>
<input type="button" value="重置"/>
</td>
</tr>
7、文件上传
<input type="file" id="f" name="f"/>
第七章 HTML块
- DIV
HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。
<div id="d1">
<h1>哈哈</h1>
<h2>嘿嘿</h2>
<p>嘻嘻</p>
</div>
<hr/>
<div id="d2" style="border:1px blue solid">
<h1>哈哈2</h1>
<h2>嘿嘿2</h2>
<p>嘻嘻2</p>
</div>
2、SPAN
HTML <span> 元素是内联元素，可用作文本的容器。
<p>
<span style="color:purple">我</span>要成为<span style="color:red">海贼王</span>！
</p>