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/" target="_blank">博客园</a></li>
<li><a href="https://www.csdn.net/" 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="#">新闻</a>
<a href="#">hao123</a>
<a href="#">地图</a>
<a href="#">视频</a>
<a href="#">贴吧</a>
<a href="#">学术</a>
<a href="#">登录</a>
<a href="#">设置</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="#">把百度设为主页</a>
<a href="#">关于百度</a>
<a href="#">About Baidu</a>
<a href="#">百度推广</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">指定浏览器用什么编码打开此页面