HTML概念和作用
HTML(Hyper Text Markup Language):超文本标记语言
超文本:不仅包含普通文本,更强大,还可以包含图片,视频,音频,超链接,表格等
标记:就是标签.可以使用一系列的标签,描述各种数据
HTML的作用
编写文本,扩展名为html
HTML发展历程
2014年10月，万维网联盟经过接近8年的艰苦努力发布HTML5规范
HTML5更适合于移动设备，并且添加了多媒体的标签
HTML代码的组成>
标签
标签可以用于设置文本样式、图片样式、超链接样式等等。用<>表示
例如:<h1>标签，代表一级标题。我们可以使用开始标签和结束标签包围文字，这些文字就以标题形式显示了
属性
标签中还可以拥有属性，属性可以为标签提供更多的信息。
属性只能添加到开始标签中。格式为:属性名=属性值
例如:align属性，代表对齐方式。我们可以在开始标签中添加该属性，就能让内容在不同位置显示
HTML入门案例
创建一个简单网页
(旧版本选择Static Web,新版本直接选java模块,进入后把src删掉即可)
页面说明
<!DOCTYPE html>:HTML5的文档声明
<html lang=“en”>:根标签，一个文件中只能有一个根标签，lang属性表示网页使用的语言，默认是en，可以修改成zh
<head>:头部标签
<meta charset="UTF-8">:设置字符集，建议使用UTF-8
<title>:文档标题，显示在浏览器标签上<body>:身体标签 ，包含所有的文档内容
网页的介绍-HTML运行原理
文本标签
HTML标签的分类
按是否有主体分
按是否换行
HTML基础语法-文本标签
<!DOCTYPE html>
<html lang="en">
<!--head的内容不会在浏览器中显示.主要设置网页的信息-->
<head>
<meta charset="UTF-8">
<title>第一个网页</title>
</head>
<body>
<!--body的内容会在浏览器上显示-->
<!-- H1-H6:header 标题标签,加粗H1最大,H6最小
align属性:对齐方式,有三种 left(左对齐),center(居中对齐),right(右对齐)
-->
<h1 align="left">我是H1</h1>
<H2 align="center">我是H2</H2>
<H3 align="right">我是H3</H3>
<H4>我是H4</H4>
<H5>我是H5</H5>
<H6>我是H6</H6>
<!--
hr:水平分割线
color: 颜色
size:粗细 px表示像素一个像素就是一个点
width:宽度支持px %
-->
<hr/>
<!-- 选中内容-> ctrl+alt+t可以让内容包裹一个标签-->
<h2>我是一段内容</h2>
<!--
font:字体标签，font在H5版本中已经不使用，有其他替代方案
color:颜色
size:文字大小1~7级1最小，7最大
face:设置字体
-->
<font color="aqua" size="7" face="宋体">今天放假好开心</font><br/>
<!--br:换行，网页中文字要换行一定需要br标签-->
<!--b:加粗 bold-->
<b>我是加粗的文字</b><br/>
<!--i:倾斜 italic-->
<i>我是倾斜的文字</i><br/>
<b><i>我是加粗倾斜的文字</i></b>
<!--
p:表示段落
title:鼠标移上去显示的文字-->
<p title="我就是一个提示">我是一段文字....</p>
<p title="我就是一个提示">我是一段文字....</p>
<p title="我就是一个提示">我是一段文字....</p>
<p title="我就是一个提示">我是一段文字....</p>
</body>
</html>
HTML基础语法-有序和无序列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
ol标签: order list 有序列表
type属性:序号显示的类型
1， a， i
li标签:一项 list
-->
<ol>
<li>电磁阀</li>
<li>咖啡壶</li>
<li>水貂绒</li>
</ol>
<ol type="i">
<li>电磁阀</li>
<li>咖啡壶</li>
<li>水貂绒</li>
</ol>
<ol type="A">
<li>电磁阀</li>
<li>咖啡壶</li>
<li>水貂绒</li>
</ol>
<ol type="a">
<li>电磁阀</li>
<li>咖啡壶</li>
<li>水貂绒</li>
</ol>
<!--
ul标签: UNorder list 无序标签
type属性:序号显示的类型
disc, circle, square
li:一项 list
-->
<!--空心圆形-->
<hr/>
<ul type="circle">
<li>电磁阀</li>
<li>咖啡壶</li>
<li>水貂绒</li>
</ul>
<!--实心正方形-->
<ul type="square">
<li>电磁阀</li>
<li>咖啡壶</li>
<li>水貂绒</li>
</ul>
<!--默认实心圆形-->
<ul type="disc">
<li>电磁阀</li>
<li>咖啡壶</li>
<li>水貂绒</li>
</ul>
</body>
</html>
HTML基础语法-特殊字符
HTML基础语法-div和span
div独占一行
span小范围划分内容
HTML基础语法-图像标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
img:表示图片标签,可以显示图片，
src:设置图片的路径，图片的路径不能使用绝对路径，为了安全考虑
../是回退到上一级
html文件的相对路径是本文件所在文件夹
width:图片宽度
height:图片高度
alt:如果图片丢失，出现的替代文字
title:鼠标移上去显示的文字
-->
<img src="img/a.jpg">
<img src="img/a.jpg" width="100">
<img src="img/a.jpg" width="100" height="250">
<img src="img/ab.jpg" alt="图片找不到了!">
<img src="img/a.jpg" title="你选中图片了">
</body>
</html>
HTML基础语法-链接标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
a:超链接标签，可以跳转到其他页面，如果是跳转到其他网站需要http://开头
href:跳转的目的地
target:打开方式
_self:在本页面打开 默认的
_blank:在新页面打开
-->
<a href="列表标签.html">点我跳转到列表标签</a>
<a href="图片标签.html">点我跳转到图片标签</a>
<a href="http://www.baidu.com">点我跳转到百度</a>
<!--点击图片跳转到目的地-->
<a href="http://www.baidu.com" target="_blank"><img src="img/三只松鼠.png"></a>
</body>
</html>
HTML基础语法-表格标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
table标签:表示表格 是一个容器,它里面会包含其他标签
border属性:表格的边框
cellpadding:内容到边框的距离
cellspacing:单元格之间的间距
caption:表格标题
tr标签:表示一行,也是一个容器,包含其他标签 table row:表格的行
th标签:表示列标题,会加粗居中 table header:表格头部
td标签:表示普通的单元格
align:
加在td上，这个单元格居中
加在tr上，这行居中
加在table，table自己在网页中居中
rowspan:跨几行
colspan:跨几列
column
thead:头部,tbody:身体,tfoot:脚部 是不可见的,多表格进行逻辑划分.方便后续的操作
-->
<table border="1px" width="500" align="center" cellspacing="0xp" cellpadding="6xp" >
<caption>学生成绩表</caption>
<!--第一行-->
<tr align="center">
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>成绩</th>
</tr>
<!-- 第二行-->
<tr align="center">
<td>100</td>
<td>潘金莲</td>
<td>女</td>
<td>80</td>
</tr>
<!-- 第三行-->
<tr align="center">
<td>200</td>
<td>武大郎</td>
<td>男</td>
<td rowspan="2">90</td>
</tr>
<!-- 第四行-->
<tr align="center">
<td>300</td>
<td>灰太狼</td>
<td>男</td>
</tr>
<!-- 第五行-->
<tr align="center">
<td>总成绩</td>
<td colspan="3">900</td>
</tr>
</table>
</body>
</html>
HTML基础语法-表单标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
form标签:form表单,用于收集用户输入的数据，是一个容器
action:数据提交的目的地
method:数据提交的方式
get(默认):在地址栏可以看到提交的数据(不安全)
post:在地址栏看不到提交的数据(相对安全)
input标签:输入框,让用户来输入数据
name:给数据取名字,让服务器知道这个数据时做什么的
type="text”默认的,输入文字可以显示
type="password”密码显示小圆点
type="submit”提交表单中的数据
注意:input的type为submit会将form表单中的所有数据提交给服务器
-->
<form action="login" method="post">
用户名:<input name="username"><br/>
密码:<input name="password" type="password"><br/>
<input type="submit" value="登录">
</form>
</body>
</html>
HTML基础语法-注册页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
</head>
<body>
<!--input标签
placeholder属性:占位文字
type="radio"单选按钮 name属性要相同才能选中其中一个:是个小圆圈复选框
type="checkbox" 复选框,可以选择多个
type="date":日期选择框
type="file":文件域 选择文件
type="reset":清空表单的输入内容,回到初始状态
type="image":图片按钮
type="button":普通按钮,要结合js处理按钮点击
checked ="checked" 表示选中
select下拉框:
每一个选项都是一个option标签
option的选中标签是:selected="selected"默认选中
textarea标签:文本域 让我们输入一段问题
rows="10" :行数
cols="60":列数
-->
<form method="get" action="regidter">
<table>
<!-- 第一行-->
<tr>
<td>用户名:</td>
<td>
<input placeholder="请输入用户名" name="username">
</td>
</tr><!-- 第2行-->
<tr>
<td>密码:</td>
<td>
<input placeholder="请输入密码" name="password" type="password">
</td>
</tr><!-- 第3行-->
<tr>
<td>邮箱:</td>
<td>
<input placeholder="请输入邮箱" name="email">
</td>
</tr><!-- 第4行-->
<tr>
<td>性别:</td>
<td>
<!-- radio单选按钮 name属性要相同才能选中其中一个:是个小圆圈复选框-->
<input type="radio" name="sex" value="man">男
<input type="radio" name="sex" value="women">女
</td>
</tr><!-- 第5行-->
<tr>
<td>爱好:</td>
<td>
<!-- checkbox 多选复选框-->
<input type="checkbox" name="hobby" value="yy">游泳
<input type="checkbox" name="hobby" value="sw">上网
<input type="checkbox" name="hobby" value="dy">电影
<input type="checkbox" name="hobby" value="ks">看书
</td>
</tr><!-- 第6行-->
<tr>
<td>学历:</td>
<td>
<!-- select下拉框
selected="selected"默认选中
-->
<select name="edu">
<option value="xxmby">小学没毕业</option>
<option value="cz">初中</option>
<option value="gz" selected="selected">高中</option>
<option value="dx">大学</option>
</select>
</td>
</tr><!-- 第7行-->
<tr>
<td>出生:</td>
<td>
<input name="birthday" type="date">
</td>
</tr><!-- 第8行-->
<tr>
<td>照片:</td>
<td>
<input name="photo" type="file">
</td>
</tr><!-- 第9行-->
<tr>
<td>个人简介:</td>
<td>
<textarea name="jj" rows="10" cols="60"></textarea>
</td>
</tr><!-- 第10行-->
<tr>
<td></td>
<td>
<input type="submit" value="注册" name="zhuce">
<input type="reset" value="重置" name="chongzhi">
<input type="image" src="img/a.jpg">
<button type="button"> 点我啊 </button>
</td>
</tr>
</table>
</form>
</body>
</html>
HTML基础语法-多媒体扩标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--播放本地音频
controls属性:显示控制条-->
<audio src="media/b.mp3" controls="controls">
您的浏览器不支持audio标签
</audio>
<!--播放在线音频-->
<audio src="https://www.w3school.com.cn/i/horse.ogg" controls="controls">
您的浏览器不支持audio标签
</audio>
<br/>
<!--<!–播放本地视频–>-->
<video src= "media/c.mp4" width="500" controls="controls" >
<!--您的浏览器不支持video标签-->
</video>
<!--<!–播放在线视频–>-->
<video src="https://www.w3school.com.cn/i/movie.ogg" controls="controls">
您的浏览器不支持video标签
</video>
</body>
</html>
HTML推荐学习网址
总结
扫一扫
2343
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
