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>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <h1>Java欢迎您</h1> 9 <h2 align = "center">Java欢迎您</h2> 10 <h3>Java欢迎您</h3> 11 <h4>Java欢迎您</h4> 12 <h5>Java欢迎您</h5> 13 <h6>Java欢迎您</h6> 14 </body> 15 </html>
网页展示：
字体标签（了解）：规定文本的字体、字体的尺寸、字体的颜色
<font></font>
常用属性：
face:字体
size:尺寸
color:颜色
颜色的取值（RGB）：
方法1：#xxxxxx x为16进制
方法2：英文，如red、blue
段落标签：
<p></p>
其他标签：
<b></b> <strong></strong> :加粗
<i></i>:斜体
水平线
<hr/>
换行
<br/>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <font size="1">我的size是1</font> 9 <font size="2">我的size是2</font> 10 <font size="3">我的size是3</font> 11 <font size="4">我的size是4</font> 12 <font size="5">我的size是5</font> 13 <font size="6">我的size是6</font> 14 <font size="7">我的size是7</font> 15 <br/> 16 <font color="red">我是红色</font> 17 <font color="blue">我是蓝色</font> 18 <font color="black">我是黑色</font> 19 <br/> 20 <font color="#000000">我是黑色</font> 21 <br /> 22 <font face ="黑体">我是黑体字</font> 23 <br/> 24 <b>我是粗体</b> 25 <br /> 26 <i>我是斜体</i> 27 <br /> 28 下面是水平线 29 <hr /> 30 上面是水平线 31 </body> 32 </html>
网页展示：
图片标签：
<img/>
常用属性：
src:图片的路径
alt:替代的文字
title:移上去显示的文字
width:宽
height:高
大小的写法：
像素：111px
百分比：20%
图片路径：
相对路径：
./ 或者 什么都不写 ->当前路径
../上级目录
绝对路径：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <img src="../img/huge1.jpg" title="胡歌" width="233" height="233"/> 9 <img src="../img/huge2.jpg" alt="胡歌" /> 10 <img src="../img/huge3.jpg" alt="胡歌" /> 11 </body> 12 </html>
页面展示：
列表标签：
<ol></ol> 有序列表
<ul></ul>无序列表
常用的标签：
<li></li> 列表项
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <ol> 9 <li>春</li> 10 <li>夏</li> 11 <li>秋</li> 12 <li>冬</li> 13 </ol> 14 15 <ol type="a"> 16 <li>梅</li> 17 <li>兰</li> 18 <li>竹</li> 19 <li>菊</li> 20 </ol> 21 <hr /> 22 <ul> 23 <li>春</li> 24 <li>夏</li> 25 <li>秋</li> 26 <li>冬</li> 27 </ul> 28 <ul type="circle"> 29 <li>春</li> 30 <li>夏</li> 31 <li>秋</li> 32 <li>冬</li> 33 </ul> 34 <ul type="square"> 35 <li>春</li> 36 <li>夏</li> 37 <li>秋</li> 38 <li>冬</li> 39 </ul> 40 41 </body> 42 </html>
页面展示：
超链接标记：
<a></a>
常用属性：
href:跳转路径 #当前路径
target:在那里打开
默认值： _self 在当前页面打开
_ blank 在空白页面打开
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <h2>友情链接</h2> 9 <ol> 10 <li><a href="https://www.cnblogs.com/" target="_blank">博客园</a></li> 11 <li><a href="https://www.csdn.net/" target="_blank">CSDN</a></li> 12 </ol> 13 </body> 14 </html>
页面展示：
表格标签
<table></table>
常用的子标签：
<tr>：行
<tr></tr>
常用的子标签：
<td>:列
<th>:表头单元格 默认居中加粗
注意：
一行必须只有一个单元格或者一列
table的常用属性：
border:边框 像素值
width:表格的宽度 百分比
height：表格的高度 像素值
align：表格对齐属性
tr的常用属性：
align：内容对齐方式
td的常用属性：
align:内容对齐
colspan:跨列合并：合并的列数
rowspan:跨行合并：合并的行数
1 <!DOCTYPE html> 2 <html style="height: 100%;"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body style="height: 100%;"> 8 <div style="height: 100%;"> 9 <!--四行一列--> 10 <table border="0" width="100%" > 11 <tr align="right"> 12 <td> 13 <a href="#">新闻</a> 14 <a href="#">hao123</a> 15 <a href="#">地图</a> 16 <a href="#">视频</a> 17 <a href="#">贴吧</a> 18 <a href="#">学术</a> 19 <a href="#">登录</a> 20 <a href="#">设置</a> 21 <!--<form> 22 <select name="program"> 23 <option>更多产品</option> 24 <option>糯米</option> 25 <option>音乐</option> 26 <option>图片</option> 27 <option>知道</option> 28 <option>文库</option> 29 <option>风云榜</option> 30 </select> 31 </form>--> 32 <button >更多产品</button> 33 </td> 34 </tr> 35 <tr align="center" > 36 <td> 37 <img src="../img/baidu.jpg" / height="200"> 38 </td> 39 </tr> 40 <tr align="center"><td> 41 <form> 42 <textarea cols="66" rows="1"></textarea> 43 <input type="submit" name="百度一下" /> 44 </form> 45 </td></tr> 46 <tr align="center" valign="bottom" height="400"><td> 47 <p>二维码</p> 48 <p> 49 <a href="#">把百度设为主页</a> 50 <a href="#">关于百度</a> 51 <a href="#">About Baidu</a> 52 <a href="#">百度推广</a> 53 </p> 54 <p>©2019 Baidu 使用百度前必读 意见反馈 京ICP证030173号 </p> 55 </td></tr> 56 </table> 57 </div> 58 </body> 59 </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">指定浏览器用什么编码打开此页面
953
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
