1.HTML基本结构
//基本结构
<!DOCTYPE html>
<html>
<head>
<!--设置页面的字符集编码 -->
<meta charset="utf-8" />
<!--设置页面的标题 -->
<title></title>
</head>
<body>
<!--需要展示的信息-->
</body>
</html>2.HTML基本标签
//排版标签:
表示空格
1.注释标签：<!--注释-->
2.换行标签：<br/>
3.段落标签：<p>文本文字</p>
特点：段与段之间有行高
属性：align对齐方式 (left：左对齐 center：居中 right：右对齐)
4.水平线标签:<hr/>
属性:
width：水平线的长度(两种:第一种:像素表示；第二种，百分比表示)
size: 水平线的粗细 (像素表示，例如：10px)
color:水平线的颜色
align:水平线的对齐方式(left：左对齐 center：居中 right：右对齐)
//容器标签:
<div></div>:块级标签，独占一行，换行
<span></span>:行级标签，所有内容都在同一行
作用： <div></div>:主要是结合css页面分块布局
<span></span>:进行友好提示信息
//文字标签:
1.文字标签:<font></font>
属性： size:设置字体大小
color:设置字体颜色
face:设置字体
2.标题标签:<h1></h1>—-<h6></h6>
随着数字增大文字逐渐变小，字体是加粗的，内置字号，默认占据一行；
//文本标签
<b>定义粗体文本。</b>
<big>定义大号字。</big>
<em>定义着重文字。</em>
<i>定义斜体字。</i>
<small>定义小号字。</small>
<strong>定义加重语气。</strong>
<sub>定义下标字。</sub>
<sup>定义上标字。</sup>
<ins>定义插入字。</ins>
<del>定义删除字。</del>
//列表标签:
1.无序列表标签： <ul></ul>
属性：type :三个值，分别为
circle(空心圆) ,disc(默认,实心圆),square(黑色方块)
列表项：<li></li>
例:
<ul type="square">无序列表
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
</ul>
2.有序列表标签：<ol></ol>
属性：type：1、A、a、I、i（数字、字母、罗马数字）
列表项： <li></li>
例:
<ol type="I">有序列表
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
</ol>
//图片标签:
<img/>独立标签
属性:
src：图片地址： 相对路径 （同一个网站） 绝对路径 （不同网站）
width:宽度
height:高度
border:边框
align:对齐方式，代表图片与相邻的文本的相当位置（有三个属性值：top middle bottom）
alt:图片的文字说明
hspace 和 vspace 设定图片边沿上下左右空白，以免文字或其它图片过于贴近
//链接标签:
超链接可以是文本，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
<a>文本或图片</a>
属性：
href:跳转页面的地址(跳转到外网需要添加协议)；
name:名称，锚点(回到锚点: 顶部，底部，中间)，在访问锚点的书写格式:#name的值
<a name="top"></a> <!--定义锚点-->
<a href="#down">到底部</a> <!--跳转到down锚点-->
<a name="down"></a> <!--定义锚点-->
<a href="#top">到顶部</a> <!--跳转到top锚点-->
target:_self(自己) _blank(新页面，之前页面存在) _parent _top 默认_self
_search相等于给页面起一个名字，如果再次打开时，如果页面存在，则不再打开新的页面。可以是任意名字。
//表格标签
表格由<table>标签来定义,每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。
数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
//基本表格
<!--border:边框的宽度 bordercolor:边框的颜色 cellspacing:单元格的边距 width:宽度 height:高度-->
<table border="1" bordercolor="red" cellspacing="0" align="center" width="200" height="100">
<caption>学生表</caption> <!--表格名-->
<tr>
<th>学号</th> <!--表格表头-->
<th>姓名</th>
</tr>
<tr>
<td>1</td>
<td>aa</td>
</tr>
</table>
//表格的列合并 colspan 属性
<table border="1" bordercolor="red" cellspacing="0" align="center">
<tr>
<td colspan="4" align="center">学生表</td> <!--合并列colspan="4"即合并4列-->
</tr>
<tr>
<td>学号</td>
<td>姓名</td>
<td colspan="2">各科成绩</td> <!--合并2列-->
</tr>
<tr>
<td>1</td>
<td>aa</td>
<td>80</td>
<td>90</td>
</tr>
</table>
//表格的行合并 rowspan 属性
<table border="1" bordercolor="red" cellspacing="0" align="center">
<tr>
<td colspan="4" align="center">学生表</td><!--合并2列-->
</tr>
<tr>
<td>学号</td>
<td>姓名</td>
<td>语文成绩</td>
<td>数学成绩</td>
</tr>
<tr>
<td rowspan="2">1</td> <!--向下合并2行-->
<td rowspan="2">aa</td>
<td>80</td>
<td>90</td>
</tr>
<tr>
<td>80</td>
<td>90</td>
</tr>
</table>3.HTML表单标签
//form标签
属性：
action：表示动作，值为服务器的地址，把表单的数据提交到该地址上处理
method:请求方式： get 和post
get: 使用情况：一般情况用于查询数据。
1.地址栏,请求参数都在地址后拼接 path?name="张三"&password="123456"
2.不安全
3.效率高
4.get请求大小有限制，不同浏览器有不同，但是大约是2KB
post： 一般用于插入修改等操作
1.地址栏：请求参数单独处理。
2.安全可靠
3.效率低
4.post请求大小理论上无限。
enctype:表示是表单提交的类型
默认值：application/x-www-form-urlencoded 普通表单
multipart/form-data 多部分表单(一般用于文件上传)
//input标签
属性:
type: 以下为type可能要取的值：
1.1 text 文本框
获取输入框的内容要根据name获取
1.2 password 密码框
1.3 radio 单选框
name:必须一致
value:提交给服务器的数据
表示同一组中只能选中一个(checked="checked" 表示选中)
1.4 checkbox 多选框
name:必须一致
表示同一组中可以选多个 返回值是个数组(checked="checked" 表示选中)
1.5 file 上传控件
以上具有输入性质的必须要有name属性
以下按钮不具有输入性质，不需要name属性
1.6 submit 提交 添加按钮,提交表单
1.7 reset 重置 添加按钮,重置表单
1.9 image 图片提交按钮 添加图片,且按钮具有提交属性
以上所有input的属性:width 设置宽度,height 设置高度,border 设置边框
1.10 button 普通按钮
按钮上的文字使用value属性
1.11 hidden 表示隐藏域,该框的内容服务器需要,但是不想让用户知道(不显示在界面上)
name: 表单元素名字，只有name属性才能提交给服务器。
//select标签
<select name="country"> <!--select标签添加该属性multiple="multiple"表示多选-->
<!--option表示下拉列表项-->
<option value="none" selected="selected">-- 选择国家 --</option>
<!--selected="selected"表示选中该项-->
<option value="China">中国</option>
<option value="America">美国</option>
<option value="Japan">日本</option>
<option value="UK">英国</option>
</select>
//textarea标签
需要指定输入的区域位置大小
<textarea rows="5" cols="50"></textarea>
表示5行50列的区域可以输入内容，该元素没有value属性代码示例
<!--form标签,表单-->
<form>
用户名:<input type="text" name="username"/><br/>
密码:<input type="password" name="password"/><br/>
性别:<input type="radio" name="sex" value="nan" checked="checked"/>男<input type="radio" name="sex" value="nv"/>女<br/>
<!--checked="checked" 默认选中-->
选择技术:<input type="checkbox" name="tech" value="java">JAVA
<input type="checkbox" name="tech" value="html">HTML
<input type="checkbox" name="tech" value="css">CSS
<input type="checkbox" name="tech" value="javascript">javascript<br/>
一个按钮:<input type="button" value="Button" onclick="alert('按钮被点击了')"><br/>
隐藏组件:<input type="hidden" name="zhnagsan" value="20"><br/>
选择文件:<input type="file" name="file"><br/>
<!-- 下拉菜单 -->
<select name="country">
<option value="none" selected="selected">-- 选择国家 --</option>
<option value="China">中国</option>
<option value="America">美国</option>
<option value="Japan">日本</option>
<option value="UK">英国</option>
</select><br/>
个人介绍:<textarea rows="5" cols="50"></textarea><br/>
<!-- 图片组件具备提交功能 -->
<input type="image" src="1.gif"><br/>
<!--提交按钮,重置按钮-->
<input type="submit"/>
<input type="reset">
</form>4.HTML框架标签
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。
使用框架的坏处：
开发人员必须同时跟踪更多的HTML文档
很难打印整张页面
//框架结构标签
frameset定义如何将窗口分割为框架
rows/columns的值规定了每行/每列占据所属框架的比例
//框架标签
frame标签定义了放置在每个框架中的HTML文档。
不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用
假如一个框架有可见边框，用户可以拖动边框来改变它的大小
为了避免这种情况发生，可以在<frame> 标签中加入：noresize="noresize"
代码示例
//演示代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<frameset rows="15%,*"><!--上部子窗体-->
<frame src="test51.html"/>
<!--剩余部分继续分割-->
<frameset cols="15%,*">
<frame src="test52.html"/>
<frame src="test53.html" name="content"/>
</frameset>
</frameset>
<body>
</body>
</html>
//test51.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>网站标题</h1>
</body>
</html>
//test52.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<dl>
<dt>语言:</dt>
<dd><a href="SequenceInputStream.html" target="content">汉语</a></dd>
<dd><a href="test1.html" target="content">英语</a></dd>
<dd><a href="test2.html" target="content">日语</a></dd>
<dt>编程:</dt>
<dd><a href="test3.html" target="content">java</a></dd>
<dd><a href="test4.html" target="content">html</a></dd>
<dd><a href="test5.html" target="content">javascript</a></dd>
</dl>
</body>
</html>
//test53.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>//iframe标签
iframe标签会创建包含另外一个文档的内联框架。
frameborder:1/0 规定是否显示框架周围的边框。
scrolling:yes/no/auto 规定是否在 iframe 中显示滚动条。
<body>
<iframe src="test2.html" height="400" width="400">画中画标签</iframe>
<iframe src="test3.html" height="400" width="400">画中画标签</iframe>
<iframe src="test4.html" height="1000" width="400">画中画标签</iframe>
<!--可以恶意连接-->
<iframe src="https://www.baidu.com" height="0" width="0">画中画标签</iframe>
</body>5.HTML其他
<!--该网页的关键字-->
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<!--该网页的描述-->
<meta http-equiv="description" content="this is my page">
<!--该网页的编码-->
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> html4.01
<meta charset="UTF-8"> html5
<!-- href：引入css文件的地址-->
<link rel="stylesheet" type="text/css" href="./styles.css">
<!--src：js的文件地址-->
<script type="text/javascript" src=""></script>
< 小于号
> 大于号
& 与字符
" 引号
® 己注册
© 版权
™ 商标
空格 
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
