html :Hyper Text Markup Language 超文本标记语言
- 超文本：比文本功能更加强大
- 标记语言：通过一组标签对内容进行描述的一门语言
html书写规则：
- 文件的后缀名：.html(建议)或者.htm
- 标签必须用<>引起来
- 属性：格式：key = “value” 建议属性的值用引号引起来
- 不区分大小写
注意：
- 最好将所有的内容放在一个标签中<html> </html>
- 有开始标签和结束标签的标签称之为围堵标签
- 没有结束的标签称之为空标签，如，<br>
- 开始标签和结束标签之间的内容称之为标签体
- <!–注释内容–>html页面中的注释内容
- 标签必须正常嵌套
文件标签：
html标签：
声明当前网页为html页面
子标签：
<head></head>
<body></body>
head:用来存放当前页面的重要信息，一般不展示在html页面上
常见的子标签：
<title></title> 网页的标题
body:
要展示的数据放在body中
标题标签：
<hn></hn>（n:1~6）
<h1>最大的标签，<h6>最小的标签
自动换行，且留白，默认加粗
常用属性：
align:对齐方式
left：左对齐 right:右对齐 center:居中
格式：<h2 align=”center”>这里是要展示的内容<h2>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>Java欢迎您</h1>
<h2 align = "center">Java欢迎您</h2>
<h3>Java欢迎您</h3>
<h4>Java欢迎您</h4>
<h5>Java欢迎您</h5>
<h6>Java欢迎您</h6>
</body>
</html>
网页展示：
字体标签（了解）：规定文本的字体、字体的尺寸、字体的颜色
<font></font>
常用属性：
face:字体
size:尺寸
color:颜色
颜色的取值（RGB）：
方法1：#xxxxxx x为16进制
方法2：英文，如red、blue
段落标签：
<p></p>
其他标签：
<b></b> <strong></strong> :加粗
<i></i>:斜体
水平线
<hr/>
换行
<br/>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<font size="1">我的size是1</font>
<font size="2">我的size是2</font>
<font size="3">我的size是3</font>
<font size="4">我的size是4</font>
<font size="5">我的size是5</font>
<font size="6">我的size是6</font>
<font size="7">我的size是7</font>
<br/>
<font color="red">我是红色</font>
<font color="blue">我是蓝色</font>
<font color="black">我是黑色</font>
<br/>
<font color="#000000">我是黑色</font>
<br />
<font face ="黑体">我是黑体字</font>
<br/>
<b>我是粗体</b>
<br />
<i>我是斜体</i>
<br />
下面是水平线
<hr />
上面是水平线
</body>
</html>
网页展示：
图片标签：
<img/>
常用属性：
src:图片的路径
alt:替代的文字
title:移上去显示的文字
width:宽
height:高
大小的写法：
像素：111px
百分比：20%
图片路径：
相对路径：
./ 或者 什么都不写 ->当前路径
../上级目录
绝对路径：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img src="../img/huge1.jpg" title="胡歌" width="233" height="233"/>
<img src="../img/huge2.jpg" alt="胡歌" />
<img src="../img/huge3.jpg" alt="胡歌" />
</body>
</html>
页面展示：
列表标签：
<ol></ol> 有序列表
<ul></ul>无序列表
常用的标签：
<li></li> 列表项
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ol>
<li>春</li>
<li>夏</li>
<li>秋</li>
<li>冬</li>
</ol> <ol type="a">
<li>梅</li>
<li>兰</li>
<li>竹</li>
<li>菊</li>
</ol>
<hr />
<ul>
<li>春</li>
<li>夏</li>
<li>秋</li>
<li>冬</li>
</ul>
<ul type="circle">
<li>春</li>
<li>夏</li>
<li>秋</li>
<li>冬</li>
</ul>
<ul type="square">
<li>春</li>
<li>夏</li>
<li>秋</li>
<li>冬</li>
</ul> </body>
</html>
页面展示：
超链接标记：
<a></a>
常用属性：
href:跳转路径 #当前路径
target:在那里打开
默认值： _self 在当前页面打开
_ blank 在空白页面打开
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h2>友情链接</h2>
<ol>
<li><a href="https://www.cnblogs.com/" rel="external nofollow" target="_blank">博客园</a></li>
<li><a href="https://www.csdn.net/" rel="external nofollow" target="_blank">CSDN</a></li>
</ol>
</body>
</html>
页面展示：
表格标签
<table></table>
常用的子标签：
<tr>：行
<tr></tr>
常用的子标签：
<td>:列
<th>:表头单元格 默认居中加粗
注意：
一行必须只有一个单元格或者一列
table的常用属性：
border:边框 像素值
width:表格的宽度 百分比
height：表格的高度 像素值
align：表格对齐属性
tr的常用属性：
align：内容对齐方式
td的常用属性：
align:内容对齐
colspan:跨列合并：合并的列数
rowspan:跨行合并：合并的行数
<!DOCTYPE html>
<html style="height: 100%;">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body style="height: 100%;">
<div style="height: 100%;">
<!--四行一列-->
<table border="0" width="100%" >
<tr align="right">
<td>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >新闻</a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >hao123</a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >地图</a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >视频</a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >贴吧</a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >学术</a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >登录</a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >设置</a>
<!--<form>
<select name="program">
<option>更多产品</option>
<option>糯米</option>
<option>音乐</option>
<option>图片</option>
<option>知道</option>
<option>文库</option>
<option>风云榜</option>
</select>
</form>-->
<button >更多产品</button>
</td>
</tr>
<tr align="center" >
<td>
<img src="../img/baidu.jpg" / height="200">
</td>
</tr>
<tr align="center"><td>
<form>
<textarea cols="66" rows="1"></textarea>
<input type="submit" name="百度一下" />
</form>
</td></tr>
<tr align="center" valign="bottom" height="400"><td>
<p>二维码</p>
<p>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >把百度设为主页</a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >关于百度</a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >About Baidu</a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >百度推广</a>
</p>
<p>©2019 Baidu 使用百度前必读 意见反馈 京ICP证030173号 </p>
</td></tr>
</table>
</div>
</body>
</html>
效果图：
表单
<from></form>
作用：用来从浏览器端手机端收集用户的信息
常用属性：
action:信息提交的路径 默认是当前页面
method:表单提交的方式（共7种，只需掌握其中两种）
get: 默认
post:
get和post的区别：
1.get请求会把所有的参数追加在地址栏上，post不会
2.get请求参数大小有限制（具体由浏览器决定），post请求参数大小没有限制
3.post相对于get安全些
常见的子标签
input
select:下拉选
textarea:文本域
input标签
常用的属性：
type：
text:文本框 默认
password:密码框
radio:单选框
checkbox：多选框
file:文件框
submit:提交
reset:重置
button:普通按钮
hidden:隐藏域 在页面上不显示，但提交的时候可以提交过去
image:图片提交 替代submit
name：
可以将几个单选框（复选框）设置为一组
要想将信息保存到服务器，必须有name属性
readonly:
readonly=”readonly” 只读
disabled:
disabled=”disabled” 不可用
select:下拉选
格式：
<select name=” “>
<option></option>
</select>
textarea：文本域
提交到服务器的内容的格式：
key=value&
对于文本框 密码框 文本域 手写的内容传递过来了
对于单选框和多选框来说，却没有把值传过去，要想把值传递过去，必须设置value属性
对于下拉选，若想把选中的值传递过去，请加上value属性
默认值：
文本框 密码框 只需要添加value属性
单选框 多选框 需添加 checked=”checked”
frameset:框架集
常用属性：
cols:垂直切割
例如：cols=”40%,60%”
例如：cols=”40%,*,10%”
rows:水平切割
常见的子标签：
frame
注意：
最好不要与body共存
frame:具体实现
常用属性：
src:展示的页面url
转义字符：
三部分构成：& +实体+;
常用的转义字符：
> >
< <
& &
空格
meta
元信息标签
<meta charset=”UTF-8″>指定浏览器用什么编码打开此页面
